/* Animated product clips on the landing page: hero "scan → bill → paid" loop and the two phone mockups.
   Timelines are driven by static/js/anim.js (state classes + data-f fields); everything here is CSS. */

/* ---------- hero clip ---------- */
.hc-win { position: relative; }
.hc-win .win-bar { position: relative; }
.hc-live { margin-left: auto !important; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 10.5px; letter-spacing: .08em; color: #b91c1c; padding: 3px 9px; border-radius: 999px; background: #fef2f2; }
.hc-live b { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: hc-blink 1.2s infinite; }
@keyframes hc-blink { 50% { opacity: .25; } }

.hc-body { display: grid; grid-template-columns: 1.08fr 1fr; gap: 14px; padding: 16px; background: #fbfbf9; }
.hc-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* camera viewfinder */
.hc-cam { position: relative; overflow: hidden; border-radius: 16px; padding: 18px; background: radial-gradient(120% 90% at 50% 20%, #34403a, #0f1512 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.hc-meter { position: relative; border-radius: 12px; padding: 16px 12px 12px; text-align: center; background: linear-gradient(165deg, #eef1ec, #c9d0c6 70%, #b9c1b6); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.8); transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .6s; }
.hc.s-shoot .hc-meter { transform: scale(1.06); filter: blur(1.2px); }
.hc-screws i { position: absolute; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8b958d); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.hc-screws i:first-child { left: 8px; } .hc-screws i:last-child { right: 8px; }
.hc-label { position: absolute; top: 9px; left: 50%; transform: translateX(-50%) rotate(-2deg); padding: 1px 8px; border-radius: 3px; background: #fff7d6; border: 1px solid #e8d48a; font-size: 10px; font-weight: 700; color: #6b5200; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.hc-brand { margin-top: 14px; font-size: 9px; letter-spacing: .1em; color: #4b564f; }
.hc-drums { display: inline-flex; gap: 3px; margin-top: 8px; padding: 6px; border-radius: 7px; background: #0f1311; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.hc-drums > span { position: relative; width: 26px; height: 36px; overflow: hidden; border-radius: 3px; background: linear-gradient(#26302a, #0c0f0d 48%, #1c231f 52%, #0b0d0c); transition: opacity .4s, filter .4s; }
.hc-drums > span.red { background: linear-gradient(#a3221b, #6b1410 48%, #87201a 52%, #5e0f0b); }
.hc-drums > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), transparent 30%, transparent 70%, rgba(0,0,0,.55)); pointer-events: none; }
.hc-drums i { display: block; font-style: normal; transform: translateY(0); }
.hc-drums em { display: grid; place-items: center; height: 36px; font-style: normal; font-size: 22px; font-weight: 600; color: #f2f5f0; }
.hc.s-lock .hc-drums > span.red { opacity: .35; filter: grayscale(.6); }
.hc-unit { margin-top: 6px; font-size: 9.5px; color: #4b564f; display: inline-flex; align-items: center; gap: 6px; }
.hc-led { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 6px #ef4444; animation: hc-blink .9s infinite; }
.hc-meta { font-size: 8.5px; color: #66716a; margin-top: 4px; }

.hc-hud { position: absolute; inset: 10px; pointer-events: none; }
.hc-c { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.85); transition: all .7s cubic-bezier(.2,.8,.2,1); }
.hc-c.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.hc-c.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.hc-c.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.hc-c.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.hc.s-shoot .hc-c.tl { top: 14px; left: 14px; } .hc.s-shoot .hc-c.tr { top: 14px; right: 14px; }
.hc.s-shoot .hc-c.bl { bottom: 14px; left: 14px; } .hc.s-shoot .hc-c.br { bottom: 14px; right: 14px; }
.hc-rec, .hc-iso { position: absolute; top: -4px; font-size: 9px; color: rgba(255,255,255,.8); letter-spacing: .06em; display: inline-flex; align-items: center; gap: 5px; }
.hc-rec { left: 24px; } .hc-iso { right: 24px; }
.hc-rec b { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: hc-blink 1s infinite; }
.hc-rec em { font-style: normal; }
.hc-box { position: absolute; left: 50%; top: 55%; width: 176px; height: 50px; transform: translate(-50%, -50%) scale(1.3); border: 2px solid var(--amber); border-radius: 8px; box-shadow: 0 0 0 4px rgba(242,166,42,.2), 0 0 24px rgba(242,166,42,.35); opacity: 0; transition: all .45s cubic-bezier(.2,.8,.2,1); }
.hc-box em { position: absolute; left: -2px; top: -22px; padding: 2px 7px; border-radius: 5px 5px 5px 0; background: var(--amber); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; }
.hc.s-lock .hc-box { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hc-red { position: absolute; right: 18%; top: 78%; padding: 2px 6px; border-radius: 4px; background: #fee2e2; color: #b91c1c; font-size: 9px; font-weight: 700; opacity: 0; transform: translateY(6px); transition: all .4s .25s; }
.hc.s-lock .hc-red { opacity: 1; transform: none; }
.hc-scan { position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(180deg, transparent, rgba(242,166,42,.28) 70%, rgba(255,196,90,.95) 72%, transparent 76%); opacity: 0; pointer-events: none; }
.hc.s-read .hc-scan { opacity: 1; animation: hc-scan 1.6s ease-in-out infinite; }
@keyframes hc-scan { 0% { transform: translateY(-60px); } 50% { transform: translateY(200px); } 100% { transform: translateY(-60px); } }
.hc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.hc.s-flash .hc-flash { animation: hc-flash .5s ease-out; }
@keyframes hc-flash { 0% { opacity: .9; } 100% { opacity: 0; } }

/* step log */
.hc-log { list-style: none; margin: 0; padding: 4px 2px; display: grid; gap: 7px; }
.hc-log li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); opacity: .45; transition: opacity .35s, color .35s; }
.hc-log li b { color: var(--ink); }
.hc-log li i { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: all .3s; }
.hc-log li.run { opacity: 1; color: var(--ink); }
.hc-log li.run i { border-color: var(--amber); border-right-color: transparent; animation: hc-spin .7s linear infinite; }
.hc-log li.done { opacity: 1; color: var(--ink); }
.hc-log li.done i { background: var(--green); border-color: var(--green); }
.hc-log li.done i::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes hc-spin { to { transform: rotate(360deg); } }

/* result side */
.hc-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hc-res-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hc-pill { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--muted); transition: all .3s; white-space: nowrap; }
.hc.s-done .hc-pill { background: #e8f5ec; color: var(--ok, #15803d); }
.hc-res .hv-row b { transition: opacity .3s; }
.hc-conf { height: 5px; border-radius: 9px; background: var(--bg-2); overflow: hidden; margin: 2px 0 4px; }
.hc-conf i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-2), #4ade80); border-radius: 9px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.hc-alert { max-height: 0; overflow: hidden; opacity: 0; transition: all .45s cubic-bezier(.2,.8,.2,1); }
.hc-alert span { display: block; margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: var(--amber-soft); color: #9a5b00; font-size: 12px; }
.hc-alert.ok span { background: #e8f5ec; color: #166534; }
.hc.s-alert .hc-alert { max-height: 80px; opacity: 1; }
.hc-sentbar { transition: width .8s cubic-bezier(.2,.8,.2,1); }
.hc-sign { transition: color .3s; color: var(--muted) !important; }
.hc.s-signed .hc-sign { color: var(--ok, #15803d) !important; animation: hc-pop .45s; }
@keyframes hc-pop { 40% { transform: scale(1.25); } }

/* clip timeline */
.hc-tl { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px 16px 14px; background: #fbfbf9; border-top: 1px solid var(--line); }
.hc-tl span { display: grid; gap: 5px; font-size: 9.5px; color: var(--muted); letter-spacing: .04em; }
.hc-tl i { position: relative; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hc-tl span.on { color: var(--ink); }

/* floating toasts */
.hc-notif { position: absolute; right: 22px; top: -30px; display: flex; gap: 10px; align-items: center; width: 250px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -14px rgba(14,23,18,.35); border: 1px solid var(--line); opacity: 0; transform: translateY(-14px) scale(.96); transition: all .5s cubic-bezier(.2,.8,.2,1); z-index: 2; }
.hc-notif b { display: block; font-size: 12.5px; }
.hc-notif small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.hc.s-notif .hc-notif { opacity: 1; transform: none; }
.zl { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #0068ff; color: #fff; font-size: 10px; font-weight: 800; }
.hc .hc-toast { animation: none; opacity: 0; transform: translateY(16px); transition: all .5s cubic-bezier(.2,.8,.2,1); z-index: 2; }
.hc.s-pay .hc-toast { opacity: 1; transform: none; }
.hc.s-fade .hc-body, .hc.s-fade .hc-toast, .hc.s-fade .hc-notif { opacity: 0 !important; transition: opacity .45s; }
.hc-body { transition: opacity .45s; }

@media (max-width: 640px) {
  .hc-body { grid-template-columns: 1fr; }
  .hc-notif { right: 8px; top: -24px; width: 230px; }
  .hc-tl { padding: 10px 12px 12px; }
  .hc-tl span { font-size: 8.5px; }
}

/* ---------- phone mockups ---------- */
.pa .phone-in { position: relative; overflow: hidden; padding-top: 30px; }
.pa-sb { position: absolute; top: 8px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 600; color: var(--ink); }
.pa-isl { width: 62px; height: 16px; border-radius: 10px; background: #111; }
.pa-scr { display: flex; flex-direction: column; gap: 7px; flex: 1; transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); }
.pa-inv .ph-line, .pa-inv .ph-h, .pa-inv .ph-total { opacity: 0; transform: translateY(8px); transition: all .4s cubic-bezier(.2,.8,.2,1); }
.pa.s-inv .pa-inv .ph-h, .pa.s-inv .pa-inv .ph-total { opacity: 1; transform: none; }
.pa.s-inv .pa-inv .ph-line { opacity: 1; transform: none; }
.pa-inv .ph-line:nth-of-type(1) { transition-delay: .25s; } .pa-inv .ph-line:nth-of-type(2) { transition-delay: .4s; }
.pa-inv .ph-line:nth-of-type(3) { transition-delay: .55s; } .pa-inv .ph-line:nth-of-type(4) { transition-delay: .7s; }
.pa-inv .ph-line { padding: 5px 0; font-size: 12px; }
.pa-inv .ph-total { font-size: 24px; }
.pa-qr { position: relative; align-self: center; width: 78px; height: 78px; margin: 4px 0; display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: all .4s .85s cubic-bezier(.2,.8,.2,1); }
.pa.s-inv .pa-qr { opacity: 1; transform: none; }
.pa-qr .qr-fake { margin: 0; }
.pa-qr .hc-c { width: 12px; height: 12px; border-color: var(--green); }
.pa-qr-scan { position: absolute; left: 4px; right: 4px; height: 2px; top: 6px; background: var(--amber); box-shadow: 0 0 10px var(--amber); opacity: 0; }
.pa.s-scan .pa-qr-scan { opacity: 1; animation: pa-scan 1.1s ease-in-out infinite alternate; }
@keyframes pa-scan { to { top: 70px; } }
.pa-btn { position: relative; overflow: hidden; }
.pa-tap { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(255,255,255,.55); opacity: 0; }
.pa.s-tap .pa-tap { animation: pa-tap .6s ease-out; }
.pa.s-tap .pa-btn { transform: scale(.96); transition: transform .15s; }
@keyframes pa-tap { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(30); } }

.pa-push { position: absolute; z-index: 3; top: 30px; left: 8px; right: 8px; display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(245,246,243,.96); box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); transform: translateY(-120%); opacity: 0; transition: all .5s cubic-bezier(.2,.8,.2,1); }
.pa-push .zl { width: 26px; height: 26px; border-radius: 8px; font-size: 8px; }
.pa-push b { display: block; font-size: 11px; }
.pa-push small { display: block; font-size: 10px; color: var(--muted); line-height: 1.3; }
.pa.s-push .pa-push { transform: none; opacity: 1; }

.pa-ok { position: absolute; inset: 30px 16px 16px; align-items: center; justify-content: center; text-align: center; gap: 6px; opacity: 0; transform: translateY(20px); pointer-events: none; }
.pa.s-ok .pa-ok { opacity: 1; transform: none; }
.pa.s-ok .pa-inv { opacity: 0; transform: translateY(-20px); }
.pa-check { width: 64px; height: 64px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pa-check circle { stroke-dasharray: 150; stroke-dashoffset: 150; }
.pa-check path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.pa.s-ok .pa-check circle { transition: stroke-dashoffset .6s .1s ease-out; stroke-dashoffset: 0; }
.pa.s-ok .pa-check path { transition: stroke-dashoffset .35s .6s ease-out; stroke-dashoffset: 0; }
.pa-ok b { font-size: 17px; }
.pa-ok-amt { font-size: 20px; font-weight: 600; }
.pa-ok small { color: var(--muted); font-size: 10px; }
.pa-conf { position: absolute; left: 50%; top: 32%; width: 0; height: 0; }
.pa-conf i { position: absolute; width: 6px; height: 10px; border-radius: 2px; background: hsl(calc(var(--i) * 26), 80%, 55%); opacity: 0; }
.pa.s-ok .pa-conf i { animation: pa-conf 1.4s calc(var(--i) * 25ms + .5s) ease-out forwards; }
@keyframes pa-conf {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(calc((var(--i) - 6.5) * 12px), calc(90px + var(--i) * 4px)) rotate(calc(var(--i) * 70deg)); }
}

/* landlord phone */
.pa-bars { position: relative; height: 118px; }
.pa-bars i { height: 0; transition: height .9s cubic-bezier(.2,.8,.2,1); }
.pa-bars i:nth-child(2) { transition-delay: .08s; } .pa-bars i:nth-child(3) { transition-delay: .16s; }
.pa-bars i:nth-child(4) { transition-delay: .24s; } .pa-bars i:nth-child(5) { transition-delay: .32s; } .pa-bars i:nth-child(6) { transition-delay: .4s; }
.pa.s-grow .pa-bars i { height: var(--h); }
.pa.s-paid .pa-bars i:nth-child(6) { height: 92%; background: linear-gradient(#ffd27a, var(--amber) 40%, var(--green-2)); transition-delay: 0s; }
.pa-bar-tip { position: absolute; right: 6px; top: 4px; padding: 2px 6px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 9px; opacity: 0; transform: translateY(4px); transition: all .35s; }
.pa-bar-tip em { font-style: normal; }
.pa.s-grow .pa-bar-tip { opacity: 1; transform: none; transition-delay: .9s; }
.pa-feed { min-height: 46px; }
.pa-item { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #ecfdf3; border: 1px solid #bbf7d0; opacity: 0; transform: translateX(30px); transition: all .5s cubic-bezier(.2,.8,.2,1); }
.pa-item b { display: block; font-size: 12.5px; color: #166534; }
.pa-item small { display: block; font-size: 10px; color: var(--muted); }
.pa.s-paid .pa-item { opacity: 1; transform: none; }
.pa-scanbtn { position: relative; }
.pa-ring { position: absolute; inset: -2px; border-radius: 14px; border: 2px solid var(--amber); opacity: 0; }
.pa.s-ring .pa-ring { animation: pa-ring 1.2s ease-out infinite; }
@keyframes pa-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.35); } }
.pa.s-paid .ph-kpis div:last-child { animation: hc-pop .5s; background: #ecfdf3; }

@media (prefers-reduced-motion: reduce) {
  .hc *, .pa * { animation: none !important; transition: none !important; }
}

.pa-lock { position: absolute; left: 0; right: 0; top: 110px; text-align: center; color: var(--ink); transition: opacity .4s; }
.pa-lock b { display: block; font-size: 52px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.pa-lock small { color: var(--muted); font-size: 12px; }
.pa.s-inv .pa-lock, .pa.s-ok .pa-lock { opacity: 0; }
.hc-sign { white-space: nowrap; }

/* ---------- hero clip · bước 6: báo cáo tự động gửi Zalo ---------- */
.hc-side { position: relative; }
.hc-side > .hv-card { transition: opacity .45s, transform .45s; }
.hc.s-report .hc-side > .hv-card { opacity: 0; transform: translateY(-8px) scale(.98); }
.hc-report { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px;
  background: linear-gradient(170deg, #eef4ff, #f8faf6 55%); border: 1px solid #d6e2fb; box-shadow: 0 14px 30px -18px rgba(29,78,216,.45);
  opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.hc.s-report .hc-report { opacity: 1; transform: none; }
.hcr-h { display: flex; align-items: center; gap: 8px; }
.hcr-h div { display: grid; line-height: 1.2; } .hcr-h b { font-size: 12.5px; } .hcr-h small { font-size: 9.5px; color: var(--muted); }
.hcr-z { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0068ff; color: #fff; font-weight: 800; font-size: 12px; flex: none; }
.hcr-card { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px 12px 12px 4px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 18px -12px rgba(14,23,18,.35); }
.hcr-t { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .hcr-t b { font-size: 12.5px; } .hcr-t em { font-style: normal; font-size: 9.5px; color: var(--muted); }
.hcr-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.hcr-kpi span { display: grid; gap: 2px; padding: 6px 7px; border-radius: 8px; background: var(--bg-2); font-size: 9.5px; color: var(--muted); }
.hcr-kpi b { font-size: 15px; color: var(--ink); } .hcr-kpi b i { font-style: normal; } .hcr-kpi b.debt { color: #b45309; }
.hcr-bars { flex: 1; min-height: 46px; display: flex; align-items: flex-end; gap: 6px; padding-top: 4px; }
.hcr-bars i { flex: 1; height: 4%; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #2f7a4f, #8cc5a0); transition: height .9s cubic-bezier(.2,.8,.2,1) var(--d); }
.hcr-bars i:last-child { background: linear-gradient(180deg, #e0a526, #f7d27a); }
.hc.s-report .hcr-bars i { height: var(--h); }
.hcr-foot { font-size: 10px; color: var(--muted); } .hcr-foot b { color: var(--ok, #15803d); }
.hcr-sent { align-self: flex-end; font-size: 10px; padding: 3px 9px; border-radius: 999px; background: #e8f5ec; color: #166534; opacity: 0; transform: translateY(6px); transition: all .4s; }
.hc.s-rsent .hcr-sent { opacity: 1; transform: none; }
.hc.s-fade .hc-report { opacity: 0 !important; }

/* ---------- hero clip · bản điện thoại 9:16 (trang đăng nhập / đăng ký) ---------- */
.hc-m { position: relative; width: 300px; max-width: 100%; }
.hc-phone { position: relative; aspect-ratio: 9 / 16; display: flex; flex-direction: column; overflow: hidden; border-radius: 38px; background: #fbfbf9;
  border: 9px solid #0d1310; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -24px rgba(0,0,0,.65), 0 0 60px -10px rgba(242,166,42,.25); }
.hc-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 4px; font-size: 10.5px; font-weight: 600; color: var(--ink); }
.hc-notch { width: 78px; height: 20px; border-radius: 999px; background: #0d1310; }
.hc-apphead { display: flex; align-items: center; gap: 7px; padding: 6px 14px 8px; border-bottom: 1px solid var(--line); font-size: 11px; }
.hc-apphead img { width: auto; } .hc-apphead .hc-live { font-size: 9px; padding: 2px 7px; }
.hc-m .hc-body { flex: 1; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; padding: 10px; }
.hc-m .hc-cam { padding: 12px; border-radius: 14px; }
.hc-m .hc-meter { padding: 14px 8px 9px; }
.hc-m .hc-brand { margin-top: 12px; font-size: 8px; }
.hc-m .hc-drums { gap: 2px; padding: 5px; }
.hc-m .hc-drums > span { width: 22px; height: 30px; }
.hc-m .hc-drums em { height: 30px; font-size: 19px; }
.hc-m .hc-unit, .hc-m .hc-meta { font-size: 8px; }
.hc-m .hc-iso { display: none; }
.hc-m .hc-side { min-height: 0; }
.hc-m .hc-res { height: 100%; padding: 11px 12px; font-size: 12px; }
.hc-m .hv-num { font-size: 26px; }
.hc-m .hc-alert span { font-size: 11px; padding: 6px 8px; }
.hc-m .hc-tl { padding: 8px 10px 12px; gap: 4px; }
.hc-m .hc-tl span { font-size: 7.5px; letter-spacing: 0; }
.hc-m .hc-notif { left: 10px; right: 10px; top: 34px; width: auto; border-radius: 14px; }
.hc-m .hc-toast { position: absolute; left: 10px; right: 10px; bottom: 44px; top: auto; justify-content: center; font-size: 10.5px; }
.hc-m .hc-report { padding: 10px; }