/* HarmonyOS Symbol (HMSymbol) — every glyph as .hms-<name>; variable weight 40–900 via --hms-weight */
.hms { font-family: var(--font-icon, "HMSymbol") !important; font-style: normal; font-weight: var(--hms-weight, 400); font-variant: normal;
  text-transform: none; line-height: 1; speak: never; display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; flex: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  user-select: none; pointer-events: none; transition: font-weight .35s cubic-bezier(.16,1,.3,1); }
.hms-thin { --hms-weight: 200; } .hms-light { --hms-weight: 300; } .hms-medium { --hms-weight: 500; } .hms-bold { --hms-weight: 700; }
.hms-archivebox::before{content:"\F01F6"}
.hms-archivebox_fill::before{content:"\F01F5"}
.hms-arrow_clockwise::before{content:"\F00C7"}
.hms-arrow_counterclockwise::before{content:"\F00C8"}
.hms-arrow_left_arrow_right::before{content:"\F041E"}
.hms-arrow_up::before{content:"\F00CE"}
.hms-bell::before{content:"\F01D5"}
.hms-bell_fill::before{content:"\F01D1"}
.hms-bolt::before{content:"\F0262"}
.hms-checkmark::before{content:"\F0013"}
.hms-checkmark_circle_fill::before{content:"\F000E"}
.hms-chevron_left::before{content:"\F00DA"}
.hms-clock::before{content:"\F03DD"}
.hms-doc::before{content:"\F00BD"}
.hms-doc_filled_on_doc::before{content:"\F05B9"}
.hms-doc_plaintext::before{content:"\F00C1"}
.hms-doc_plaintext_and_pencil::before{content:"\F05AF"}
.hms-doc_zipper::before{content:"\F018D"}
.hms-dot_radiowaves_left_and_right::before{content:"\F0279"}
.hms-exclamationmark_triangle_fill::before{content:"\F06D7"}
.hms-eye::before{content:"\F0120"}
.hms-eye_slash::before{content:"\F011F"}
.hms-film::before{content:"\F047C"}
.hms-flame_fill::before{content:"\F00F3"}
.hms-folder::before{content:"\F00C5"}
.hms-folder_fill::before{content:"\F00C6"}
.hms-gearshape::before{content:"\F0020"}
.hms-gearshape_fill::before{content:"\F001F"}
.hms-hidisk::before{content:"\F051A"}
.hms-hidisk_fill::before{content:"\F0673"}
.hms-hourglass::before{content:"\F048E"}
.hms-info_circle_fill::before{content:"\F0295"}
.hms-key::before{content:"\F049F"}
.hms-leaf_fill::before{content:"\F03F8"}
.hms-link::before{content:"\F02A1"}
.hms-list_bullet::before{content:"\F0069"}
.hms-lock_fill::before{content:"\F04C1"}
.hms-magnifyingglass::before{content:"\F0029"}
.hms-minus::before{content:"\F002C"}
.hms-moon::before{content:"\F002E"}
.hms-moon_fill::before{content:"\F002D"}
.hms-music::before{content:"\F00AD"}
.hms-paperplane::before{content:"\F0030"}
.hms-paperplane_fill::before{content:"\F002F"}
.hms-person::before{content:"\F05E5"}
.hms-person_fill::before{content:"\F05E1"}
.hms-play_fill::before{content:"\F00B4"}
.hms-plus::before{content:"\F0035"}
.hms-power::before{content:"\F0036"}
.hms-rectangle_stack::before{content:"\F0583"}
.hms-slider_horizontal_2::before{content:"\F0072"}
.hms-sort::before{content:"\F0581"}
.hms-speaker_fill::before{content:"\F003F"}
.hms-speaker_slash::before{content:"\F0043"}
.hms-square_and_arrow_down::before{content:"\F00D4"}
.hms-square_fill_grid_2x2::before{content:"\F004B"}
.hms-square_grid_2x2::before{content:"\F00E3"}
.hms-sun_max::before{content:"\F0050"}
.hms-sun_max_fill::before{content:"\F004F"}
.hms-timer::before{content:"\F0406"}
.hms-trash::before{content:"\F0001"}
.hms-trash_fill::before{content:"\F0052"}
.hms-wand_and_stars::before{content:"\F0157"}
.hms-wand_and_stars_fill::before{content:"\F059D"}
.hms-waveform_path_ecg_heart::before{content:"\F032F"}
.hms-wifi_router::before{content:"\F02E8"}
.hms-wifi_router_fill::before{content:"\F02E7"}
.hms-wrench_and_screwdriver::before{content:"\F0693"}
.hms-xmark::before{content:"\F0056"}

/*!
 * HM7 Immersive Light — motion kit v1.0
 * Reverse-engineered from the HarmonyOS 7 "沉浸光感" (immersive light) launch demo.
 * Vanilla CSS, no external dependencies. Pair with hm7-motion.js.
 */

:root {
  --hm7-pink: 255, 150, 214;
  --hm7-cyan: 130, 232, 255;
  --hm7-ember: 255, 128, 40;
  --hm7-blur: 18px;
  --hm7-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --hm7-ease-out: cubic-bezier(.16, 1, .3, 1);
  --hm7-ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ── Stage: the cobalt wallpaper with the sweeping "7" light ribbon ── */
.hm7-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(55% 45% at 88% -5%, rgba(var(--hm7-pink), .55), transparent 62%),
    radial-gradient(70% 60% at 0% 105%, var(--hm7-cobalt-lo), transparent 72%),
    linear-gradient(158deg, var(--hm7-cobalt-hi) 0%, var(--hm7-cobalt) 48%, #2225cf 100%);
  -webkit-tap-highlight-color: transparent;
}
.hm7-stage::before,
.hm7-stage::after {
  content: "";
  position: absolute;
  inset: -35% -25%;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}
/* broad diffuse band */
.hm7-stage::before {
  background: linear-gradient(118deg,
    transparent 38%,
    rgba(214, 200, 255, .28) 45%,
    rgba(246, 240, 255, .72) 50.5%,
    rgba(222, 205, 255, .30) 55%,
    transparent 62%);
  filter: blur(10px);
  animation: hm7-ribbon 16s var(--hm7-ease-io) infinite alternate;
}
/* sharp bright crest with the S-bend */
.hm7-stage::after {
  background:
    radial-gradient(28% 60% at 46% 62%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(124deg, transparent 47.6%, rgba(255, 255, 255, .95) 49.6%, rgba(255, 255, 255, .25) 51.5%, transparent 53.5%);
  filter: blur(2.5px);
  opacity: .9;
  animation: hm7-ribbon 16s var(--hm7-ease-io) infinite alternate-reverse;
}
@keyframes hm7-ribbon {
  from { transform: translate3d(-3%, 1%, 0) rotate(-1.5deg); }
  to   { transform: translate3d(3%, -2%, 0) rotate(1.5deg); }
}

/* Touch light: lives UNDER the glass so backdrop-filter diffuses it ("光随指动") */
.hm7-touchlight {
  --lc: 255, 255, 255;
  position: absolute;
  left: 0; top: 0;
  width: 280px; height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(var(--lc), .85) 0%,
    rgba(var(--lc), .35) 22%,
    rgba(var(--lc), .10) 45%,
    transparent 70%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* Lamp bloom: a lit tile's light, under the glass so neighbours' frosting picks up its colour */
.hm7-lampglow {
  --lc: 255, 255, 255;
  position: absolute;
  left: 0; top: 0;
  width: 200px; height: 200px;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(var(--lc), .62) 0%,
    rgba(var(--lc), .34) 18%,
    rgba(var(--lc), .12) 42%,
    rgba(var(--lc), 0) 68%);
  will-change: transform, opacity, width;
}

/* ── Glass material ── */
.hm7-glass {
  --lx: 50%;
  --ly: -60%;
  --li: 0;
  --lc: 255, 255, 255;
  --lr: 150px;
  --l2x: 50%;
  --l2y: 50%;
  --l2i: 0;
  --l2c: 255, 255, 255;
  position: relative;
  isolation: isolate;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07));
  -webkit-backdrop-filter: blur(var(--hm7-blur)) saturate(175%);
  backdrop-filter: blur(var(--hm7-blur)) saturate(175%);
  box-shadow:
    inset 0 0 0 1.25px rgba(255, 255, 255, .48),
    inset 0 1px 14px rgba(255, 255, 255, .32),
    inset 0 -10px 22px rgba(140, 120, 255, .16),
    0 14px 34px -10px rgba(8, 10, 90, .5);
}
/* Fresnel / specular fill that follows the light source */
.hm7-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(170px circle at var(--l2x) var(--l2y),
      rgba(var(--l2c), calc(.5 * var(--l2i))),
      rgba(var(--l2c), calc(.14 * var(--l2i))) 45%,
      rgba(var(--l2c), 0) 72%),
    radial-gradient(calc(var(--lr) * 1.4) circle at var(--lx) var(--ly),
      rgba(var(--lc), calc(.42 * var(--li))),
      rgba(var(--lc), 0) 70%);
}
/* Directional rim light — brightest on the edge facing the light */
.hm7-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.75px;
  pointer-events: none;
  background:
    radial-gradient(150px circle at var(--l2x) var(--l2y),
      rgba(var(--l2c), var(--l2i)),
      rgba(var(--l2c), calc(.15 * var(--l2i))) 70%,
      rgba(var(--l2c), 0) 100%),
    radial-gradient(var(--lr) circle at var(--lx) var(--ly),
      rgba(var(--lc), calc(.15 + .85 * var(--li))),
      rgba(var(--lc), calc(.10 * var(--li))) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Press physics */
.hm7-press {
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform .45s var(--hm7-ease-spring), background .3s ease;
}
.hm7-press.is-pressed { transform: scale(.92); transition-duration: .12s; }
.hm7-press:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Ripple that refracts what is behind it */
.hm7-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  -webkit-backdrop-filter: blur(3px) brightness(1.35) saturate(1.6);
  backdrop-filter: blur(3px) brightness(1.35) saturate(1.6);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 60%, #000 68%, transparent 78%);
  mask: radial-gradient(circle, transparent 52%, #000 60%, #000 68%, transparent 78%);
  background: radial-gradient(circle, transparent 54%, rgba(255, 255, 255, .55) 64%, transparent 76%);
  animation: hm7-ripple var(--dur, .95s) var(--hm7-ease-out) forwards;
}
@keyframes hm7-ripple {
  from { transform: scale(.4); opacity: 1; }
  to   { transform: scale(var(--to, 14)); opacity: 0; }
}

/* ── Control center tiles ── */
.hm7-cc-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  color: #fff;
  font: inherit;
}
.hm7-cc-btn svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 40, .25)); }
.hm7-cc-btn.is-on {
  background:
    radial-gradient(circle at 50% 28%, rgba(150, 175, 255, .95), rgba(70, 90, 255, .75) 70%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .75),
    inset 0 2px 16px rgba(255, 255, 255, .5),
    0 0 26px rgba(120, 140, 255, .55),
    0 14px 30px -10px rgba(8, 10, 90, .55);
}
.hm7-cc-pill {
  height: 58px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 8px 18px;
  border: 0;
  color: #fff;
  font: inherit;
}
.hm7-cc-pill .hm7-cc-ico {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
}
.hm7-cc-pill.is-on .hm7-cc-ico { background: rgba(255, 255, 255, .92); color: var(--hm7-cobalt); }
.hm7-cc-pill svg { width: 22px; height: 22px; }

