.hnsd-dashboard,
.hnsd-dashboard * { box-sizing:border-box; }

.hnsd-dashboard {
  --hnsd-primary:#ff6b16;
  --hnsd-dark:#10203b;
  --hnsd-muted:#707989;
  --hnsd-line:#ff9b64;
  --hnsd-bg:#fff;
  --hnsd-height:678px;
  --hnsd-number-size:112px;
  --hnsd-radius:14px;
  position:relative;
  width:100%;
  min-height:var(--hnsd-height);
  overflow:hidden;
  isolation:isolate;
  background:var(--hnsd-bg);
  color:var(--hnsd-dark);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.2;
}

.hnsd-dashboard::before,
.hnsd-dashboard::after {
  content:"";
  position:absolute;
  z-index:0;
  width:278px;
  height:278px;
  border:1px solid color-mix(in srgb,var(--hnsd-primary) 10%,transparent);
  border-radius:50%;
  opacity:.30;
  pointer-events:none;
}
.hnsd-dashboard::before { left:-126px; top:-170px; }
.hnsd-dashboard::after { right:-142px; bottom:-185px; }

.hnsd-ambient {
  position:absolute;
  z-index:0;
  width:230px;
  height:230px;
  border-radius:50%;
  pointer-events:none;
  opacity:.14;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--hnsd-primary) 42%,transparent) 1px,transparent 1.3px);
  background-size:14px 14px;
}
.hnsd-ambient-one { left:-32px; top:-70px; }
.hnsd-ambient-two { right:-48px; bottom:-76px; }

.hnsd-breadcrumbs {
  position:absolute;
  z-index:12;
  top:20px;
  left:54.45%;
  display:flex;
  gap:16px;
  transform:translateX(-50%);
}
.hnsd-nav-button {
  min-height:52px;
  padding:0 24px;
  border:1px solid color-mix(in srgb,var(--hnsd-primary) 45%,transparent);
  border-radius:var(--hnsd-radius);
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:color-mix(in srgb,var(--hnsd-bg) 97%,var(--hnsd-primary) 3%);
  color:var(--hnsd-dark)!important;
  font-size:16px;
  font-weight:750;
  text-decoration:none!important;
  box-shadow:none;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.hnsd-nav-button:hover { transform:translateY(-2px); border-color:var(--hnsd-primary); box-shadow:0 8px 24px rgba(16,32,59,.06); }
.hnsd-nav-button svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8; }

.hnsd-stage {
  position:relative;
  z-index:1;
  width:min(1583px,100%);
  height:var(--hnsd-height);
  min-height:620px;
  margin:0 auto;
}

.hnsd-routes {
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.hnsd-route { fill:none;stroke:var(--hnsd-line);stroke-linecap:round; }
.hnsd-route-base { stroke-width:1.05;opacity:.63; }
.hnsd-route-trail { stroke-width:7.2; opacity:.18; stroke-dasharray:14 74; stroke-linecap:round; filter:blur(2.4px); animation:hnsd-route-flow var(--hnsd-route-speed,18s) linear infinite; transition:opacity .25s ease,stroke-width .25s ease,filter .25s ease; }
.hnsd-route-flow { stroke-width:2.3; opacity:.92; stroke-dasharray:2 86; stroke-linecap:round; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--hnsd-primary) 30%,transparent)); animation:hnsd-route-flow var(--hnsd-route-speed,18s) linear infinite; transition:opacity .25s ease,stroke-width .25s ease,filter .25s ease; }
.hnsd-route-storage { animation-direction:reverse; }
.hnsd-route-consumption { }
.hnsd-route-revenue { animation-direction:reverse; }
.hnsd-route-co2 { }
.hnsd-route-base,.hnsd-route-trail { transition:opacity .25s ease,stroke-width .25s ease,filter .25s ease; }
.hnsd-route-flow.hnsd-route-hover { opacity:1!important; stroke-width:2.9!important; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--hnsd-primary) 45%,transparent)); }
.hnsd-route-trail.hnsd-route-hover { opacity:.28!important; stroke-width:8.6!important; filter:blur(3px); }
.hnsd-route-base.hnsd-route-hover { opacity:.92!important; stroke-width:1.25!important; filter:none; }
.hnsd-hub-dot { fill:var(--hnsd-primary);filter:drop-shadow(0 0 3px rgba(255,107,22,.32));animation:hnsd-pulse 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center; }
.hnsd-hub-ring { fill:none;stroke:color-mix(in srgb,var(--hnsd-primary) 28%,transparent);stroke-width:1;animation:hnsd-pulse 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center; }
.hnsd-hub-ring-two { animation-delay:1.1s; }
.hnsd-dashboard.hnsd-vn-backside .hnsd-route-base { opacity:.26; }
.hnsd-dashboard.hnsd-vn-backside .hnsd-route-trail { opacity:.08; }
.hnsd-dashboard.hnsd-vn-backside .hnsd-route-flow { opacity:.30; }
.hnsd-dashboard.hnsd-vn-backside .hnsd-hub-dot { opacity:.38; }
.hnsd-dashboard.hnsd-vn-backside .hnsd-hub-ring { opacity:.22; }