/* ── Particle slider ── */
.hm7-pslider {
  --v: .5;
  position: relative;
  height: var(--h, 92px);
  border-radius: 999px;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  outline: none;
}
.hm7-pslider:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 14px 34px -10px rgba(8, 10, 90, .5); }
.hm7-pslider__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--v) * 100%);
  z-index: -1;
  background: var(--hm7-fill, linear-gradient(to var(--hm7-end, right),
    rgba(214, 208, 255, .62) 0%,
    rgba(236, 234, 255, .82) 45%,
    rgba(255, 255, 255, .97) 88%,
    #fff 100%));
  opacity: .5;
  transition: opacity .5s ease;
}
/* light spilling past the leading edge into the unlit glass — grows with the value */
.hm7-pslider__fill::before {
  content: "";
  position: absolute;
  inset-block: -10%;
  inset-inline-start: 100%;
  width: calc(50px + var(--v) * 190px);
  background: linear-gradient(to var(--hm7-end, right), rgba(var(--hm7-cyan), calc(.3 + .5 * var(--v))), rgba(var(--hm7-cyan), calc(.08 + .1 * var(--v))) 55%, rgba(var(--hm7-cyan), 0));
  -webkit-mask: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  filter: blur(6px);
  opacity: .35;
  transition: opacity .5s ease;
}
.hm7-pslider canvas { opacity: .6; transition: opacity .5s ease; }
.hm7-pslider.is-active .hm7-pslider__fill,
.hm7-pslider.is-active .hm7-pslider__fill::before,
.hm7-pslider.is-active canvas { opacity: 1; transition-duration: .09s; }
.hm7-pslider { transition: box-shadow .5s ease; }
.hm7-pslider.is-active { transition-duration: .09s; box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .9),
    inset 0 1px 18px rgba(255, 255, 255, .45),
    0 0 28px rgba(200, 210, 255, .35),
    0 14px 34px -10px rgba(8, 10, 90, .5); }
.hm7-pslider__fill::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: -1px;
  width: 26px;
  background: linear-gradient(to var(--hm7-end, right), transparent, rgba(255, 255, 255, .95) 85%, #fff);
  filter: blur(3px);
}
.hm7-pslider canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hm7-pslider__icon {
  position: absolute;
  inset-inline-start: calc(var(--h, 92px) * .32);
  top: 50%;
  width: 34px; height: 34px;
  margin-top: -17px;
  color: color-mix(in srgb, #12122e calc(var(--v) * 100%), #a7a7c8);
  pointer-events: none;
}
.hm7-pslider__icon .rays { transform-origin: 12px 12px; transform: scale(calc(.72 + var(--v) * .42)); }
.hm7-pslider__icon .core { transform-origin: 12px 12px; transform: scale(calc(.8 + var(--v) * .3)); }

/* vertical capsule (control centre) */
.hm7-pslider--v { height: auto; width: var(--w, 64px); aspect-ratio: auto; cursor: ns-resize; }
.hm7-pslider--v .hm7-pslider__fill {
  inset: auto 0 0 0;
  width: auto;
  height: calc(var(--v) * 100%);
  background: var(--hm7-fill, linear-gradient(to top,
    rgba(var(--hm7-pink), .5) 0%, rgba(238, 228, 255, .7) 40%, rgba(var(--hm7-cyan), .6) 78%, rgba(255, 255, 255, .96) 100%));
}
.hm7-pslider--v .hm7-pslider__fill::before {
  inset-inline: -10%; inset-block-start: auto; bottom: 100%; width: auto; height: calc(30px + var(--v) * 110px);
  background: linear-gradient(to top, rgba(var(--hm7-cyan), calc(.3 + .5 * var(--v))), rgba(var(--hm7-cyan), 0));
  -webkit-mask: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
  mask: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
}
.hm7-pslider--v .hm7-pslider__fill::after { inset: -1px 0 auto 0; width: auto; height: 22px; background: linear-gradient(to top, transparent, rgba(255, 255, 255, .95) 85%, #fff); }
.hm7-pslider--v .hm7-pslider__icon { inset-inline-start: 50%; top: auto; bottom: 12px; margin: 0 0 0 -17px; }
.hm7-pslider--v .hm7-pslider__icon .hms { font-size: 24px; transform: scale(calc(.85 + var(--v) * .25)); }

/* isolate: held slider stays, its surroundings fade (HarmonyOS 7 control centre) — keyframes, so
   no component's own transitions are overridden */
:is(.hm7-isolate, .hm7-isolate .hm7-ipath) > :not(.hm7-ipath):not(.hm7-touchlight):not(.hm7-lampglow):not(canvas):not(.hm7-dim) { animation: hm7-iso-out .16s ease forwards; pointer-events: none; }
:is(.hm7-unisolate, .hm7-unisolate .hm7-ipath) > :not(.hm7-ipath):not(.hm7-touchlight):not(.hm7-lampglow):not(canvas):not(.hm7-dim) { animation: hm7-iso-in .34s ease; }
.hm7-isolate.hm7-glass, .hm7-isolate .hm7-ipath.hm7-glass:not(.hm7-pslider) { animation: hm7-iso-bg-out .22s ease forwards; }
.hm7-unisolate.hm7-glass, .hm7-unisolate .hm7-ipath.hm7-glass:not(.hm7-pslider) { animation: hm7-iso-bg-in .34s ease; }
.hm7-isolate.hm7-glass::before, .hm7-isolate.hm7-glass::after { opacity: 0; transition: opacity .2s; }
.hm7-isolate .hm7-pslider.hm7-ipath { animation: hm7-iso-grow .5s var(--hm7-ease-spring) forwards; z-index: 5; }
.hm7-unisolate .hm7-pslider.hm7-ipath { animation: hm7-iso-shrink .4s var(--hm7-ease-spring); }
@keyframes hm7-iso-out { to { opacity: 0; transform: scale(.96); } }
@keyframes hm7-iso-in { from { opacity: 0; transform: scale(.96); } }
@keyframes hm7-iso-bg-out { to { background: transparent; box-shadow: none; -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); } }
@keyframes hm7-iso-bg-in { from { background: transparent; box-shadow: none; -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); } }
@keyframes hm7-iso-grow { to { transform: scale(1.1); } }
@keyframes hm7-iso-shrink { from { transform: scale(1.1); } }
.hm7-dim { position: absolute; inset: 0; z-index: 60; pointer-events: none; background: #000; opacity: 0; border-radius: inherit; transition: opacity .35s ease; }

/* ── Swipe-to-dismiss notification ── */
.hm7-notif-row {
  position: relative;
  transition: height .5s var(--hm7-ease-out), margin .5s var(--hm7-ease-out);
}
.hm7-notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 22px;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  will-change: transform;
}
.hm7-notif:active { cursor: grabbing; }
.hm7-notif { --mb: 0; }
.hm7-notif__body { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; }
/* directional motion blur while swiping: the text leaves ghost trails behind it */
.hm7-notif__body > * {
  text-shadow:
    calc(var(--mb) * 1.6px) 0 calc(var(--mb) * .8px) rgba(255, 255, 255, calc(var(--mb) * .07)),
    calc(var(--mb) * 3.4px) 0 calc(var(--mb) * 1.4px) rgba(255, 255, 255, calc(var(--mb) * .045)),
    calc(var(--mb) * 5.6px) 0 calc(var(--mb) * 2.2px) rgba(255, 255, 255, calc(var(--mb) * .025));
}
.hm7-notif__act {
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  color: #fff;
  opacity: 0;
  transform: translate3d(0, -50%, 0) scale(.5);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  cursor: pointer;
}
.hm7-notif__act .hms { font-size: 21px; }
/* the liquid neck that joins an emerging action to the card edge */
.hm7-notif__goo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.hm7-notif__goo .f { fill: rgba(255, 255, 255, .2); }
.hm7-notif__goo .s { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.25; }
.hm7-notif-row > .hm7-notif { z-index: 1; }
.hm7-notif-empty { opacity: 0; transform: translateY(6px); transition: opacity .35s ease .05s, transform .5s var(--hm7-ease-out) .05s; }
.hm7-notif-empty.is-shown { opacity: 1; transform: none; }
.hm7-notif__trash svg { width: 22px; height: 22px; }

/* ── App icons, folder, drag ── */
.hm7-icon {
  --glow: 255, 255, 255;
  width: var(--s, 60px);
  height: var(--s, 60px);
  border-radius: 28%;
  display: grid;
  place-items: center;
  position: relative;
  touch-action: none;
  cursor: grab;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(5, 8, 70, .6);
  will-change: transform;
  transition: box-shadow .35s ease;
}
.hm7-icon svg { width: 56%; height: 56%; pointer-events: none; }
.hm7-icon.is-dragging {
  z-index: 60;
  cursor: grabbing;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    0 0 0 1px rgba(var(--glow), .35),
    0 0 42px 12px rgba(var(--glow), .7),
    0 22px 40px -8px rgba(5, 8, 70, .65);
}
.hm7-folder {
  border-radius: 26px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  --lr: 140px;
  transition: transform .5s var(--hm7-ease-spring);
  box-shadow:
    inset 0 0 0 1.25px rgba(255, 255, 255, .48),
    inset 0 1px 14px rgba(255, 255, 255, .32),
    0 0 calc(46px * var(--li)) calc(4px * var(--li)) rgba(var(--lc), calc(.6 * var(--li))),
    0 14px 34px -10px rgba(8, 10, 90, .5);
}
.hm7-folder::after { padding: 2.5px; }
.hm7-folder::before { background: radial-gradient(calc(var(--lr) * 1.3) circle at var(--lx) var(--ly), rgba(var(--lc), calc(.6 * var(--li))), rgba(var(--lc), 0) 70%); }
.hm7-folder.is-target { transform: scale(1.07); }

/* Elastic folder: the glass is drawn by live layers that follow the gooey membrane */
.hm7-folder--elastic,
.hm7-folder--elastic.is-target {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  animation: none;
}
.hm7-folder--elastic::before,
.hm7-folder--elastic::after { content: none; }
.hm7-folder__layer {
  position: absolute;
  top: calc(var(--pad, 120px) * -1);
  left: calc(var(--pad, 120px) * -1);
  width: calc(100% + var(--pad, 120px) * 2);
  height: calc(100% + var(--pad, 120px) * 2);
  pointer-events: none;
  overflow: visible;
}
.hm7-folder__shadow { z-index: -3; }
.hm7-folder__skin {
  z-index: -2;
  background: radial-gradient(60% 60% at 50% 30%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .10));
  -webkit-backdrop-filter: blur(var(--hm7-blur)) saturate(175%);
  backdrop-filter: blur(var(--hm7-blur)) saturate(175%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hm7-folder__rim { z-index: -1; }
.hm7-folder__slot { transition: box-shadow .3s ease, transform .45s var(--hm7-ease-spring); }
.hm7-folder__slot.is-hint {
  --lc: 255, 255, 255;
  transform: scale(1.12);
  box-shadow: inset 0 0 0 1.5px rgba(var(--lc), .95), 0 0 18px 2px rgba(var(--lc), .65);
}
.hm7-folder.is-bump { animation: hm7-bump .7s var(--hm7-ease-spring); }
@keyframes hm7-bump { 0% { transform: scale(1.07); } 35% { transform: scale(.95); } 100% { transform: scale(1); } }
.hm7-folder__slot {
  width: var(--ms, 34px);
  height: var(--ms, 34px);
  border-radius: 28%;
  display: grid;
  place-items: center;
}
.hm7-folder__slot:empty { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hm7-folder__slot > .hm7-mini { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.hm7-folder__slot > .hm7-mini svg { width: 58%; height: 58%; }
.hm7-mini.is-new { animation: hm7-pop .6s var(--hm7-ease-spring); }
@keyframes hm7-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Bounce card (widget) ── */
.hm7-bcard {
  --sx: 50;
  --so: 0;
  border-radius: 26px;
  touch-action: none;
  user-select: none;
  cursor: grab;
  will-change: transform;
  background: rgba(36, 38, 72, .86);
  transition: background .45s ease, box-shadow .45s ease;
}
.hm7-bcard.hm7-glass {
  --shx: 0px; --shy: 16px;
  background: rgba(36, 38, 72, .86);
  transition: background .45s ease;
  /* cast shadow moves opposite the tilt, as if lit from above */
  box-shadow:
    inset 0 0 0 1.25px rgba(255, 255, 255, .42),
    inset 0 1px 14px rgba(255, 255, 255, .22),
    var(--shx) var(--shy) 38px -12px rgba(5, 8, 70, .6);
}
.hm7-bcard.is-lifted {
  cursor: grabbing;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1));
  box-shadow:
    inset 0 0 0 1.25px rgba(255, 255, 255, .6),
    inset 0 1px 18px rgba(255, 255, 255, .35),
    var(--shx) calc(var(--shy) + 22px) 60px -18px rgba(5, 8, 70, .7);
}
.hm7-bcard__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: var(--so);
  background: linear-gradient(112deg,
    transparent calc(var(--sx) * 1% - 28%),
    rgba(255, 255, 255, .42) calc(var(--sx) * 1% - 4%),
    rgba(255, 255, 255, .08) calc(var(--sx) * 1% + 6%),
    transparent calc(var(--sx) * 1% + 24%));
  mix-blend-mode: screen;
}

/* ── Immersive edge light, three intensities (强 / 中 / 柔) ── */
@property --hm7-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --hm7-s { syntax: "<number>"; inherits: false; initial-value: 0; }
.hm7-device {
  --g1: .9; --g2: 34px; --g3: .55;
  position: relative;
  border-radius: 38px;
  padding: 7px;
  background: #07070f;
  box-shadow:
    0 0 0 1.5px rgba(var(--hm7-ember), var(--g1)),
    0 0 calc(var(--g2) * .35) 1px rgba(var(--hm7-ember), calc(var(--g1) * .9)),
    0 0 var(--g2) 4px rgba(var(--hm7-ember), var(--g3)),
    0 0 calc(var(--g2) * 2.6) 10px rgba(var(--hm7-ember), calc(var(--g3) * .45));
  transition: box-shadow .8s var(--hm7-ease-out);
}
.hm7-device::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--hm7-a), transparent 0 70%, rgba(255, 220, 170, var(--g1)) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hm7-orbit 5s linear infinite;
}
@keyframes hm7-orbit { to { --hm7-a: 360deg; } }
.hm7-device[data-level="strong"] { --g1: 1;   --g2: 46px; --g3: .8; }
.hm7-device[data-level="medium"] { --g1: .85; --g2: 30px; --g3: .5; }
.hm7-device[data-level="soft"]   { --g1: .55; --g2: 16px; --g3: .22; }
.hm7-device[data-level="off"]    { --g1: .18; --g2: 0px;  --g3: 0; }
/* level change: two bright comets race around the frame and the halo flares */
.hm7-device::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--hm7-a), transparent 0 40%, rgba(255, 236, 200, 1) 49%, transparent 54% 90%, rgba(255, 236, 200, 1) 99%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(1px) drop-shadow(0 0 8px rgba(var(--hm7-ember), 1));
}
.hm7-device.is-surge::after { animation: hm7-surge 1.2s var(--hm7-ease-out) forwards, hm7-orbit 1.2s var(--hm7-ease-out); }
.hm7-device.is-surge { animation: hm7-flare 1.2s var(--hm7-ease-out); }
@property --g2 { syntax: "<length>"; inherits: false; initial-value: 34px; }
@property --g3 { syntax: "<number>"; inherits: false; initial-value: .55; }
@keyframes hm7-surge { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hm7-flare { 18% { --g2: 74px; --g3: 1.15; } }

/* tab glyph pop */
@property --hms-weight { syntax: "<number>"; inherits: true; initial-value: 400; }
.hm7-tabs__item.is-pop .hms { animation: hm7-pop-glyph .6s var(--hm7-ease-spring); }
@keyframes hm7-pop-glyph { 0% { transform: scale(.7); --hms-weight: 300; } 45% { transform: scale(1.22); --hms-weight: 850; } 100% { transform: scale(1); --hms-weight: 600; } }

/* ── Liquid lens tab bar ── */
.hm7-tabs {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-radius: 999px;
  padding: 5px;
  touch-action: none;
  user-select: none;
}
.hm7-tabs__item {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 7px 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.hm7-tabs__item svg { width: 20px; height: 20px; }
.hm7-tabs__item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 999px; }
.hm7-lens {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  z-index: 2;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: blur(10px) saturate(1.8) brightness(1.2);
  backdrop-filter: blur(10px) saturate(1.8) brightness(1.2);
  box-shadow:
    inset 0 0 0 1.25px rgba(255, 255, 255, .85),
    inset 0 2px 10px rgba(255, 255, 255, .7),
    inset 0 -6px 12px rgba(80, 100, 255, .25),
    0 6px 16px -4px rgba(0, 0, 40, .45);
  will-change: transform;
}
.hm7-lens__inner {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 5px;
  will-change: transform;
}
.hm7-lens__inner .hm7-tabs__item { color: var(--hm7-cobalt); }

/* ── System glass kit ── */
.hm7-btn {
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  letter-spacing: .02em;
}
.hm7-btn--primary {
  background: radial-gradient(120% 140% at 50% 0%, #5a7cff, #2b46f0 70%);
  box-shadow:
    inset 0 0 0 1.25px rgba(255, 255, 255, .6),
    inset 0 2px 10px rgba(255, 255, 255, .45),
    0 10px 24px -8px rgba(40, 60, 255, .8);
}
.hm7-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 16px;
  color: rgba(255, 255, 255, .85);
}
.hm7-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  font: inherit;
}
.hm7-search input::placeholder { color: rgba(255, 255, 255, .6); }
.hm7-search svg { width: 18px; height: 18px; flex: none; }
.hm7-chip { border: 0; border-radius: 999px; padding: 8px 16px; color: #fff; font: inherit; font-size: 13px; }
.hm7-selmenu { display: flex; border-radius: 999px; padding: 4px; }
.hm7-selmenu button {
  border: 0; background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  transition: background .25s ease;
}
.hm7-selmenu button:hover, .hm7-selmenu button:focus-visible { background: rgba(255, 255, 255, .2); outline: 0; }
.hm7-panel { border-radius: 26px; padding: 16px; }
.hm7-menu { border-radius: 22px; padding: 6px; display: grid; }
.hm7-menu button {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: none; color: #fff; font: inherit; font-size: 13px;
  padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: start;
  transition: background .2s ease;
}
.hm7-menu button:hover, .hm7-menu button:focus-visible { background: rgba(255, 255, 255, .16); outline: 0; }
.hm7-menu svg { width: 18px; height: 18px; flex: none; opacity: .9; }


/* ── HarmonyOS Symbol glyphs inside components (hm7-icons.css) ── */
.hm7-cc-btn .hms { font-size: 24px; }
/* glyphs pick up the lamp light that falls on their tile */
.hm7-glass .hms { text-shadow: 0 0 calc(14px * var(--l2i, 0)) rgba(var(--l2c, 255, 255, 255), calc(.95 * var(--l2i, 0))), 0 1px 2px rgba(0, 0, 40, .22); }
.hm7-cc-btn, .hm7-cc-pill { transition: transform .5s var(--hm7-ease-spring), background .4s ease, box-shadow .4s ease, color .3s ease; }
.hm7-cc-btn.is-pressed, .hm7-cc-pill.is-pressed { transform: scale(1.1); transition-duration: .18s; }
.hm7-cc-btn.is-flash { animation: hm7-tile-flash .7s cubic-bezier(.3, .7, .3, 1); }
.hm7-cc-pill.is-flash { animation: hm7-pill-flash .7s cubic-bezier(.3, .7, .3, 1); }
@keyframes hm7-tile-flash {
  0% { }
  30%, 48% { background: radial-gradient(circle at 50% 35%, #fff, rgba(232, 240, 255, .96) 70%);
    color: var(--hm7-cobalt);
    box-shadow: inset 0 0 0 1.5px #fff, 0 0 30px 6px rgba(var(--l2c, 210, 225, 255), .75), 0 0 60px 10px rgba(255, 255, 255, .35); }
}
@keyframes hm7-pill-flash {
  30%, 48% { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(236, 240, 255, .9)); color: var(--hm7-cobalt);
    box-shadow: inset 0 0 0 1.5px #fff, 0 0 30px 6px rgba(255, 255, 255, .45); }
}
.hm7-cc-btn.is-on { background: radial-gradient(circle at 50% 30%, #4f7dff, #2b5cf5 72%); }
.hm7-cc-btn.is-on { box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .75),
    inset 0 2px 16px rgba(255, 255, 255, .5),
    0 0 calc(26px + 26px * var(--l2i, 0)) rgba(var(--l2c, 120, 140, 255), calc(.45 + .4 * var(--l2i, 0))),
    0 14px 30px -10px rgba(8, 10, 90, .55); }
.hm7-cc-pill .hms { font-size: 22px; }
.hm7-cc-btn.is-on .hms, .hm7-cc-pill.is-on .hms { --hms-weight: 600; }
.hm7-press.is-pressed .hms { --hms-weight: 750; }
.hm7-notif__trash .hms { font-size: 22px; }
.hm7-icon .hms { font-size: calc(var(--s, 60px) * .5); }
.hm7-mini .hms { font-size: calc(var(--ms, 34px) * .56); }
.hm7-tabs__item .hms { font-size: 21px; }
.hm7-tabs__item.is-active .hms, .hm7-lens__inner .hms { --hms-weight: 600; }
.hm7-search .hms { font-size: 18px; }
.hm7-menu .hms { font-size: 18px; opacity: .92; }
.hm7-pslider__icon { display: grid; place-items: center; }
.hm7-pslider__icon { color: #16172f; }
.hm7-pslider__icon .hms { font-size: 34px; --hms-weight: 700; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .hm7-stage::before, .hm7-stage::after, .hm7-device::before { animation: none; }
  .hm7-ripple { animation-duration: .01s; }
}

/* ════════════════════════════════════════════════════════════════════
   Liquid Glass layer — the iOS 26 glass rules, rebuilt for the web.
   ════════════════════════════════════════════════════════════════════ */

/* materialise: glass gels in by light (blur, rim, shadow) instead of fading its opacity */
@keyframes hm7-materialize {
  from { -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); background-color: transparent; box-shadow: none; transform: scale(.94); }
  62% { transform: scale(1.012); }
}
@keyframes hm7-dematerialize {
  to { -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); background-color: transparent; box-shadow: none; transform: scale(.94); }
}
@keyframes hm7-mat-light { from { opacity: 0; } }
@keyframes hm7-mat-content { from { opacity: 0; transform: translateY(3px); } }
@keyframes hm7-demat-content { to { opacity: 0; } }
.hm7-materialize { animation: hm7-materialize .56s var(--hm7-ease-out) backwards; }
.hm7-materialize::before, .hm7-materialize::after { animation: hm7-mat-light .56s ease-out backwards; }
.hm7-materialize > * { animation: hm7-mat-content .4s var(--hm7-ease-out) .12s backwards; }
.hm7-dematerialize { animation: hm7-dematerialize .34s var(--hm7-ease-io) forwards; pointer-events: none; }
.hm7-dematerialize::before, .hm7-dematerialize::after, .hm7-dematerialize > * { animation: hm7-demat-content .2s ease-in forwards; }

/* cluster: one glass body; the bridges are drawn under the buttons */
.hm7-cluster { position: relative; display: flex; gap: var(--hm7-cluster-gap, 12px); align-items: center; isolation: isolate; }
.hm7-cluster[data-axis="y"] { flex-direction: column; }
.hm7-cluster__toggle { position: relative; z-index: 3; }
.hm7-cluster__item { position: relative; z-index: 2; will-change: transform; }
.hm7-cluster .hm7-cluster__item { transition-property: background, box-shadow, color !important; }   /* the engine drives transform every frame */
.hm7-cluster:not(.is-open) .hm7-cluster__item { pointer-events: none; }
.hm7-cluster__goo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.hm7-cluster__goo .f { fill: rgba(255, 255, 255, .22); }
.hm7-cluster__goo .s { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.25; }
.hm7-cluster__toggle .im { position: relative; display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; }
.hm7-cluster__toggle .im > * { position: absolute; transition: transform .48s var(--hm7-ease-spring), opacity .3s ease; }
.hm7-cluster__toggle .im > .off { opacity: 0; transform: scale(.3) rotate(-90deg); }

/* morph panel: the panel is the shell; while it springs, its content keeps the final size */
.hm7-morph { overflow: hidden; transform-origin: top left; will-change: width, height, transform; }
.hm7-morph[hidden] { display: none !important; }

/* dock: bottom bar + accessory; .is-min is the minimised shape */
.hm7-dock { position: relative; display: grid; gap: 8px; justify-items: stretch; --hm7-dock-ease: var(--hm7-ease-spring); }
.hm7-dock__acc, .hm7-dock__bar { transition: transform .55s var(--hm7-dock-ease), max-width .55s var(--hm7-dock-ease), padding .4s var(--hm7-ease-out), margin .55s var(--hm7-dock-ease); }
.hm7-dock__acc { position: relative; max-width: 100%; height: var(--hm7-acc-h, 52px); overflow: hidden; justify-self: end; width: 100%; }
.hm7-dock__acc .hm7-dock__full, .hm7-dock__acc .hm7-dock__mini { transition: opacity .25s ease, transform .45s var(--hm7-ease-out); }
.hm7-dock__acc .hm7-dock__mini { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.6); pointer-events: none; }
.hm7-dock .hm7-tabs__label, .hm7-dock .tb-it > span { display: block; max-height: 1.6em; overflow: hidden; transition: max-height .4s var(--hm7-ease-out), opacity .25s ease, margin .4s var(--hm7-ease-out); }
.hm7-dock.is-min .hm7-dock__acc { max-width: var(--hm7-acc-h, 52px); border-radius: 999px; padding: 0; }
.hm7-dock.is-min .hm7-dock__acc .hm7-dock__full { opacity: 0; transform: scale(.85); pointer-events: none; }
.hm7-dock.is-min .hm7-dock__acc .hm7-dock__mini { opacity: 1; transform: none; pointer-events: auto; }
.hm7-dock.is-min .hm7-tabs__label, .hm7-dock.is-min .tb-it > span { max-height: 0; opacity: 0; margin: 0; }
.hm7-dock.is-min .hm7-dock__bar { cursor: pointer; }

/* scroll edge: content fades as it slides under a floating bar (iOS 26 scroll-edge effect) */
@property --hm7-edge-t { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hm7-scroll-edge {
  --hm7-edge-b: 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hm7-edge-t), #000 calc(100% - var(--hm7-edge-b)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hm7-edge-t), #000 calc(100% - var(--hm7-edge-b)), transparent 100%);
}
@supports (animation-timeline: scroll()) {
  @keyframes hm7-edge-in { to { --hm7-edge-t: var(--hm7-edge-top, 28px); } }
  .hm7-scroll-edge { animation: hm7-edge-in linear both; animation-timeline: scroll(self); animation-range: 0 48px; }
}
@supports not (animation-timeline: scroll()) { .hm7-scroll-edge { --hm7-edge-t: var(--hm7-edge-top, 28px); } }

/* concentric corners: an inner surface follows its container's curve (outer radius − inset) */
.hm7-concentric { border-radius: max(var(--hm7-r-min, 6px), calc(var(--hm7-r-outer, 22px) - var(--hm7-inset, 10px))); }

/* ── accessibility: Reduce Transparency · Increase Contrast · Forced Colors ── */
:root { --hm7-solid: #2b2fd6; --hm7-solid-ink: #ffffff; --hm7-hc-line: rgba(255, 255, 255, .92); }
@media (prefers-reduced-transparency: reduce) {
  .hm7-glass, .hm7-lens, .hm7-cluster__goo .f { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .hm7-glass { background: var(--hm7-solid) !important; }
  .hm7-glass::before { display: none; }
  .hm7-cluster__goo .f { fill: var(--hm7-solid); }
  .hm7-stage::before, .hm7-stage::after { opacity: .35; }
}
:root[data-hm7-transparency="reduce"] .hm7-glass, :root[data-hm7-transparency="reduce"] .hm7-lens { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-hm7-transparency="reduce"] .hm7-glass { background: var(--hm7-solid) !important; }
:root[data-hm7-transparency="reduce"] .hm7-glass::before { display: none; }
:root[data-hm7-transparency="reduce"] .hm7-cluster__goo .f { fill: var(--hm7-solid); }
:root[data-hm7-transparency="reduce"] .hm7-stage::before, :root[data-hm7-transparency="reduce"] .hm7-stage::after { opacity: .35; }
@media (prefers-contrast: more) {
  .hm7-glass { box-shadow: inset 0 0 0 2px var(--hm7-hc-line), 0 10px 26px -10px rgba(0, 0, 0, .55) !important; }
  .hm7-glass::after { display: none; }
  .hm7-cluster__goo .s { stroke: var(--hm7-hc-line); stroke-width: 2; }
}
:root[data-hm7-contrast="more"] .hm7-glass { box-shadow: inset 0 0 0 2px var(--hm7-hc-line), 0 10px 26px -10px rgba(0, 0, 0, .55) !important; }
:root[data-hm7-contrast="more"] .hm7-glass::after { display: none; }
:root[data-hm7-contrast="more"] .hm7-cluster__goo .s { stroke: var(--hm7-hc-line); stroke-width: 2; }
@media (forced-colors: active) {
  .hm7-glass, .hm7-lens { forced-color-adjust: none; background: Canvas !important; color: CanvasText !important; border: 1px solid CanvasText; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .hm7-glass::before, .hm7-glass::after, .hm7-cluster__goo { display: none; }
  .hm7-cc-btn.is-on, .hm7-tabs__item.is-active { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .hm7-materialize, .hm7-materialize::before, .hm7-materialize::after, .hm7-materialize > *, .hm7-dematerialize, .hm7-dematerialize > * { animation-duration: .01s !important; }
  .hm7-dock__acc, .hm7-dock__bar, .hm7-dock .hm7-tabs__label { transition-duration: .01s !important; }
}

/* ── HoMoGram v1.6 interaction layer, recoloured to commerce tokens (behaviour unchanged) ── */
/* HoMoGram v1.6 components — values copied from HoMoGram DS v1.6 */
:root {
  /* spring curves (v1.6) */
  --sp: cubic-bezier(.34,1.56,.64,1);
  --sm: cubic-bezier(.22,1,.36,1);
  --st: cubic-bezier(.4,0,.2,1);
  --sk: cubic-bezier(.68,-0.55,.27,1.55);
}
.el, .el-d, .lg button, .lg-bar button { font-family: inherit; border: none; cursor: pointer; color: inherit; }
.el:focus-visible, .el-d:focus-visible, .ro:focus-visible, .sw-wrap:focus-visible, .tb-it:focus-visible { outline: 2px solid var(--ac2); outline-offset: 2px; }
.ro, .sw-wrap, .tb-it { outline: none; }
/* ════════════════════════════════════════
   LIQUID GLASS — 4 Layers
   L1: backdrop blur+sat+brightness
   L2: specular border (top edge bright)
   L3a: ::before top caustic gradient
   L3b: ::after bottom depth/tint
   RULE: NO solid background color on navbars
════════════════════════════════════════ */
.lg{
  position:relative;
  background:var(--glass-fill);
  backdrop-filter:blur(40px) saturate(260%) brightness(1.07);
  -webkit-backdrop-filter:blur(40px) saturate(260%) brightness(1.07);
  border:.5px solid rgba(255,255,255,.10);
  border-top-color:rgba(255,255,255,.30);
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.22),
    0 12px 40px rgba(0,0,0,.52),
    inset 0 1.5px 0 rgba(255,255,255,.16),
    inset 0 -.5px 0 rgba(0,0,0,.12),
    inset 0 0 60px rgba(var(--accent-rgb),.04);
  border-radius:20px;overflow:clip;
}
.lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 16%,transparent 40%),
    radial-gradient(ellipse 70% 50% at 18% 0%,rgba(255,255,255,.06) 0%,transparent 70%);
}
.lg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 40% at 50% 100%,rgba(var(--accent-rgb),.07) 0%,transparent 70%),
    linear-gradient(0deg,rgba(0,0,0,.07) 0%,transparent 32%);
}
.lg>*{position:relative;z-index:1;}
.lg.pill{border-radius:9999px;}
.lg.pill::before,.lg.pill::after{border-radius:inherit;}

/* Navbar / bar variant — transparent bg, gradient bg only */
.lg-bar{
  position:relative;
  background:transparent;
  backdrop-filter:blur(40px) saturate(260%) brightness(1.07);
  -webkit-backdrop-filter:blur(40px) saturate(260%) brightness(1.07);
  border-bottom:.5px solid rgba(255,255,255,.08);
  border-top:.5px solid rgba(255,255,255,.16);
  box-shadow:
    0 8px 32px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.10);
}
.lg-bar::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 18%,transparent 45%),
    radial-gradient(ellipse 80% 60% at 15% 0%,rgba(255,255,255,.05) 0%,transparent 70%);
}
.lg-bar::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 50% at 50% 100%,rgba(var(--accent-rgb),.08) 0%,transparent 70%),
    linear-gradient(0deg,rgba(0,0,0,.08) 0%,transparent 38%);
}
.lg-bar>*{position:relative;z-index:1;}