.hnsd-globe-wrap {
  position:absolute;
  z-index:1;
  top:47px;
  left:54.45%;
  width:566px;
  max-width:44.8vw;
  aspect-ratio:1;
  transform:translateX(-50%);
  cursor:crosshair;
  opacity:.98;
}
.hnsd-globe-canvas { position:relative;z-index:2;display:block;width:100%;height:100%; }
.hnsd-globe-fallback { position:absolute;z-index:1;inset:0;border-radius:50%;overflow:hidden;opacity:1;transition:opacity .45s ease;pointer-events:none; }
.hnsd-globe-fallback-disc { position:absolute;inset:1%;border:1px solid color-mix(in srgb,var(--hnsd-primary) 18%,transparent);border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--hnsd-primary) 3%,transparent),transparent 68%); }
.hnsd-globe-fallback-map { position:absolute;left:5%;top:3%;width:93%;height:94%;object-fit:contain;opacity:.92;transform-origin:50% 50%;animation:hnsd-fallback-globe var(--hnsd-globe-speed,90s) linear infinite; }
.hnsd-vietnam-hub { position:absolute;left:1.8%;top:44.4%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--hnsd-primary);box-shadow:0 0 0 7px color-mix(in srgb,var(--hnsd-primary) 12%,transparent),0 0 0 15px color-mix(in srgb,var(--hnsd-primary) 6%,transparent);animation:hnsd-fallback-hub 3.6s ease-in-out infinite; }
.hnsd-dashboard.hnsd-canvas-ready .hnsd-globe-fallback { opacity:0; }
.hnsd-globe-hover-layer { position:absolute;z-index:4;inset:1.2%;border-radius:50%;overflow:hidden; }
.hnsd-hover-ring { position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;border:1px solid color-mix(in srgb,var(--hnsd-primary) 42%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--hnsd-primary) 12%,transparent),transparent 70%);pointer-events:none;animation:hnsd-hover-ring 1.45s ease-out forwards; }
.hnsd-hover-ring::after { content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--hnsd-primary); }

.hnsd-main-stat {
  position:absolute;
  z-index:6;
  top:107px;
  left:54.45%;
  width:min(760px,78vw);
  text-align:center;
  transform:translateX(-50%);
}
.hnsd-main-number { display:flex;justify-content:center;align-items:flex-end;gap:10px;color:var(--hnsd-primary);white-space:nowrap; }
.hnsd-main-number .hnsd-value { font-size:clamp(90px,7.7vw,var(--hnsd-number-size));font-weight:900;letter-spacing:-.055em;line-height:.78;font-variant-numeric:tabular-nums lining-nums; }
.hnsd-main-number .hnsd-unit { margin-bottom:3px;font-size:clamp(24px,2.15vw,35px);font-weight:850;letter-spacing:-.03em; }
.hnsd-main-label { margin-top:21px;color:var(--hnsd-muted);font-size:clamp(12px,1.05vw,16px);font-weight:800;letter-spacing:.115em;text-transform:uppercase; }