/* GlassReveal */
.rv{position:relative;overflow:clip;}
.gb-glow{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  opacity:0;padding:1.5px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  transition:opacity .55s var(--sm);will-change:opacity,background;
}
.gb-glow-inner{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .38s var(--sm);will-change:opacity,background;
}

/* ════ Icon Morph — slower, smoother, unique ════ */
.im{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.im .hms{
  position:absolute;
  transition:
    transform .48s var(--sk),
    opacity .36s var(--sm),
    filter .36s var(--sm);
  will-change:transform,opacity,filter;
}
.im .hms.off{
  transform:scale(.32) rotate(-24deg);
  opacity:0;
  filter:blur(3px);
  pointer-events:none;
}
.im .hms.on{
  transform:scale(1) rotate(0deg);
  opacity:1;
  filter:blur(0px);
}

/* ════ Elastic Engine — deeper press, omni ════ */
.el,.el-d{
  cursor:pointer;transform-origin:center;will-change:transform;
  transition:transform .46s var(--sp);
}
.el.pr{transition:transform .09s var(--st);}
.el.rl{transition:transform .52s var(--sp);}
.el-d.pr{transition:transform .09s var(--st);}
.el-d.rl{transition:transform .54s var(--sp);}
/* Spring icon inside dual */
.si{
  display:inline-flex;align-items:center;justify-content:center;
  will-change:transform;transition:transform .40s var(--sp);
}
.el-d.pr .si{transition:transform .07s var(--st);}
.el-d.rl .si{transition:transform .58s var(--sp);}

/* ════ Tab Indicator — slower, fluid ════ */
.tb-wrap{position:relative;}
.tb-ind{
  position:absolute;top:0;bottom:0;
  background:rgba(var(--accent-rgb),.16);border-radius:26px;
  /* slower, smoother */
  transition:left .48s var(--sm),width .48s var(--sm);
  pointer-events:none;border:.5px solid rgba(var(--accent-rgb),.22);
}
.tb-it{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 16px;border-radius:26px;cursor:pointer;
  color:var(--tx2);font-size:11px;font-weight:600;
  transition:color .36s var(--sm);position:relative;z-index:1;user-select:none;
}
.tb-it.on{color:var(--tx);}

/* ════ Page Transitions ════ */
.page{position:absolute;inset:0;display:flex;flex-direction:column;background:transparent;
  will-change:transform,opacity;overflow:hidden;}
.p-idle{transform:translateX(0) scale(1);opacity:1;transition:none;}
.p-exit{transform:scale(.92) translateY(4px);opacity:.18;
  transition:transform .42s var(--sm),opacity .38s var(--st);pointer-events:none;}
.p-off-r{transform:translateX(104%);opacity:0;transition:none;}
.p-enter{transform:translateX(0);opacity:1;
  transition:transform .42s var(--sm),opacity .32s var(--st);}
.p-return{transform:translateX(104%);opacity:0;
  transition:transform .40s var(--sm),opacity .32s var(--st);}
.p-restore{transform:translateX(0) scale(1);opacity:1;
  transition:transform .40s var(--sm),opacity .32s var(--st);}

/* ════ Radio Buttons — dual layer spring ════ */
.ro{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:14px;cursor:pointer;direction:rtl;
  border:1.5px solid rgba(var(--accent-rgb),.10);background:var(--bg4);
  /* L1: outer box spring */
  transition:
    border-color .32s var(--sm),
    background .32s var(--sm),
    transform .44s var(--sp),
    box-shadow .32s var(--sm);
  will-change:transform;
}
.ro.sel{
  border-color:rgba(var(--accent-rgb),.45);
  background:rgba(var(--accent-rgb),.08);
  box-shadow:0 4px 16px rgba(var(--accent-rgb),.14);
}
.ro-ico{
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  /* L2: icon box spring */
  transition:
    transform .44s var(--sp),
    background .32s var(--sm),
    box-shadow .32s var(--sm);
  flex-shrink:0;background:rgba(var(--accent-rgb),.10);
  will-change:transform;
}
.ro.sel .ro-ico{
  background:rgba(var(--accent-rgb),.22);
  transform:scale(1.12) rotate(-4deg);
  box-shadow:0 4px 12px rgba(var(--accent-rgb),.25);
}
.ro-chk{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(var(--accent-rgb),.28);
  display:flex;align-items:center;justify-content:center;
  margin-right:auto;flex-shrink:0;
  transition:all .38s var(--sp);
}
.ro.sel .ro-chk{background:var(--ac);border-color:var(--ac);transform:scale(1.18);}
.ro-chk .hms{transform:scale(0) rotate(-30deg);opacity:0;
  transition:transform .38s var(--sp),opacity .28s;}
.ro.sel .ro-chk .hms{transform:scale(1) rotate(0deg);opacity:1;}

/* ════ Switch Buttons — creative ════ */
.sw-wrap{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-radius:14px;background:var(--bg4);
  border:1px solid rgba(var(--accent-rgb),.10);
  direction:rtl;cursor:pointer;
  transition:background .28s var(--sm),border-color .28s var(--sm);
}
.sw-wrap.on{background:rgba(var(--accent-rgb),.07);border-color:rgba(var(--accent-rgb),.28);}
.sw-track{
  width:54px;height:30px;border-radius:15px;
  background:var(--bg5);
  position:relative;cursor:pointer;
  transition:background .32s var(--sp);
  border:.5px solid rgba(255,255,255,.06);
  flex-shrink:0;overflow:clip;
  will-change:background;
}
.sw-wrap.on .sw-track{background:var(--ac);}
/* Liquid glass knob */
.sw-knob{
  position:absolute;top:3px;right:3px;
  width:24px;height:24px;border-radius:50%;
  /* 4-layer glass knob */
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px) brightness(1.1);
  border:.5px solid rgba(255,255,255,.9);
  border-top-color:rgba(255,255,255,1);
  box-shadow:
    0 2px 8px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(0,0,0,.08);
  transition:transform .36s var(--sp),background .28s var(--sm),box-shadow .28s var(--sm);
  will-change:transform;
}
.sw-wrap.on .sw-knob{
  transform:translateX(-24px);
  background:rgba(255,255,255,.95);
  box-shadow:
    0 3px 12px rgba(var(--accent-rgb),.35),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.06);
}
/* Inner glow trail when sliding */
.sw-track::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse 60% 100% at 20% 50%,rgba(255,255,255,.12),transparent);
  opacity:0;transition:opacity .28s;pointer-events:none;
}
.sw-wrap.on .sw-track::after{opacity:1;}
/* Icon inside knob */
.sw-ico{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.sw-ico .hms{
  transition:transform .38s var(--sp),opacity .28s var(--sm),color .28s;
  position:absolute;
}
.sw-ico .hms.off-s{transform:scale(1);opacity:.4;color:#666;}
.sw-ico .hms.on-s{transform:scale(0) rotate(20deg);opacity:0;color:var(--ac);}
.sw-wrap.on .sw-ico .hms.off-s{transform:scale(0) rotate(-20deg);opacity:0;}
.sw-wrap.on .sw-ico .hms.on-s{transform:scale(1) rotate(0deg);opacity:1;}
/* Label transition */
.sw-label{font-size:13.5px;font-weight:600;flex:1;transition:color .28s var(--sm);}
.sw-wrap.on .sw-label{color:var(--tx);}

/* ════ Chat bubbles ════ */
.bm{background:linear-gradient(145deg,var(--bm-from),var(--bm-to));color:var(--tx);border-radius:20px 20px 4px 20px;
  padding:10px 14px;max-width:72%;font-size:14px;line-height:1.55;
  box-shadow:0 3px 12px rgba(var(--accent-rgb),.22);
  animation:bIn .36s var(--sk) both;transform-origin:bottom right;}
.bo{background:var(--bo);color:var(--tx);border-radius:20px 20px 20px 4px;
  padding:10px 14px;max-width:72%;font-size:14px;line-height:1.55;
  border:.5px solid rgba(var(--accent-rgb),.10);
  animation:bIn .36s var(--sk) both;transform-origin:bottom left;}
@keyframes bIn{from{opacity:0;transform:scale(.82) translateY(6px);}to{opacity:1;transform:scale(1);}}
.bt{font-size:10px;opacity:.42;direction:ltr;text-align:left;margin-top:2px;}

/* Reply bar */
.rb{display:flex;align-items:center;gap:10px;padding:7px 13px;border-radius:11px;
  margin:3px 10px;background:rgba(var(--accent-rgb),.08);border-right:3px solid var(--ac);
  direction:rtl;animation:suIn .24s var(--sm) both;}
@keyframes suIn{from{transform:translateY(8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Swipe hint */
.sw-hint{
  position:absolute;right:-38px;top:50%;transform:translateY(-50%) scale(0);
  width:30px;height:30px;border-radius:50%;
  background:rgba(var(--accent-rgb),.22);
  display:flex;align-items:center;justify-content:center;
  color:var(--ac);transition:transform .24s var(--sp);
}

/* Misc */
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;color:var(--tx);}
.badge{background:var(--ac);color:#fff;border-radius:20px;padding:0 6px;height:18px;min-width:18px;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
.sep{height:.5px;background:var(--sep);}
.dot-bg{
  background-color:var(--bg);
  background-image:radial-gradient(rgba(var(--accent-rgb),.07) 1px,transparent 1px);
  background-size:22px 22px;
}
.inp{background:transparent;border:none;color:var(--tx);font-size:15px;font-family:inherit;
  outline:none;width:100%;padding:6px 2px;direction:rtl;}
.inp::placeholder{color:var(--tx3);}
.sl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tx3);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.sl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.15),transparent);}
.tag{display:inline-flex;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.18);
  color:var(--ac2);font-size:10px;font-weight:700;padding:2px 9px;border-radius:6px;font-family:monospace;}