.hnsd-side-stat { position:absolute;z-index:7;width:245px;text-align:center; }
.hnsd-installed { left:15.55%;top:280px; }
.hnsd-storage { left:15.55%;top:421px; }
.hnsd-consumption { right:6.62%;top:280px; }
.hnsd-revenue { right:6.62%;top:437px; }
.hnsd-co2 { left:54.45%;bottom:32px;transform:translateX(-50%); }
.hnsd-stat-icon { width:25px;height:25px;margin:0 auto 7px;color:var(--hnsd-primary); }
.hnsd-stat-icon svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9; }
.hnsd-stat-number { color:var(--hnsd-dark);font-size:clamp(29px,2.3vw,39px);font-weight:900;letter-spacing:-.035em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums; }
.hnsd-stat-number .hnsd-unit { color:var(--hnsd-primary);font-size:.39em;font-weight:850;letter-spacing:0; }
.hnsd-stat-label { max-width:190px;margin:8px auto 0;color:var(--hnsd-muted);font-size:12.5px;font-weight:750;line-height:1.25; }


.hnsd-side-stat { overflow:visible;cursor:pointer;transition:transform .28s ease,filter .28s ease; }
.hnsd-side-stat .hnsd-stat-icon,.hnsd-side-stat .hnsd-stat-number { transition:transform .28s ease,color .28s ease; }
.hnsd-side-stat.hnsd-stat-hover { transform:translateY(-5px) scale(1.025);filter:drop-shadow(0 10px 18px rgba(17,33,60,.08)); }
.hnsd-side-stat.hnsd-stat-hover .hnsd-stat-icon { transform:scale(1.18) rotate(-4deg);animation:hnsd-icon-float 1.1s ease-in-out infinite; }
.hnsd-side-stat.hnsd-stat-hover .hnsd-stat-number { transform:scale(1.035); }
.hnsd-co2.hnsd-stat-hover { transform:translateX(-50%) translateY(-5px) scale(1.025); }
.hnsd-external-ripple { position:absolute;z-index:-1;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:1px solid color-mix(in srgb,var(--hnsd-primary) 42%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--hnsd-primary) 12%,transparent),transparent 72%);pointer-events:none;animation:hnsd-external-ripple 1.15s ease-out forwards; }