.pf{width:375px;height:780px;border-radius:44px;overflow:hidden;position:relative;flex-shrink:0;
  box-shadow:0 0 0 10px var(--night),0 0 0 11px var(--line),0 32px 80px rgba(0,0,0,.8),0 8px 24px rgba(var(--accent-rgb),.18);}
.mls{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 12px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.mls::-webkit-scrollbar{width:2px;}

/* ════════════════════════════════════════════════════════════════════
   HM7 Commerce — page layer
   Everything outside the immersive stage: surfaces, controls and the
   shopping components. Colours come from tokens.css only; the RGB
   triplets below are the same accents, split for rgba().
   ════════════════════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  --accent-rgb: 47, 51, 230; --ink-rgb: 20, 22, 58; --sale-rgb: 208, 16, 42; --night-rgb: 7, 7, 26;
  --hm7-sand: ink; --hm7-sand-colors: "20,22,58|47,51,230|91,95,138|208,16,42";
}
[data-theme="dark"] {
  --accent-rgb: 154, 158, 255; --ink-rgb: 232, 233, 255; --sale-rgb: 255, 111, 125; --night-rgb: 4, 4, 15;
  --hm7-sand: glow; --hm7-sand-colors: "232,233,255|154,158,255|180,183,255|255,255,255";
}
/* the immersive stage is always lit additively, whatever the page theme */
.hm7-stage { --hm7-sand: glow; --hm7-sand-colors: "255,255,255|238,242,255|226,236,255|246,238,255"; }

/* aliases so the HoMoGram v1.6 behaviours (.rv .el .im .tb-wrap .ro .sw-wrap .page) read commerce colours */
:root, [data-theme] {
  --ac: var(--accent); --ac2: var(--accent); --ac3: var(--accent-deep);
  --tx: var(--ink); --tx2: var(--muted); --tx3: var(--subtle);
  --bg2: var(--bg); --bg3: var(--surface); --bg4: var(--surface-2); --bg5: var(--chip);
  --sep: var(--line); --bo: var(--surface); --bm-from: var(--accent-deep); --bm-to: var(--accent);
  --glass: var(--glass-fill); --on-ac: var(--on-accent);
  --green: var(--success); --orange: var(--warning); --red: var(--sale); --blue: var(--accent);
  --cm-spring: cubic-bezier(.34, 1.56, .64, 1); --cm-out: cubic-bezier(.16, 1, .3, 1); --cm-std: cubic-bezier(.4, 0, .2, 1);
}

/* ── base ── */
.cm-page { background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.cm-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cm-mono { font-family: var(--font-mono); letter-spacing: .02em; direction: ltr; unicode-bidi: isolate; }
.cm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* icon morph (v1.6 .im) for HMSymbol glyphs and text */
.im > .hms, .im > span { position: absolute; transition: transform .48s var(--sk), opacity .36s var(--sm), filter .36s var(--sm); will-change: transform, opacity, filter; }
.im > .hms.off, .im > span.off { transform: scale(.32) rotate(-24deg); opacity: 0; filter: blur(3px); pointer-events: none; }
.im > .hms.on, .im > span.on { transform: none; opacity: 1; filter: blur(0); }

/* ── surfaces ── */
.cm-card { background: var(--surface); color: var(--ink); border-radius: var(--radius-20); box-shadow: var(--shadow-card); }
.cm-card--raised { box-shadow: var(--shadow-raised); }
.cm-inset { background: var(--surface-2); border-radius: var(--radius-14); }
.cm-frost {
  position: relative; color: var(--ink);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-frost);
}
.hm7-glass.cm-frost { --lc: var(--accent-rgb); --l2c: var(--accent-rgb); background: var(--glass-fill); box-shadow: var(--shadow-frost); }
.hm7-glass.cm-frost::after { opacity: .55; }
.cm-divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── buttons ── */
.cm-btn {
  --h: 48px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 22px; border: 0; border-radius: var(--radius-pill);
  font: 700 15px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  color: var(--on-accent);
  background: radial-gradient(120% 140% at 50% 0%, var(--accent-hi), var(--accent) 70%);
  box-shadow: inset 0 0 0 1.25px rgba(255, 255, 255, .42), inset 0 2px 10px rgba(255, 255, 255, .32), 0 10px 24px -10px rgba(var(--accent-rgb), .8);
  transition: box-shadow .3s var(--cm-std), filter .2s var(--cm-std), opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.cm-btn:hover { filter: brightness(1.06) saturate(1.05); box-shadow: inset 0 0 0 1.25px rgba(255, 255, 255, .5), inset 0 2px 12px rgba(255, 255, 255, .4), 0 14px 30px -10px rgba(var(--accent-rgb), .9); }
.cm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cm-btn .hms { font-size: 19px; }
.cm-btn--ghost { color: var(--ink); background: var(--chip); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .08); }
.cm-btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22); filter: none; }
.cm-btn--line { color: var(--accent); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .45); }
.cm-btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--accent); filter: none; }
.cm-btn--sale { background: radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, .18), transparent 60%), var(--sale); color: #fff; box-shadow: inset 0 0 0 1.25px rgba(255, 255, 255, .38), 0 10px 24px -10px rgba(var(--sale-rgb), .85); }
[data-theme="dark"] .cm-btn--sale { color: var(--night); }
.cm-btn--sm { --h: 36px; padding: 0 14px; font-size: 13px; }
.cm-btn--lg { --h: 56px; padding: 0 28px; font-size: 16px; }
.cm-btn--block { display: flex; width: 100%; }
.cm-btn--icon { width: var(--h); padding: 0; }
.cm-btn:disabled, .cm-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.cm-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.cm-btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: var(--on-accent) var(--on-accent) transparent transparent;
  animation: cm-spin .7s linear infinite;
}
.cm-btn--ghost[aria-busy="true"]::after { border-color: var(--ink) var(--ink) transparent transparent; }
@keyframes cm-spin { to { transform: rotate(1turn); } }