.hnsd-screen-reader { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.hnsd-dashboard.hnsd-no-motion * { animation:none!important;transition:none!important; }
.hnsd-dashboard.hnsd-no-motion .hnsd-globe-fallback-map { transform:none; }
@media (prefers-reduced-motion:reduce) { .hnsd-dashboard * { animation:none!important;transition:none!important; } }

@keyframes hnsd-route-flow { to { stroke-dashoffset:-174; } }
@keyframes hnsd-pulse { 0%,100%{opacity:.32;transform:scale(.82)} 50%{opacity:1;transform:scale(1.45)} }
@keyframes hnsd-hover-ring { 0%{opacity:.82;transform:scale(.2)} 72%{opacity:.28} 100%{opacity:0;transform:scale(6.8)} }
@keyframes hnsd-fallback-globe { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes hnsd-fallback-hub { 0%,100%{transform:scale(.82);opacity:.65} 50%{transform:scale(1.18);opacity:1} }
@keyframes hnsd-external-ripple { 0%{opacity:.8;transform:scale(.2)} 70%{opacity:.28} 100%{opacity:0;transform:scale(7)} }
@keyframes hnsd-icon-float { 0%,100%{translate:0 0} 50%{translate:0 -3px} }

@media (max-width:1100px) {
  .hnsd-dashboard { min-height:760px; }
  .hnsd-stage { height:760px;min-height:760px; }
  .hnsd-breadcrumbs { left:50%; }
  .hnsd-globe-wrap { top:105px;left:50%;width:525px;max-width:62vw; }
  .hnsd-main-stat { top:104px;left:50%; }
  .hnsd-installed { left:2%;top:348px; }
  .hnsd-storage { left:2%;top:520px; }
  .hnsd-consumption { right:2%;top:348px; }
  .hnsd-revenue { right:2%;top:520px; }
  .hnsd-co2 { left:50%;bottom:22px; }
}

@media (max-width:767px) {
  .hnsd-dashboard { min-height:790px;padding:12px 10px 18px; }
  .hnsd-breadcrumbs { position:relative;top:auto;left:auto;width:100%;margin:0 auto 8px;transform:none;gap:8px; }
  .hnsd-nav-button { flex:1;min-width:0;min-height:44px;justify-content:center;padding:0 9px;font-size:12.5px; }
  .hnsd-stage { width:100%;height:720px;min-height:720px; }
  .hnsd-globe-wrap { top:91px;left:50%;width:min(366px,98vw);max-width:none;opacity:.94; }
  .hnsd-main-stat { top:18px;left:50%;width:100%; }
  .hnsd-main-number { gap:6px; }
  .hnsd-main-number .hnsd-value { font-size:clamp(54px,17vw,82px);line-height:.82; }
  .hnsd-main-number .hnsd-unit { margin-bottom:3px;font-size:19px; }
  .hnsd-main-label { max-width:292px;margin:13px auto 0;font-size:10.5px;line-height:1.35; }
  .hnsd-side-stat { width:43%; }
  .hnsd-installed { left:0;top:270px;text-align:left; }
  .hnsd-storage { left:0;top:422px;text-align:left; }
  .hnsd-consumption { right:0;top:270px;text-align:right; }
  .hnsd-revenue { right:0;top:422px;text-align:right; }
  .hnsd-installed .hnsd-stat-icon,.hnsd-storage .hnsd-stat-icon { margin-left:4px;margin-right:auto; }
  .hnsd-consumption .hnsd-stat-icon,.hnsd-revenue .hnsd-stat-icon { margin-left:auto;margin-right:4px; }
  .hnsd-side-stat .hnsd-stat-label { margin-left:auto;margin-right:auto; }
  .hnsd-co2 { left:50%;bottom:4px;width:72%;text-align:center;transform:translateX(-50%); }
  .hnsd-co2.hnsd-stat-hover { transform:translateX(-50%) translateY(-3px) scale(1.015); }
  .hnsd-stat-icon { width:22px;height:22px; }
  .hnsd-stat-number { font-size:clamp(21px,7vw,31px); }
  .hnsd-stat-label { max-width:148px;font-size:10.5px; }
  .hnsd-route-base { stroke-width:.82;opacity:.58; }
  .hnsd-route-flow { stroke-width:1.5;opacity:.58; }
}

/* Admin */
.hnsd-admin-wrap { max-width: 1500px; }
.hnsd-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 18px 0 20px;
  padding: 24px 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, #11213c, #203a67);
  color: #fff;
}
.hnsd-admin-head h1 { margin: 0 0 8px; color: #fff; }
.hnsd-admin-head p { margin: 0; opacity: .78; }
.hnsd-admin-head code { padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; white-space: nowrap; }
.hnsd-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hnsd-card { padding: 22px; border: 1px solid #e5e8ef; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(17,33,60,.04); }
.hnsd-card h2 { margin: 0 0 18px; }
.hnsd-card h3 { margin: 24px 0 8px; }
.hnsd-two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hnsd-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.hnsd-field label { font-weight: 700; color: #26364f; }
.hnsd-field input[type="text"],
.hnsd-field input[type="url"],
.hnsd-field input[type="number"],
.hnsd-field input[type="password"],
.hnsd-field select,
.hnsd-field textarea { width: 100%; max-width: none; min-height: 42px; border-color: #d9dee7; border-radius: 9px; }
.hnsd-field small { color: #6f7888; }
.hnsd-switch { display: inline-flex !important; align-items: center; width: 48px; height: 26px; position: relative; }
.hnsd-switch input { opacity: 0; position: absolute; }
.hnsd-switch span { position: absolute; inset: 0; border-radius: 999px; background: #ccd2dc; transition: .2s; }
.hnsd-switch span::after { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.16); transition:.2s; }
.hnsd-switch input:checked + span { background: #ff6b16; }
.hnsd-switch input:checked + span::after { transform: translateX(22px); }
.hnsd-preview-card { margin-top: 22px; overflow: hidden; }
.hnsd-preview-card > .hnsd-dashboard { border: 1px solid #eceff4; border-radius: 14px; }
@media (max-width: 1100px) { .hnsd-admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .hnsd-two-cols { grid-template-columns: 1fr; } .hnsd-admin-head { align-items: flex-start; flex-direction: column; } }


@keyframes hnsd-globe-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.hnsd-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 14%, rgba(255,107,22,.12) 1px, transparent 1px), radial-gradient(circle at 86% 86%, rgba(255,107,22,.10) 1px, transparent 1px);
  background-size: 140px 140px, 180px 180px;
  opacity: .22;
  pointer-events: none;
}

.hnsd-main-number .hnsd-value {
  font-size: clamp(96px, 8.4vw, var(--hnsd-number-size));
}

.hnsd-world-dots path:nth-child(1),
.hnsd-world-dots path:nth-child(2),
.hnsd-world-dots path:nth-child(3) {
  opacity: .97;
}

.hnsd-world-dots path:nth-child(4),
.hnsd-world-dots path:nth-child(5),
.hnsd-world-dots path:nth-child(6) {
  opacity: .82;
}

@media (max-width: 1024px) {
  .hnsd-dashboard { min-height: 790px; }
  .hnsd-stage { height: 790px; min-height: 790px; }
  .hnsd-globe-wrap { top: 104px; width: 560px; max-width: 70vw; }
  .hnsd-routes { top: 150px; height: 520px; width: 98%; }
  .hnsd-main-stat { top: 94px; }
  .hnsd-installed { left: 2%; top: 360px; }
  .hnsd-storage { left: 2%; top: 520px; }
  .hnsd-consumption { right: 2%; top: 360px; }
  .hnsd-revenue { right: 2%; top: 520px; }
}

@media (max-width: 767px) {
  .hnsd-dashboard {
    overflow: hidden;
    min-height: auto;
    padding: 14px 12px 24px;
  }

  .hnsd-breadcrumbs {
    gap: 8px;
    margin-bottom: 14px;
  }

  .hnsd-stage {
    display: block;
    position: relative;
    min-height: 820px;
    height: auto;
  }

  .hnsd-globe-wrap {
    position: absolute;
    top: 102px;
    left: 50%;
    width: min(380px, 98vw);
    transform: translateX(-50%);
    opacity: .68;
  }

  .hnsd-routes {
    display: block;
    top: 154px;
    left: 50%;
    width: 112%;
    height: 450px;
    transform: translateX(-50%);
    opacity: .9;
  }

  .hnsd-main-stat {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 215px;
    padding-top: 22px;
    transform: none;
  }

  .hnsd-side-stat {
    position: relative;
    width: calc(50% - 8px);
    min-height: 120px;
    margin-top: 14px;
    padding: 14px 8px 12px;
    border: none;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
  }

  .hnsd-installed, .hnsd-storage, .hnsd-consumption, .hnsd-revenue, .hnsd-co2 {
    left: auto; right: auto; top: auto; bottom: auto; transform: none;
  }

  .hnsd-installed, .hnsd-storage { text-align: left; }
  .hnsd-consumption, .hnsd-revenue { text-align: right; }
  .hnsd-consumption .hnsd-stat-icon, .hnsd-revenue .hnsd-stat-icon { margin-left: auto; margin-right: 0; }
  .hnsd-installed .hnsd-stat-icon, .hnsd-storage .hnsd-stat-icon { margin-left: 0; margin-right: auto; }

  .hnsd-co2 {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 180px;
    padding-top: 0;
  }

  .hnsd-main-number .hnsd-value { font-size: clamp(58px, 18vw, 92px); }
  .hnsd-main-label { max-width: 300px; font-size: 11px; }
  .hnsd-stat-number { font-size: clamp(22px, 7.2vw, 34px); }
  .hnsd-stat-label { max-width: 160px; font-size: 11.5px; }
}


@media (max-width: 767px) {
  .hnsd-dashboard {
    padding: 10px 8px 14px;
  }
  .hnsd-breadcrumbs {
    margin-bottom: 8px;
    gap: 6px;
  }
  .hnsd-nav-button {
    min-height: 40px;
    padding: 0 8px;
    font-size: 12px;
  }
  .hnsd-stage {
    min-height: 700px;
    height: 700px;
  }
  .hnsd-globe-wrap {
    top: 90px;
    width: min(344px, 96vw);
    opacity: .76;
  }
  .hnsd-routes {
    top: 136px;
    height: 398px;
    width: 108%;
  }
  .hnsd-main-stat {
    min-height: 154px;
    padding-top: 8px;
  }
  .hnsd-main-number .hnsd-value {
    font-size: clamp(50px, 16vw, 76px);
  }
  .hnsd-main-number .hnsd-unit {
    font-size: 18px;
    margin-bottom: 1px;
  }
  .hnsd-main-label {
    max-width: 272px;
    margin: 8px auto 0;
    font-size: 10px;
    line-height: 1.18;
    letter-spacing: .08em;
  }
  .hnsd-side-stat {
    width: 46%;
    min-height: 86px;
    margin-top: 6px;
    padding: 4px 2px 4px;
  }
  .hnsd-installed { top: 248px; }
  .hnsd-storage { top: 368px; }
  .hnsd-consumption { top: 248px; }
  .hnsd-revenue { top: 368px; }
  .hnsd-stat-icon {
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
  }
  .hnsd-stat-number {
    font-size: clamp(20px, 6.7vw, 28px);
    line-height: .98;
  }
  .hnsd-stat-label {
    max-width: 136px;
    margin-top: 4px;
    font-size: 9.8px;
    line-height: 1.14;
  }
  .hnsd-co2 {
    width: 76%;
    margin-top: 128px;
  }
}


@media (max-width: 767px) {
  .hnsd-dashboard {
    padding: 8px 6px 10px;
  }
  .hnsd-breadcrumbs {
    margin-bottom: 6px;
    gap: 6px;
  }
  .hnsd-nav-button {
    min-height: 38px;
    padding: 0 7px;
    font-size: 11.6px;
    border-radius: 12px;
  }
  .hnsd-stage {
    min-height: 648px;
    height: 648px;
  }
  .hnsd-globe-wrap {
    top: 84px;
    width: min(330px, 95vw);
    opacity: .74;
  }
  .hnsd-routes {
    top: 128px;
    height: 370px;
    width: 106%;
  }
  .hnsd-main-stat {
    min-height: 142px;
    padding-top: 4px;
  }
  .hnsd-main-number {
    gap: 4px;
  }
  .hnsd-main-number .hnsd-value {
    font-size: clamp(48px, 15vw, 72px);
    letter-spacing: -.045em;
  }
  .hnsd-main-number .hnsd-unit {
    font-size: 17px;
    margin-bottom: 0;
  }
  .hnsd-main-label {
    max-width: 252px;
    margin: 6px auto 0;
    font-size: 9.4px;
    line-height: 1.1;
    letter-spacing: .06em;
  }
  .hnsd-side-stat {
    width: 47%;
    min-height: 76px;
    margin-top: 2px;
    padding: 2px 1px;
  }
  .hnsd-installed { top: 230px; }
  .hnsd-storage { top: 334px; }
  .hnsd-consumption { top: 230px; }
  .hnsd-revenue { top: 334px; }
  .hnsd-stat-icon {
    width: 16px;
    height: 16px;
    margin-bottom: 3px;
  }
  .hnsd-stat-number {
    font-size: clamp(19px, 6.2vw, 26px);
    line-height: .95;
  }
  .hnsd-stat-number .hnsd-unit {
    font-size: .35em;
  }
  .hnsd-stat-label {
    max-width: 128px;
    margin-top: 3px;
    font-size: 9.1px;
    line-height: 1.08;
  }
  .hnsd-co2 {
    width: 76%;
    margin-top: 108px;
  }
}


/* Final per-device layout tuning v3.3.6 */
@media (min-width: 768px) {
  .hnsd-dashboard { min-height: 678px; }
  .hnsd-stage { min-height: 678px; height: 678px; }
  .hnsd-globe-wrap { top: 70px; width: 548px; max-width: 46vw; opacity: .80; }
  .hnsd-main-stat { top: 90px; }
  .hnsd-main-label { margin-top: 16px; }
  .hnsd-installed { left: 5.2%; top: 284px; }
  .hnsd-storage { left: 5.2%; top: 432px; }
  .hnsd-consumption { right: 4.8%; top: 284px; }
  .hnsd-revenue { right: 4.8%; top: 432px; }
  .hnsd-co2 { bottom: 30px; }
  .hnsd-side-stat { width: 252px; }
}

@media (max-width: 767px) {
  .hnsd-dashboard {
    padding: 8px 6px 8px;
    min-height: auto;
  }
  .hnsd-breadcrumbs {
    margin-bottom: 4px;
    gap: 6px;
  }
  .hnsd-nav-button {
    min-height: 36px;
    padding: 0 7px;
    font-size: 11.3px;
  }
  .hnsd-stage {
    min-height: 620px;
    height: 620px;
  }
  .hnsd-globe-wrap {
    top: 82px;
    width: min(314px, 94vw);
    opacity: .76;
  }
  .hnsd-routes {
    top: 124px;
    width: 104%;
    height: 350px;
  }
  .hnsd-main-stat {
    min-height: 136px;
    padding-top: 2px;
  }
  .hnsd-main-number .hnsd-value {
    font-size: clamp(46px, 14.8vw, 68px);
  }
  .hnsd-main-number .hnsd-unit {
    font-size: 16px;
  }
  .hnsd-main-label {
    max-width: 240px;
    margin: 4px auto 0;
    font-size: 9px;
    line-height: 1.06;
    letter-spacing: .05em;
  }
  .hnsd-side-stat {
    width: 47.5%;
    min-height: 72px;
    margin-top: 0;
    padding: 1px 1px;
  }
  .hnsd-installed { top: 220px; left: 0; }
  .hnsd-storage { top: 318px; left: 0; }
  .hnsd-consumption { top: 220px; right: 0; }
  .hnsd-revenue { top: 318px; right: 0; }
  .hnsd-stat-icon { width: 15px; height: 15px; margin-bottom: 2px; }
  .hnsd-stat-number { font-size: clamp(18px, 6vw, 24px); line-height: .92; }
  .hnsd-stat-label { max-width: 122px; margin-top: 2px; font-size: 8.8px; line-height: 1.03; }
  .hnsd-co2 { width: 78%; margin-top: 96px; }
}


/* Mobile desktop-like arrangement fix v3.3.7 */
@media (max-width: 767px) {
  .hnsd-stage { position: relative !important; min-height: 640px !important; height: 640px !important; }
  .hnsd-routes { top: 122px !important; left: 50% !important; width: 104% !important; height: 356px !important; transform: translateX(-50%) !important; }
  .hnsd-globe-wrap { top: 90px !important; left: 50% !important; width: min(318px, 94vw) !important; transform: translateX(-50%) !important; opacity: .76 !important; }
  .hnsd-main-stat { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; min-height: 144px !important; padding-top: 2px !important; transform: none !important; }
  .hnsd-main-number, .hnsd-stat-number { white-space: nowrap; }
  .hnsd-main-number .hnsd-value { font-size: clamp(47px, 14.6vw, 69px) !important; }
  .hnsd-main-number .hnsd-unit { font-size: 16px !important; }
  .hnsd-main-label { max-width: 245px !important; margin: 5px auto 0 !important; font-size: 9px !important; line-height: 1.04 !important; letter-spacing: .045em !important; }

  .hnsd-side-stat, .hnsd-installed, .hnsd-storage, .hnsd-consumption, .hnsd-revenue, .hnsd-co2 {
    position: absolute !important;
    display: block !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }
  .hnsd-side-stat { width: 43.5% !important; }
  .hnsd-installed { left: 2px !important; top: 386px !important; text-align: left !important; }
  .hnsd-consumption { left: 10px !important; top: 472px !important; width: 45% !important; text-align: center !important; }
  .hnsd-storage { right: 4px !important; top: 500px !important; width: 43% !important; text-align: right !important; }
  .hnsd-revenue { right: 6px !important; top: 590px !important; width: 42% !important; text-align: right !important; }
  .hnsd-co2 { left: 50% !important; top: 428px !important; width: 34% !important; text-align: center !important; transform: translateX(-50%) !important; }

  .hnsd-installed .hnsd-stat-icon, .hnsd-consumption .hnsd-stat-icon { margin-left: 0 !important; margin-right: auto !important; }
  .hnsd-storage .hnsd-stat-icon, .hnsd-revenue .hnsd-stat-icon { margin-left: auto !important; margin-right: 0 !important; }
  .hnsd-co2 .hnsd-stat-icon { margin: 0 auto 2px !important; }
  .hnsd-stat-icon { width: 15px !important; height: 15px !important; margin-bottom: 2px !important; }
  .hnsd-stat-number { font-size: clamp(18px, 6vw, 24px) !important; line-height: .93 !important; letter-spacing: -.02em !important; }
  .hnsd-stat-number .hnsd-unit { font-size: .34em !important; display: inline !important; }
  .hnsd-stat-label { max-width: 126px !important; margin-top: 2px !important; font-size: 8.8px !important; line-height: 1.02 !important; }
}


/* Compact mobile same-angle layout v3.3.8 */
@media (max-width: 767px) {
  .hnsd-dashboard { padding: 6px 4px 6px !important; }
  .hnsd-stage { min-height: 548px !important; height: 548px !important; }
  .hnsd-globe-wrap { top: 88px !important; width: min(276px, 84vw) !important; opacity: .77 !important; }
  .hnsd-routes { top: 118px !important; width: 102% !important; height: 300px !important; }
  .hnsd-main-stat { min-height: 124px !important; padding-top: 0 !important; }
  .hnsd-main-number .hnsd-value { font-size: clamp(42px, 13.4vw, 60px) !important; }
  .hnsd-main-number .hnsd-unit { font-size: 14px !important; }
  .hnsd-main-label { max-width: 230px !important; margin: 3px auto 0 !important; font-size: 8.3px !important; line-height: 1.02 !important; letter-spacing: .04em !important; }

  .hnsd-side-stat { width: 41.8% !important; }
  .hnsd-installed { left: 2px !important; top: 314px !important; text-align: left !important; }
  .hnsd-consumption { right: 2px !important; left: auto !important; top: 314px !important; width: 41.8% !important; text-align: right !important; }
  .hnsd-storage { left: 2px !important; right: auto !important; top: 394px !important; width: 41.8% !important; text-align: left !important; }
  .hnsd-revenue { right: 2px !important; top: 394px !important; width: 41.8% !important; text-align: right !important; }
  .hnsd-co2 { left: 50% !important; top: 454px !important; width: 34% !important; text-align: center !important; transform: translateX(-50%) !important; }

  .hnsd-installed .hnsd-stat-icon, .hnsd-storage .hnsd-stat-icon { margin-left: 0 !important; margin-right: auto !important; }
  .hnsd-consumption .hnsd-stat-icon, .hnsd-revenue .hnsd-stat-icon { margin-left: auto !important; margin-right: 0 !important; }
  .hnsd-stat-icon { width: 14px !important; height: 14px !important; margin-bottom: 1px !important; }
  .hnsd-stat-number { font-size: clamp(16px, 5.5vw, 22px) !important; line-height: .92 !important; }
  .hnsd-stat-number .hnsd-unit { font-size: .33em !important; }
  .hnsd-stat-label { max-width: 118px !important; margin-top: 1px !important; font-size: 8px !important; line-height: 1 !important; }
}


/* Mobile route coordinate-system fix v3.4.0 */
@media (max-width: 767px) {
  .hnsd-stage {
    position: relative !important;
    overflow: visible !important;
  }
  .hnsd-routes {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    overflow: visible !important;
  }
}