/* ── text field ── */
.cm-field { display: grid; gap: 6px; }
.cm-field > label, .cm-field__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.cm-input {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--radius-14);
  border: 1.5px solid transparent; background: var(--surface-2); color: var(--ink);
  font: 400 15px/1.4 var(--font-sans); outline: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: border-color .2s var(--cm-std), box-shadow .35s var(--cm-out), background .2s;
}
.cm-input::placeholder { color: var(--subtle); }
.cm-input:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3); }
.cm-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.cm-field__help { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.cm-field.is-error .cm-input { border-color: var(--sale); box-shadow: 0 0 0 4px rgba(var(--sale-rgb), .12); }
.cm-field.is-error .cm-field__help { color: var(--sale); }
.cm-field.is-error.is-shake .cm-input { animation: cm-shake .42s var(--cm-std); }
.cm-field.is-ok .cm-input { border-color: var(--success); }
@keyframes cm-shake { 15% { transform: translateX(7px); } 35% { transform: translateX(-6px); } 55% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.cm-input--ltr { direction: ltr; text-align: left; }

/* ── search (page) ── */
.cm-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: var(--radius-pill); color: var(--muted); }
.cm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 400 15px var(--font-sans); }
.cm-search input::placeholder { color: var(--subtle); }
.cm-search .hms { font-size: 19px; }
.cm-search:focus-within { box-shadow: var(--shadow-frost), 0 0 0 4px rgba(var(--accent-rgb), .16); }

/* ── menu (page) ── */
.cm-menu { display: grid; padding: 6px; border-radius: var(--radius-20); background: var(--surface); box-shadow: var(--shadow-raised); }
.cm-menu > button, .cm-menu > a, .cm-menu > .hm7-morph__content > button {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: var(--radius-14);
  background: none; color: var(--ink); font: 400 14px var(--font-sans); text-align: start; text-decoration: none; cursor: pointer;
  transition: background .2s var(--cm-std);
}
.cm-menu > button:hover, .cm-menu > button:focus-visible, .cm-menu > a:hover, .cm-menu .hm7-morph__content > button:hover, .cm-menu .hm7-morph__content > button:focus-visible, .cm-menu [aria-selected="true"] { background: var(--chip); outline: 0; }
.cm-menu > .hm7-morph__content { display: grid; }
.cm-menu .hms { font-size: 18px; color: var(--muted); }
.cm-menu mark { background: none; color: var(--accent); font-weight: 700; }
.cm-menu__label { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.cm-menu.is-open { animation: cm-pop-in .42s var(--cm-out) both; transform-origin: top center; }
@keyframes cm-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

/* ── chips ── */
.cm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 0; border-radius: var(--radius-pill); background: var(--chip); color: var(--ink);
  font: 600 13px var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background .3s var(--cm-std), color .3s var(--cm-std), box-shadow .3s var(--cm-std);
}
.cm-chip .cm-chip__check { width: 0; overflow: hidden; display: inline-grid; place-items: center; transition: width .4s var(--cm-spring); }
.cm-chip .cm-chip__check .hms { font-size: 14px; transform: scale(0) rotate(-30deg); transition: transform .45s var(--cm-spring); }
.cm-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb), .9); }
.cm-chip[aria-pressed="true"] .cm-chip__check { width: 16px; }
.cm-chip[aria-pressed="true"] .cm-chip__check .hms { transform: none; }
.cm-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-chip__count { font-size: 11px; opacity: .7; font-weight: 600; }

/* ── badges ── */
.cm-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font: 700 11px/1 var(--font-sans); white-space: nowrap; }
.cm-badge--sale { background: var(--sale-soft); color: var(--sale); }
.cm-badge--new { background: var(--accent-soft); color: var(--accent); }
.cm-badge--ok { background: var(--success-soft); color: var(--success); }
.cm-badge--warn { background: var(--warning-soft); color: var(--warning); }
.cm-badge--solid { background: var(--sale); color: #fff; }
[data-theme="dark"] .cm-badge--solid { color: var(--night); }
.cm-badge .hms { font-size: 12px; }
.cm-count {
  position: absolute; top: -4px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center; background: var(--sale); color: #fff; font: 800 10px/1 var(--font-sans);
  box-shadow: 0 0 0 2px var(--surface);
}
[data-theme="dark"] .cm-count { color: var(--night); }
.cm-count:empty, .cm-count[data-n="0"] { transform: scale(0); }
.cm-count { transition: transform .45s var(--cm-spring); }

/* ── price ── */
.cm-price { display: grid; gap: 2px; justify-items: start; color: var(--ink); }
.cm-price__was { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cm-price__was s { text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
.cm-price__now { display: inline-flex; align-items: baseline; gap: 4px; }
.cm-price__now b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-price__now small { font-size: 11px; font-weight: 500; color: var(--muted); }
.cm-price--lg .cm-price__now b { font-size: 26px; font-weight: 900; }
.cm-price--sale .cm-price__now b { color: var(--sale); }
.hm7-stage .cm-price, .hm7-stage .cm-price__was, .hm7-stage .cm-price__now small { color: rgba(255, 255, 255, .86); }
.hm7-stage .cm-price__now b { color: #fff; }

/* ── rating ── */
.cm-rating { --r: 4; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cm-stars { position: relative; display: inline-flex; color: var(--line); font-size: 14px; letter-spacing: 1px; }
.cm-stars__fill { position: absolute; inset-block: 0; inset-inline-start: 0; display: inline-flex; overflow: hidden; color: var(--rating); width: calc(var(--r) / 5 * 100%); white-space: nowrap; }
.cm-stars .hms { width: 1.05em; }

/* ── product card ── */
.cm-product {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 10px 10px 12px;
  background: var(--surface); border-radius: var(--radius-22); box-shadow: var(--shadow-card); color: var(--ink);
  transition: transform .55s var(--cm-spring), box-shadow .45s var(--cm-out);
  isolation: isolate;
}
.cm-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.cm-product__media {
  --tint: var(--accent-rgb);
  position: relative; aspect-ratio: 1 / 1; border-radius: calc(var(--radius-22) - 10px); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 38%, rgba(var(--tint), .22), rgba(var(--tint), .06) 70%), var(--surface-2);
}
.cm-product__media img { width: 100%; height: 100%; object-fit: cover; }
.cm-product__art { font-size: 64px; color: rgba(var(--tint), .9); transition: transform .7s var(--cm-spring); filter: drop-shadow(0 12px 14px rgba(var(--tint), .35)); }
.cm-product:hover .cm-product__art { transform: scale(1.07) rotate(-3deg); }
.cm-product__badges { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; z-index: 2; }
.cm-product__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-product__meta { display: grid; gap: 4px; align-content: start; }
.cm-product__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cm-product.is-out .cm-product__media { filter: grayscale(.85); opacity: .7; }

/* placeholder glyphs keep their product colour but lift it off dark surfaces */
[data-theme="dark"] .cm-product__art, [data-theme="dark"] .cm-line__thumb, [data-theme="dark"] .cm-toast__media { color: color-mix(in srgb, rgb(var(--tint)) 55%, #fff); }

/* favourite (heart) */
.cm-fav {
  position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: grid; place-items: center; color: var(--ink); cursor: pointer;
  background: var(--glass-fill); -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 6px 14px -8px rgba(var(--ink-rgb), .45);
}
.cm-fav .im { font-size: 19px; width: 20px; height: 20px; }
.cm-fav[aria-pressed="true"] { color: var(--sale); }
.cm-fav::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--sale-rgb), .65); opacity: 0; transform: scale(.6); pointer-events: none; }
.cm-fav.is-burst::after { animation: cm-ring .6s var(--cm-out); }
@keyframes cm-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.75); } }
.cm-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--sale); pointer-events: none; z-index: 3; }

/* add-to-cart button */
.cm-add { --h: 40px; min-width: 40px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 13px; }
.cm-add .im { font-size: 18px; width: 19px; height: 19px; }
.cm-add__label { display: inline-grid; }
.cm-add__label > span { grid-area: 1 / 1; transition: opacity .3s var(--cm-std), transform .45s var(--cm-spring); }
.cm-add__label > span:last-child { opacity: 0; transform: translateY(60%); }
.cm-add.is-added { background: var(--success); color: var(--surface); box-shadow: inset 0 0 0 1.25px rgba(255, 255, 255, .4), 0 10px 22px -12px var(--success); }
.cm-add.is-added .cm-add__label > span:first-child { opacity: 0; transform: translateY(-60%); }
.cm-add.is-added .cm-add__label > span:last-child { opacity: 1; transform: none; }

/* ── fly-to-cart ghost + target bump ── */
.cm-fly { position: fixed; z-index: 9999; pointer-events: none; margin: 0; border-radius: var(--radius-16); overflow: hidden; will-change: transform, opacity; box-shadow: 0 18px 40px -12px rgba(var(--ink-rgb), .45); }
.cm-bump { animation: cm-bump .62s var(--cm-spring); }
@keyframes cm-bump { 0% { transform: scale(1); } 22% { transform: scale(1.28) rotate(-6deg); } 48% { transform: scale(.9) rotate(3deg); } 72% { transform: scale(1.06); } 100% { transform: none; } }
.cm-cartbtn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--ink); background: var(--chip); cursor: pointer; }
.cm-cartbtn .hms { font-size: 21px; }
.cm-cartbtn.is-glow { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); animation: cm-halo .9s var(--cm-out); }
@keyframes cm-halo { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 100% { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0); } }

/* ── digit roll ── */
.cm-roll { display: inline-flex; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.cm-roll__c { display: inline-grid; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.cm-roll__c > span { grid-area: 1 / 1; }

/* ── quantity stepper ── */
.cm-qty { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cm-qty__b { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: none; color: var(--accent); cursor: pointer; transition: background .2s var(--cm-std), color .2s; }
.cm-qty__b:hover { background: var(--chip); }
.cm-qty__b:disabled, .cm-qty__b[aria-disabled="true"] { color: var(--subtle); cursor: not-allowed; background: none; }
.cm-qty__b .hms, .cm-qty__b .im { font-size: 17px; }
.cm-qty__b .im { width: 18px; height: 18px; }
.cm-qty__b.is-remove { color: var(--sale); }
.cm-qty__v { min-width: 28px; text-align: center; font: 800 15px/1 var(--font-sans); color: var(--ink); display: inline-flex; justify-content: center; }
.cm-qty.is-max .cm-qty__v { animation: cm-shake .38s var(--cm-std); }
.cm-qty__note { font-size: 11px; color: var(--warning); }

/* ── stock / reservation meter ── */
.cm-meter { --p: .5; position: relative; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.cm-meter > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--p) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--sale), rgba(var(--sale-rgb), .75)); transition: width .9s var(--cm-out); }
.cm-meter > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); background-size: 200% 100%; animation: cm-sheen 1.6s linear infinite; }
.hm7-stage .cm-meter { background: rgba(255, 255, 255, .2); }
.hm7-stage .cm-meter > i { background: linear-gradient(90deg, #fff, #ffd2da); }
@keyframes cm-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.cm-meter__row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }

/* ── countdown ── */
.cm-timer { display: inline-flex; align-items: center; gap: 6px; direction: ltr; unicode-bidi: isolate; }
.cm-timer__u { display: grid; justify-items: center; gap: 3px; }
.cm-timer__d { min-width: 44px; height: 46px; padding: 0 6px; border-radius: var(--radius-12); display: flex; align-items: center; justify-content: center; font: 900 22px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.cm-timer__l { font-size: 10px; opacity: .8; direction: rtl; }
.cm-timer__sep { font: 900 20px/1 var(--font-sans); opacity: .6; margin-top: -16px; animation: cm-blink 1s steps(2, jump-none) infinite; }
.cm-timer__d { background: var(--ink); color: var(--surface); }
.hm7-stage .cm-timer__d { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1.25px rgba(255, 255, 255, .5), inset 0 1px 10px rgba(255, 255, 255, .3); }
.cm-timer.is-last .cm-timer__d { color: #fff; background: var(--sale); box-shadow: 0 0 22px -2px rgba(var(--sale-rgb), .8); }
.cm-timer.is-over { opacity: .5; }
@keyframes cm-blink { 50% { opacity: .15; } }

/* flash deal frame: the device edge-glow in sale colour */
.cm-flash.hm7-device { --hm7-ember: var(--sale-rgb); border-radius: var(--radius-26); padding: 0; background: transparent; }
.cm-flash > .hm7-stage { border-radius: inherit; }
.cm-flash__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cm-flash__title { margin: 0; font-size: 20px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.cm-flash__title .hms { font-size: 22px; }

/* ── cart lines (swipe rows on the page) ── */
.cm-list { position: relative; display: grid; gap: 10px; }
.cm-list .hm7-notif-row { position: relative; }
.cm-line.hm7-notif { background: var(--surface); color: var(--ink); border-radius: var(--radius-20); box-shadow: var(--shadow-card); padding: 12px; }
.cm-line .hm7-notif__body { align-items: stretch; }
.cm-line .hm7-notif__body > * { text-shadow:
    calc(var(--mb) * 1.6px) 0 calc(var(--mb) * .8px) rgba(var(--ink-rgb), calc(var(--mb) * .05)),
    calc(var(--mb) * 3.4px) 0 calc(var(--mb) * 1.4px) rgba(var(--ink-rgb), calc(var(--mb) * .03)); }
.cm-line__thumb { --tint: var(--accent-rgb); width: 76px; height: 76px; flex: none; border-radius: calc(var(--radius-20) - 12px); display: grid; place-items: center; font-size: 36px; color: rgba(var(--tint), .9); background: radial-gradient(70% 70% at 50% 40%, rgba(var(--tint), .22), rgba(var(--tint), .06) 70%), var(--surface-2); }
.cm-line__main { flex: 1; min-width: 0; display: grid; gap: 6px; align-content: space-between; }
.cm-line__title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-line__var { font-size: 12px; color: var(--muted); }
.cm-line__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cm-list .hm7-notif__act { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px -10px rgba(var(--ink-rgb), .4); }
.cm-list .hm7-notif__act[data-act="trash"] { color: var(--sale); }
.cm-list .hm7-notif__act::before, .cm-list .hm7-notif__act::after { display: none; }
.cm-list .hm7-notif__goo .f { fill: var(--surface); }
.cm-list .hm7-notif__goo .s { stroke: var(--line); }
.cm-summary { display: grid; gap: 10px; padding: 16px; }
.cm-summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); }
.cm-summary__row b { color: var(--ink); font-weight: 700; }
.cm-summary__row--total { font-size: 16px; color: var(--ink); font-weight: 700; }
.cm-summary__row--total b { font-size: 20px; font-weight: 900; }
.cm-summary__row--save b { color: var(--sale); }

/* ── toast ── */
.cm-toasts { position: relative; display: grid; gap: 10px; }
.cm-toast { animation: cm-toast-in .6s var(--cm-spring) both; }
@keyframes cm-toast-in { from { transform: translateY(-18px) scale(.96); } }
.cm-toast .hm7-notif { color: var(--ink); background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-frost); border-radius: var(--radius-20); padding: 10px 12px; }
.cm-toast__media { --tint: var(--accent-rgb); width: 44px; height: 44px; border-radius: calc(var(--radius-20) - 10px); flex: none; display: grid; place-items: center; font-size: 22px; color: rgba(var(--tint), 1); background: rgba(var(--tint), .14); }
.cm-toast__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cm-toast__txt b { font-size: 14px; }
.cm-toast__txt span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-toast__go { border: 0; background: none; color: var(--accent); font: 700 13px var(--font-sans); padding: 8px; border-radius: var(--radius-12); cursor: pointer; white-space: nowrap; }
.cm-toast__go:hover { background: var(--accent-soft); }
.cm-toast__bar { position: absolute; inset-inline: 18px; bottom: 4px; height: 2px; border-radius: 1px; background: rgba(var(--accent-rgb), .35); transform-origin: right; animation: cm-life var(--life, 4s) linear forwards; }
.cm-toast:hover .cm-toast__bar, .cm-toast:focus-within .cm-toast__bar { animation-play-state: paused; }
@keyframes cm-life { to { transform: scaleX(0); } }
.cm-toast .hm7-notif__act { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.cm-toast .hm7-notif__act::before, .cm-toast .hm7-notif__act::after { display: none; }
.cm-toast .hm7-notif__goo .f { fill: var(--surface); } .cm-toast .hm7-notif__goo .s { stroke: var(--line); }

/* ── checkout steps ── */
.cm-steps { --p: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.cm-steps::before, .cm-steps::after { content: ""; position: absolute; top: 17px; height: 3px; border-radius: 2px; inset-inline-start: calc(50% / var(--n, 4)); }
.cm-steps::before { inset-inline-end: calc(50% / var(--n, 4)); background: var(--chip); }
.cm-steps::after { width: calc((100% - 100% / var(--n, 4)) * var(--p)); background: linear-gradient(90deg, var(--accent-hi), var(--accent)); transition: width .8s var(--cm-out); box-shadow: 0 0 12px rgba(var(--accent-rgb), .5); }
.cm-steps > li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--muted); text-align: center; }
.cm-steps__dot { width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--muted); font: 800 14px/1 var(--font-sans);
  box-shadow: inset 0 0 0 2px var(--chip); transition: background .4s var(--cm-std), color .3s, box-shadow .4s, transform .5s var(--cm-spring); }
.cm-steps__dot .im { width: 18px; height: 18px; font-size: 16px; }
.cm-steps > li.is-current { color: var(--ink); font-weight: 700; }
.cm-steps > li.is-current .cm-steps__dot { color: var(--accent); box-shadow: inset 0 0 0 2.5px var(--accent), 0 0 0 6px rgba(var(--accent-rgb), .14); transform: scale(1.08); }
.cm-steps > li.is-done .cm-steps__dot { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb), .9); }

/* ── skeleton ── */
.cm-skel { position: relative; overflow: hidden; background: var(--chip); border-radius: var(--radius-12); }
.cm-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(100%);
  background: linear-gradient(-90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: cm-skel 1.4s var(--cm-std) infinite; }
[data-theme="dark"] .cm-skel::after { background: linear-gradient(-90deg, transparent, rgba(154, 158, 255, .12), transparent); }
@keyframes cm-skel { to { transform: translateX(-100%); } }
.cm-skel--line { height: 12px; border-radius: 6px; }
.cm-skel--media { aspect-ratio: 1 / 1; border-radius: var(--radius-16); }
.is-loaded { animation: cm-fade-up .5s var(--cm-out) both; }
@keyframes cm-fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ── empty state ── */
.cm-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px 20px; }
.cm-empty__art { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 44px; color: var(--accent);
  background: radial-gradient(circle at 50% 35%, var(--surface), var(--accent-soft) 70%); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .12), 0 18px 40px -18px rgba(var(--accent-rgb), .55); }
.cm-empty__art::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px dashed rgba(var(--accent-rgb), .25); animation: cm-spin 24s linear infinite; }
.cm-empty h3 { margin: 6px 0 0; font-size: 17px; font-weight: 800; }
.cm-empty p { margin: 0; max-width: 300px; font-size: 13px; line-height: 1.8; color: var(--muted); }

/* ── page header / bottom bar on the page ── */
.cm-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-22); }
.cm-header__brand { font-weight: 900; font-size: 18px; letter-spacing: -.2px; }
.cm-bottom.hm7-tabs { color: var(--muted); }
.cm-bottom .hm7-tabs__item { color: var(--muted); }
.cm-bottom .hm7-tabs__item:focus-visible { outline-color: var(--accent); }
.cm-bottom .hm7-lens { background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .07)); box-shadow: inset 0 0 0 1.25px rgba(var(--accent-rgb), .3), inset 0 2px 8px rgba(255, 255, 255, .5), 0 6px 14px -6px rgba(var(--accent-rgb), .45); }
.cm-bottom .hm7-lens__inner .hm7-tabs__item { color: var(--accent); }
.cm-bottom .hm7-tabs__item .cm-count { top: 2px; inset-inline-end: calc(50% - 22px); }

/* ── sheet ── */
.cm-sheet { border-radius: var(--radius-26) var(--radius-26) 0 0; padding: 10px 16px 18px; background: var(--surface); box-shadow: var(--shadow-raised); }
.cm-sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.cm-scrim { position: absolute; inset: 0; background: var(--scrim); }

/* ── tabs indicator (v1.6 .tb-wrap) on the page ── */
.cm-tabs.tb-wrap { display: flex; padding: 5px; border-radius: var(--radius-pill); background: var(--chip); }
.cm-tabs .tb-it { flex: 1; color: var(--muted); }
.cm-tabs .tb-it.on { color: var(--ink); }
.cm-tabs .tb-ind { background: var(--surface); border: 0; box-shadow: 0 4px 14px -6px rgba(var(--ink-rgb), .35), inset 0 0 0 1px rgba(var(--accent-rgb), .1); }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cm-product, .cm-product__art, .cm-chip .cm-chip__check, .cm-chip .cm-chip__check .hms, .cm-steps::after, .cm-meter > i { transition: none; }
  .cm-skel::after, .cm-meter > i::after, .cm-empty__art::after, .cm-timer__sep, .cm-toast, .cm-bump, .cm-fav.is-burst::after, .cm-menu.is-open { animation: none; }
  .cm-product:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Liquid Glass rules on the page
   ════════════════════════════════════════════════════════════════════ */
/* clusters and bridges on page glass */
.cm-frost.hm7-cluster__item, .cm-frost.hm7-cluster__toggle { color: var(--ink); }
.cm-cluster .hm7-cluster__goo .f { fill: var(--glass-fill); }
.cm-cluster .hm7-cluster__goo .s { stroke: rgba(255, 255, 255, .8); }
[data-theme="dark"] .cm-cluster .hm7-cluster__goo .s { stroke: rgba(154, 158, 255, .35); }
.cm-icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; font-size: 19px; padding: 0; }
.cm-icon-btn.is-prominent { background: radial-gradient(120% 140% at 50% 0%, var(--accent-hi), var(--accent) 70%); color: var(--on-accent); box-shadow: inset 0 0 0 1.25px rgba(255, 255, 255, .42), 0 10px 22px -10px rgba(var(--accent-rgb), .8); }

/* morph menus keep the page menu look */
.cm-menu.hm7-morph { position: absolute; z-index: var(--z-sheet, 60); min-width: 220px; }

/* dock on the page: frost bar + mini-cart accessory */
.cm-dock { position: absolute; inset-inline: 12px; bottom: 12px; z-index: var(--z-header, 40); }
.cm-dock .hm7-dock__acc { position: relative; border-radius: var(--radius-22); padding: 8px 8px 8px 14px; }
.cm-dock .hm7-dock__full { display: flex; align-items: center; gap: 10px; }
.cm-dock .hm7-dock__full .cm-btn { margin-inline-start: auto; }
.cm-dock .hm7-tabs__label { font-size: 10px; }
.cm-dock.is-min .hm7-dock__bar { padding-block: 2px; }
.cm-dock .hm7-dock__mini .cm-count { top: 0; inset-inline-end: 0; }

/* ── accessibility modes on page surfaces ── */
:root { --hm7-solid: #2b2fd6; }
@media (prefers-reduced-transparency: reduce) {
  .cm-frost, .cm-fav, .cm-toast .hm7-notif { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px -14px rgba(var(--ink-rgb), .35) !important; }
  .cm-cluster .hm7-cluster__goo .f { fill: var(--surface); }
}
:root[data-hm7-transparency="reduce"] .cm-frost, :root[data-hm7-transparency="reduce"] .cm-fav, :root[data-hm7-transparency="reduce"] .cm-toast .hm7-notif { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px -14px rgba(var(--ink-rgb), .35) !important; }
:root[data-hm7-transparency="reduce"] .cm-cluster .hm7-cluster__goo .f { fill: var(--surface); }
@media (prefers-contrast: more) {
  :root, [data-theme="light"] { --muted: #3a3e6b; --subtle: #5b5f8a; --line: #8c91bd; }
  [data-theme="dark"] { --muted: #c9ccf3; --subtle: #9a9ecd; --line: #5a5e94; }
  .cm-card, .cm-frost, .cm-product, .cm-line.hm7-notif, .cm-menu { box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
  .cm-chip, .cm-btn--ghost { box-shadow: inset 0 0 0 1.5px var(--ink); }
}
:root[data-hm7-contrast="more"], :root[data-hm7-contrast="more"][data-theme="light"] { --muted: #3a3e6b; --subtle: #5b5f8a; --line: #8c91bd; }
:root[data-hm7-contrast="more"][data-theme="dark"] { --muted: #c9ccf3; --subtle: #9a9ecd; --line: #5a5e94; }
:root[data-hm7-contrast="more"] .cm-card, :root[data-hm7-contrast="more"] .cm-frost, :root[data-hm7-contrast="more"] .cm-product, :root[data-hm7-contrast="more"] .cm-line.hm7-notif, :root[data-hm7-contrast="more"] .cm-menu { box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
:root[data-hm7-contrast="more"] .cm-chip, :root[data-hm7-contrast="more"] .cm-btn--ghost { box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (forced-colors: active) {
  .cm-card, .cm-frost, .cm-product, .cm-menu, .cm-line.hm7-notif { border: 1px solid CanvasText; }
  .cm-btn, .cm-chip { border: 1px solid ButtonText; }
  .cm-chip[aria-pressed="true"], .cm-fav[aria-pressed="true"] { outline: 2px solid Highlight; }
}