/* ================================================================
   HA Portal — 對外會員網站 CSS（v3 / 2026-05-17）
   Design: Tech Blue 深色（符合 design-system.md SSOT #2563eb）
           深藍夜空 + glass card + 微立體 + 高對比可讀
   class 命名向後相容 v2，新增：mobile-tabbar / switch-toggle / tab-bar
   ================================================================ */

/* === 1. Design Tokens =========================================== */
:root {
  --hp-bg:           #050a14;
  --hp-bg-2:         #0a1322;
  --hp-bg-3:         #0e1a2e;

  --hp-surface:      #111c33;
  --hp-surface-2:    #152339;
  --hp-surface-3:    rgba(255, 255, 255, .04);
  --hp-surface-hl:   rgba(255, 255, 255, .07);

  --hp-border:       rgba(255, 255, 255, .09);
  --hp-border-2:     rgba(255, 255, 255, .15);
  --hp-border-focus: rgba(96, 165, 250, .55);

  --hp-text:         rgba(255, 255, 255, .96);
  --hp-text-1:       rgba(255, 255, 255, .96);
  --hp-text-2:       rgba(255, 255, 255, .72);
  --hp-text-3:       rgba(255, 255, 255, .48);

  /* Tech Blue 品牌色（符合 SSOT） */
  --hp-brand:        #2563eb;
  --hp-brand-2:      #3b82f6;
  --hp-brand-3:      #60a5fa;
  --hp-brand-soft:   rgba(37, 99, 235, .14);
  --hp-brand-glow:   rgba(37, 99, 235, .28);

  --hp-success:      #22c55e;
  --hp-success-soft: rgba(34, 197, 94, .14);
  --hp-warn:         #f59e0b;
  --hp-warn-soft:    rgba(245, 158, 11, .14);
  --hp-error:        #ef4444;
  --hp-error-soft:   rgba(239, 68, 68, .14);
  --hp-info:         #38bdf8;
  --hp-info-soft:    rgba(56, 189, 248, .14);

  --hp-line:         #06c755;
  --hp-line-2:       #1ed760;

  --hp-r-sm: 8px;
  --hp-r:    12px;
  --hp-r-lg: 16px;

  --hp-sh-1: 0 1px 2px rgba(0, 0, 0, .25);
  --hp-sh-2: 0 4px 12px rgba(0, 0, 0, .30);
  --hp-sh-3: 0 12px 32px rgba(0, 0, 0, .42);
  --hp-sh-brand: 0 8px 24px rgba(37, 99, 235, .32);

  --hp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
             Roboto, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
             "Helvetica Neue", Arial, sans-serif;
  --hp-font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --hp-tr: .15s cubic-bezier(.4, 0, .2, 1);

  --hp-tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* === 2. Reset & Base ============================================ */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  color: var(--hp-text);
  font-family: var(--hp-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(37, 99, 235, .22), transparent 58%),
    radial-gradient(720px 460px at 88% 12%, rgba(96, 165, 250, .14), transparent 58%),
    radial-gradient(640px 480px at 50% 100%, rgba(37, 99, 235, .12), transparent 62%),
    linear-gradient(165deg, var(--hp-bg), var(--hp-bg-2));
  background-attachment: fixed;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a {
  color: var(--hp-brand-3);
  text-decoration: none;
  transition: color var(--hp-tr);
}
a:hover { color: #93c5fd; }

button, input, select, textarea { font-family: inherit; }

::selection { background: var(--hp-brand-soft); color: #fff; }

/* === 3. Layout 框架 ============================================== */
.hp-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hp-main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

body.hp-body-auth .hp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* min:0 才不會被 child content 撐爆 */
  place-items: center;
  padding: 32px 16px;
}
/* auth 模式 main 用 grid + place-items:center
   landing 內容(hero/features 等)需要 width:100% 否則撐爆 viewport
   login/register 卡(.hp-card)自己 width:min(460px,94vw),不在此 list */
body.hp-body-auth .hp-main > .hp-hero,
body.hp-body-auth .hp-main > .hp-features,
body.hp-body-auth .hp-main > .ha-stats,
body.hp-body-auth .hp-main > .ha-section,
body.hp-body-auth .hp-main > .ha-cta {
  width: 100%;
  max-width: 1180px;
}

@media (max-width: 980px) {
  body.hp-body-app .hp-main { padding-bottom: calc(28px + var(--hp-tabbar-h)); }
}

/* === 4. Top Header ============================================== */
.hp-header {
  background: rgba(10, 19, 34, .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hp-border);
  padding: 12px clamp(24px,4vw,60px);
  position: sticky; top: 0;
  z-index: 30;
}
.hp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hp-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 16px;
  color: var(--hp-text);
  text-decoration: none;
  letter-spacing: .2px;
}
.hp-brand:hover { color: var(--hp-text); }
.hp-brand-logo {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 11px;
  background:
    radial-gradient(18px 18px at 30% 28%, rgba(255, 255, 255, .30), transparent 60%),
    linear-gradient(135deg, var(--hp-brand), var(--hp-brand-3));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--hp-sh-brand);
}
.hp-brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--hp-text-3);
  margin-left: 6px;
  letter-spacing: .5px;
}

.hp-nav { display: flex; align-items: center; gap: 6px; }
.hp-nav a {
  color: var(--hp-text-2);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--hp-tr), color var(--hp-tr);
}
.hp-nav a:hover { color: var(--hp-text); background: var(--hp-surface-3); }
.hp-nav-cta {
  color: #fff !important;
  background:
    radial-gradient(18px 18px at 22% 22%, rgba(255, 255, 255, .26), transparent 55%),
    linear-gradient(135deg, var(--hp-brand), var(--hp-brand-2)) !important;
  font-weight: 700 !important;
  box-shadow: var(--hp-sh-brand);
}
.hp-nav-cta:hover { filter: brightness(1.06); }

.hp-user-menu { position: relative; }
.hp-user-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  background:
    radial-gradient(16px 16px at 30% 28%, rgba(255, 255, 255, .26), transparent 55%),
    linear-gradient(135deg, var(--hp-brand), var(--hp-brand-3));
  box-shadow: var(--hp-sh-1);
  transition: transform var(--hp-tr), box-shadow var(--hp-tr);
}
.hp-user-btn:hover { transform: translateY(-1px); box-shadow: var(--hp-sh-2); }
.hp-user-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 200px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r);
  box-shadow: var(--hp-sh-3);
  padding: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--hp-tr), transform var(--hp-tr), visibility 0s linear .15s;
}
.hp-user-dropdown.open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--hp-tr), transform var(--hp-tr), visibility 0s;
}
.hp-user-dropdown-name {
  padding: 10px 12px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hp-text);
  border-bottom: 1px solid var(--hp-border);
  margin-bottom: 4px;
}
.hp-user-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--hp-text-2);
  font-size: 13.5px;
  transition: background var(--hp-tr), color var(--hp-tr);
}
.hp-user-dropdown a:hover { color: var(--hp-text); background: var(--hp-surface-hl); }
.hp-user-dropdown-hr {
  height: 1px;
  background: var(--hp-border);
  margin: 4px 0;
}
.hp-user-dropdown-logout { color: var(--hp-error) !important; }
.hp-user-dropdown-logout:hover { background: var(--hp-error-soft) !important; }

/* === 5. Footer ================================================== */
.hp-footer {
  border-top: 1px solid var(--hp-border);
  padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--hp-text-3);
  font-size: 13px;
  background: rgba(5, 10, 19, .55);
}
.hp-footer a { color: var(--hp-text-2); }
.hp-footer a:hover { color: var(--hp-text); }
.hp-footer-mini { padding: 14px 24px; }

@media (max-width: 980px) {
  body.hp-body-app .hp-footer { padding-bottom: calc(22px + var(--hp-tabbar-h)); }
}

/* Header 手機版 — ≤640px 隱藏次要連結, ≤420px 品牌縮小 */
@media (max-width: 640px) {
  .hp-header { padding: 10px 16px; }
  .hp-nav-link { display: none; }
  .hp-nav { gap: 4px; }
  .hp-nav a { padding: 8px 10px; font-size: 13.5px; }
}
@media (max-width: 420px) {
  .hp-brand-sub { display: none; }
  .hp-brand { font-size: 14px; gap: 8px; }
  .hp-brand-logo { width: 30px; height: 30px; border-radius: 9px; }
}

/* === 6. Hero (landing) ========================================== */
.hp-hero {
  text-align: center;
  padding: 48px 16px 32px;
  position: relative;
}
.hp-hero h1 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.25;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #ffffff, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-hero h1 span {
  margin: 0 4px;
  background: linear-gradient(135deg, var(--hp-brand-3), var(--hp-brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-hero p {
  color: var(--hp-text-2);
  font-size: 16px;
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.hp-hero-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hp-hero-cta .hp-btn { min-width: 160px; }

.hp-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 桌機固定 3 欄,6 卡剛好 3x2 對稱 */
  gap: 16px;
  max-width: 980px;
  margin: 32px auto 0;
  padding: 0 4px;
}
.hp-feature {
  background: linear-gradient(180deg, var(--hp-surface), var(--hp-surface-2));
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: 22px 20px;
  transition: transform var(--hp-tr), border-color var(--hp-tr), box-shadow var(--hp-tr);
}
.hp-feature:hover {
  transform: translateY(-2px);
  border-color: var(--hp-border-2);
  box-shadow: var(--hp-sh-2);
}
.hp-feature h3 {
  font-size: 16px;
  margin: 12px 0 6px;
  color: var(--hp-text);
  font-weight: 700;
}
.hp-feature p {
  font-size: 13.5px;
  color: var(--hp-text-2);
  margin: 0;
  line-height: 1.65;
}
.hp-feature-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background:
    radial-gradient(18px 18px at 30% 28%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(135deg, var(--hp-brand-soft), rgba(96, 165, 250, .10));
  border: 1px solid var(--hp-border);
  color: var(--hp-brand-3);
}

/* === 7. Auth Card ============================================== */
.hp-card {
  width: min(460px, 94vw);
  margin: 0 auto;
  background: linear-gradient(180deg, var(--hp-surface), var(--hp-surface-2));
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  box-shadow: var(--hp-sh-3);
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.hp-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(420px 180px at 30% 0%, var(--hp-brand-glow), transparent 60%),
    radial-gradient(360px 220px at 90% 10%, rgba(96, 165, 250, .12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hp-card > * { position: relative; z-index: 1; }
.hp-card-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 6px;
  color: var(--hp-text);
}
.hp-card-sub {
  font-size: 14px;
  color: var(--hp-text-2);
  margin: 0 0 22px;
  line-height: 1.55;
}
.hp-card-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hp-border);
  text-align: center;
  font-size: 13px;
  color: var(--hp-text-2);
}

/* === 8. Forms =================================================== */
.hp-form-group { margin-bottom: 14px; }
.hp-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.hp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--hp-text-2);
  margin-bottom: 7px;
}
.hp-input,
.hp-select {
  width: 100%;
  border: 1px solid var(--hp-border);
  background: rgba(0, 0, 0, .25);
  color: var(--hp-text);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--hp-r);
  outline: 0;
  transition: border-color var(--hp-tr), box-shadow var(--hp-tr), background var(--hp-tr);
  min-height: 46px;
  /* 讓瀏覽器原生 dropdown popup 套深色配色 (Chrome/Edge/Firefox 都支援) */
  color-scheme: dark;
}
.hp-select option,
.hp-select optgroup {
  background: var(--hp-surface);
  color: var(--hp-text);
}
.hp-select optgroup {
  color: var(--hp-text-3);
  font-weight: 600;
  font-style: normal;
  padding: 4px 0;
}
.hp-select option:checked {
  background: var(--hp-brand-soft);
  color: var(--hp-text);
}
.hp-input::placeholder { color: var(--hp-text-3); }
.hp-input:focus,
.hp-select:focus {
  border-color: var(--hp-border-focus);
  background: rgba(0, 0, 0, .35);
  box-shadow: 0 0 0 4px var(--hp-brand-soft);
}
.hp-input:disabled { opacity: .55; cursor: not-allowed; }
.hp-input-hint {
  font-size: 12.5px;
  color: var(--hp-text-3);
  margin: 7px 2px 0;
  line-height: 1.55;
}
.hp-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  font-size: 14px;
  color: var(--hp-text-2);
  cursor: pointer;
}
.hp-checkbox input {
  width: 16px; height: 16px;
  accent-color: var(--hp-brand);
}

/* === 9. Buttons ================================================= */
.hp-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--hp-r);
  padding: 12px 18px;
  min-height: 46px;
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  transition: transform var(--hp-tr), filter var(--hp-tr), box-shadow var(--hp-tr), background var(--hp-tr);
  text-decoration: none;
}
.hp-btn::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 48%;
  border-radius: calc(var(--hp-r) - 1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
  pointer-events: none;
  opacity: .55;
}
.hp-btn:hover { filter: brightness(1.06); transform: translateY(-1px); text-decoration: none; }
.hp-btn:active { transform: translateY(0); filter: brightness(.96); }
.hp-btn:disabled, .hp-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none; }
.hp-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--hp-brand-soft), var(--hp-sh-2); }

.hp-btn-primary {
  color: #fff;
  background:
    radial-gradient(18px 18px at 22% 22%, rgba(255, 255, 255, .26), transparent 55%),
    linear-gradient(135deg, var(--hp-brand), var(--hp-brand-2));
  box-shadow: var(--hp-sh-brand);
}
.hp-btn-outline {
  color: var(--hp-text);
  background: rgba(255, 255, 255, .055);
  border: 1px solid var(--hp-border-2);
}
.hp-btn-outline::before { display: none; }
.hp-btn-outline:hover { background: rgba(255, 255, 255, .09); }

.hp-btn-ghost { color: var(--hp-text-2); background: transparent; box-shadow: none; }
.hp-btn-ghost::before { display: none; }
.hp-btn-ghost:hover { color: var(--hp-text); background: var(--hp-surface-3); }

.hp-btn-danger {
  color: #fff;
  background:
    radial-gradient(18px 18px at 22% 22%, rgba(255, 255, 255, .22), transparent 55%),
    linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 8px 22px rgba(239, 68, 68, .28);
}

.hp-btn-oauth {
  font-weight: 700;
  font-size: 14px;
  min-height: 48px;
  padding: 10px 16px;
  gap: 12px;
}
.hp-btn-oauth svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.hp-btn-oauth.line {
  color: #fff;
  background:
    radial-gradient(18px 18px at 22% 22%, rgba(255, 255, 255, .26), transparent 55%),
    linear-gradient(135deg, var(--hp-line), var(--hp-line-2));
  box-shadow: 0 8px 22px rgba(6, 199, 85, .26);
}
.hp-btn-oauth.google { color: var(--hp-text); background: rgba(255, 255, 255, .08); border: 1px solid var(--hp-border-2); }
.hp-btn-oauth.google::before { display: none; }
.hp-btn-oauth.apple {
  color: #fff;
  background:
    radial-gradient(18px 18px at 22% 22%, rgba(255, 255, 255, .14), transparent 55%),
    linear-gradient(135deg, #1c1c1e, #000);
  border: 1px solid rgba(255, 255, 255, .12);
}

.hp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--hp-text-3);
  font-size: 12px;
}
.hp-divider::before, .hp-divider::after { content: ""; flex: 1; height: 1px; background: var(--hp-border); }
.hp-oauth-list { display: flex; flex-direction: column; gap: 10px; }

/* === 10. Alerts ================================================= */
.hp-alert {
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r);
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--hp-surface-3);
  color: var(--hp-text);
}
.hp-alert-error   { border-color: rgba(239, 68, 68, .35); background: linear-gradient(180deg, rgba(239, 68, 68, .14), rgba(239, 68, 68, .04)); }
.hp-alert-success { border-color: rgba(34, 197, 94, .35); background: linear-gradient(180deg, rgba(34, 197, 94, .14), rgba(34, 197, 94, .04)); }
.hp-alert-warn    { border-color: rgba(245, 158, 11, .35); background: linear-gradient(180deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .04)); }
.hp-alert-info    { border-color: rgba(56, 189, 248, .35); background: linear-gradient(180deg, rgba(56, 189, 248, .14), rgba(56, 189, 248, .04)); }

/* === 11. Pills ================================================== */
.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid var(--hp-border);
  background: var(--hp-surface-3);
  color: var(--hp-text-2);
}
.hp-pill-ok    { background: var(--hp-success-soft); border-color: rgba(34, 197, 94, .35);  color: #4ade80; }
.hp-pill-warn  { background: var(--hp-warn-soft);    border-color: rgba(245, 158, 11, .35); color: #fbbf24; }
.hp-pill-error { background: var(--hp-error-soft);   border-color: rgba(239, 68, 68, .35);  color: #f87171; }
.hp-pill-info  { background: var(--hp-info-soft);    border-color: rgba(56, 189, 248, .35); color: #38bdf8; }
.hp-pill-brand { background: var(--hp-brand-soft);   border-color: rgba(37, 99, 235, .35);  color: var(--hp-brand-3); }

/* === 12. 會員區 容器 ============================================ */
.hp-me-wrap {
  display: grid;
  grid-template-columns: 224px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px) { .hp-me-wrap { grid-template-columns: 1fr; gap: 16px; } }

.hp-side-nav {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 76px;
  box-shadow: var(--hp-sh-1);
}
.hp-side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 9px;
  color: var(--hp-text-2);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--hp-tr), color var(--hp-tr);
  white-space: nowrap;
  text-decoration: none;
}
.hp-side-nav a:hover { background: var(--hp-surface-hl); color: var(--hp-text); }
.hp-side-nav a.active {
  color: #fff;
  background:
    radial-gradient(20px 20px at 22% 22%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(135deg, var(--hp-brand), var(--hp-brand-2));
  font-weight: 700;
  box-shadow: var(--hp-sh-brand);
}
.hp-side-nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.hp-side-nav-sep  { height: 1px; background: var(--hp-border); margin: 6px 4px; }
.hp-side-nav-section {
  font-size: 11px;
  font-weight: 700;
  color: var(--hp-text-3);
  padding: 8px 13px 4px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
@media (max-width: 980px) { .hp-side-nav { display: none; } }

/* Mobile bottom tabbar */
.hp-mobile-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--hp-tabbar-h);
  background: rgba(10, 19, 34, .92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--hp-border);
  z-index: 40;
  padding: 6px 4px env(safe-area-inset-bottom, 0px);
}
@media (max-width: 980px) {
  body.hp-body-app .hp-mobile-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); }
}
.hp-mtab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--hp-text-3);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  border-radius: 8px;
  transition: color var(--hp-tr);
}
.hp-mtab svg { width: 22px; height: 22px; opacity: .85; }
.hp-mtab:hover { color: var(--hp-text-2); }
.hp-mtab.active { color: var(--hp-brand-3); }
.hp-mtab.active svg { opacity: 1; }

/* === 13. 會員區 卡片 ============================================ */
.hp-me-hero {
  background:
    radial-gradient(360px 200px at 90% 0%, rgba(96, 165, 250, .22), transparent 60%),
    linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(15, 23, 42, .55));
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: 24px 26px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.hp-me-hero h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: .2px; color: var(--hp-text); }
.hp-me-hero p  { margin: 0; color: var(--hp-text-2); font-size: 14px; }

.hp-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(20px 20px at 30% 28%, rgba(255, 255, 255, .26), transparent 55%),
    linear-gradient(135deg, var(--hp-brand), var(--hp-brand-3));
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--hp-sh-brand);
  position: relative;
  z-index: 1;
}

.hp-me-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: 22px 24px;
  box-shadow: var(--hp-sh-1);
  position: relative;
}
.hp-me-card + .hp-me-card { margin-top: 16px; }
.hp-me-card-title { font-size: 17px; font-weight: 800; letter-spacing: .2px; color: var(--hp-text); margin: 0 0 4px; }
.hp-me-card-sub   { font-size: 13.5px; color: var(--hp-text-2); margin: 0 0 18px; line-height: 1.55; }
.hp-me-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.hp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--hp-border);
}
.hp-row:first-of-type { border-top: 0; padding-top: 0; }
.hp-row-label  { font-size: 12px; color: var(--hp-text-3); letter-spacing: .2px; margin-bottom: 3px; }
.hp-row-value  { font-size: 14px; color: var(--hp-text); word-break: break-word; }
.hp-row-actions { display: flex; gap: 8px; align-items: center; }

/* === 14. KPI Row ================================================ */
.hp-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.hp-kpi {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-top: 3px solid var(--hp-brand);
  border-radius: var(--hp-r);
  padding: 18px 16px;
  text-align: center;
  transition: transform var(--hp-tr), box-shadow var(--hp-tr);
}
.hp-kpi:hover { transform: translateY(-2px); box-shadow: var(--hp-sh-2); }
.hp-kpi-val   { font-size: 28px; font-weight: 800; color: var(--hp-brand-3); line-height: 1.1; margin-bottom: 4px; }
.hp-kpi-label { font-size: 12.5px; color: var(--hp-text-2); font-weight: 500; }
.hp-kpi.k-success { border-top-color: var(--hp-success); }
.hp-kpi.k-success .hp-kpi-val { color: var(--hp-success); }
.hp-kpi.k-mute    { border-top-color: var(--hp-text-3); }
.hp-kpi.k-mute    .hp-kpi-val { color: var(--hp-text-2); }
.hp-kpi.k-warn    { border-top-color: var(--hp-warn); }
.hp-kpi.k-warn    .hp-kpi-val { color: var(--hp-warn); }

/* === 15. Site Cards ============================================= */
.hp-site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.hp-site-card {
  display: block;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-left: 3px solid var(--hp-brand);
  border-radius: var(--hp-r);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--hp-text);
  transition: transform var(--hp-tr), border-color var(--hp-tr), box-shadow var(--hp-tr);
}
.hp-site-card:hover {
  transform: translateY(-2px);
  border-color: var(--hp-brand-3);
  box-shadow: var(--hp-sh-2);
  color: var(--hp-text);
}
.hp-site-card-name  { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--hp-text); }
.hp-site-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-site-stat       { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.hp-site-stat-on      { background: var(--hp-success-soft); color: var(--hp-success); }
.hp-site-stat-off     { background: var(--hp-error-soft);   color: var(--hp-error); }
.hp-site-stat-unavail { background: var(--hp-surface-hl);   color: var(--hp-text-3); }
.hp-site-stat-total   { background: var(--hp-brand-soft);   color: var(--hp-brand-3); }
/* 0 數值的 pill 半透明顯示但不消失,排版一致 */
.hp-site-stat.is-zero { opacity: .35; }

/* === 16. Event List ============================================= */
.hp-event-list { display: flex; flex-direction: column; }
.hp-event-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--hp-border);
}
.hp-event-item:first-child { border-top: 0; padding-top: 0; }
.hp-event-name { font-size: 14px; font-weight: 600; color: var(--hp-text); margin-bottom: 2px; }
.hp-event-meta { font-size: 12px; color: var(--hp-text-3); }
.hp-event-state { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.hp-event-on      { background: var(--hp-success-soft); color: var(--hp-success); }
.hp-event-off     { background: var(--hp-error-soft);   color: var(--hp-error); }
.hp-event-unavail { background: var(--hp-surface-hl);   color: var(--hp-text-3); }
.hp-event-time    { font-size: 11.5px; color: var(--hp-text-3); white-space: nowrap; }

/* === 17. Switch Cards + Toggle ================================== */
.sw-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.sw-search  { flex: 1; min-width: 180px; }

.sw-section { margin-bottom: 28px; }
.sw-section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hp-text-2);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hp-border);
}
.sw-section-hd .sw-cnt { margin-left: auto; font-size: 12px; color: var(--hp-text-3); font-weight: 400; }

.sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.sw-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-left: 3px solid var(--hp-border);
  border-radius: var(--hp-r);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--hp-tr), box-shadow var(--hp-tr);
}
.sw-card:hover { border-color: var(--hp-brand-3); box-shadow: var(--hp-sh-2); }
/* 開啟 = 綠 (有作用提示) */
.sw-card.sw-on      { border-left-color: var(--hp-success); }
.sw-card.sw-on .sw-name { color: var(--hp-text); }

/* 關閉 = 紅 (跟 LINE 通知一致,提醒設備離線) */
.sw-card.sw-off     { border-left-color: var(--hp-error); }
.sw-card.sw-off .sw-name { color: var(--hp-text); }

/* 離線 = 整張灰 + disabled 視覺 (不可按) */
.sw-card.sw-unavail,
.sw-card.sw-unknown {
  border-left-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.025);
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.sw-card.sw-unavail .sw-name,
.sw-card.sw-unknown .sw-name { color: var(--hp-text-3); font-weight: 500; }
.sw-card.sw-unavail:hover,
.sw-card.sw-unknown:hover { border-color: var(--hp-border); box-shadow: none; }
.sw-header { display: flex; align-items: flex-start; gap: 8px; }
.sw-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.sw-on  .sw-dot { background: var(--hp-success); box-shadow: 0 0 8px rgba(34, 197, 94, .6); }
.sw-off .sw-dot { background: var(--hp-error); box-shadow: 0 0 8px rgba(239, 68, 68, .5); }
.sw-unavail .sw-dot,
.sw-unknown .sw-dot { background: rgba(255,255,255,.15); box-shadow: none; }
.sw-name {
  flex: 1;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hp-text);
  line-height: 1.35;
  word-break: break-word;
}
.sw-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sw-meta   { font-size: 11.5px; color: var(--hp-text-3); line-height: 1.4; }

/* iOS-style toggle */
.sw-toggle {
  position: relative;
  display: inline-block;
  width: 44px; height: 26px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.sw-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sw-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .15);
  border-radius: 999px;
  transition: background var(--hp-tr);
}
.sw-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--hp-tr), background var(--hp-tr);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.sw-toggle input:checked + .sw-toggle-track { background: var(--hp-success); }
.sw-toggle input:checked + .sw-toggle-track .sw-toggle-knob { transform: translateX(18px); }
.sw-toggle[data-busy="1"]     { opacity: .6; cursor: wait; }
.sw-toggle[data-disabled="1"] { opacity: .35; cursor: not-allowed; }

/* === 18. Logs Table ============================================= */
.lg-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.lg-wrap {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r);
  overflow: hidden;
  overflow-x: auto;
}
.lg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.lg-table thead { background: rgba(255, 255, 255, .03); }
.lg-table th {
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hp-text-3);
  text-align: center;
  border-bottom: 1px solid var(--hp-border);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.lg-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  vertical-align: middle;
}
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table tr:hover td      { background: rgba(255, 255, 255, .025); }
.lg-time { font-family: var(--hp-font-mono); font-size: 12px; color: var(--hp-text-2); white-space: nowrap; }
.lg-ago  { font-size: 11.5px; color: var(--hp-text-3); white-space: nowrap; }
.lg-name { font-size: 14px; font-weight: 600; color: var(--hp-text); }

.lg-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--hp-text-2);
  flex-wrap: wrap;
}
.lg-pager-btns { display: inline-flex; gap: 6px; }

/* --- 手機卡片視圖(預設隱藏,820px 以下顯示) --- */
.lg-cards { display: none; }
.lg-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--hp-tr), background var(--hp-tr);
}
.lg-card:active { background: rgba(255,255,255,.025); }
.lg-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.lg-card-name {
  font-size: 14.5px; font-weight: 600; color: var(--hp-text);
  line-height: 1.3; word-break: break-all; min-width: 0; flex: 1;
}
.lg-card-meta {
  font-size: 12.5px; color: var(--hp-text-3);
  font-family: var(--hp-font-mono);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.lg-card-time { color: var(--hp-text-2); }
.lg-card-dot  { opacity: .4; }
.lg-card-foot {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

/* === 19. Tab Bar (security hub) ================================= */
.hp-tab-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r);
  margin-bottom: 18px;
  overflow-x: auto;
}
.hp-tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hp-text-2);
  cursor: pointer;
  background: transparent;
  border: 0;
  white-space: nowrap;
  transition: background var(--hp-tr), color var(--hp-tr);
  text-decoration: none;
}
.hp-tab-item:hover { color: var(--hp-text); background: var(--hp-surface-hl); }
.hp-tab-item.active {
  color: #fff;
  background:
    radial-gradient(16px 16px at 22% 22%, rgba(255, 255, 255, .18), transparent 55%),
    linear-gradient(135deg, var(--hp-brand), var(--hp-brand-2));
  box-shadow: var(--hp-sh-1);
}

/* === 20. OAuth row ============================================== */
.hp-oauth-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--hp-border);
}
.hp-oauth-row:first-child { border-top: 0; }
.hp-oauth-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--hp-border);
  flex: 0 0 auto;
}
.hp-oauth-icon.line  { background: linear-gradient(135deg, var(--hp-line), var(--hp-line-2)); color: #fff; border-color: rgba(6, 199, 85, .35); }
.hp-oauth-icon.google { background: #fff; }
.hp-oauth-icon.apple  { background: linear-gradient(135deg, #1c1c1e, #000); color: #fff; border-color: rgba(255, 255, 255, .12); }
.hp-oauth-info-name   { font-size: 14.5px; font-weight: 700; color: var(--hp-text); margin-bottom: 2px; }
.hp-oauth-info-detail { font-size: 12.5px; color: var(--hp-text-3); }

/* === 21. Device Item ============================================ */
.hp-device-item { padding: 14px 0; border-top: 1px solid var(--hp-border); }
.hp-device-item:first-of-type { border-top: 0; padding-top: 0; }
.hp-device-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--hp-text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* === 22. App Download =========================================== */
.hp-app-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.hp-app-platform {
  background: var(--hp-surface-2);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r);
  padding: 18px;
  text-align: center;
}
.hp-app-platform-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; text-align: left; }
.hp-app-platform-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--hp-surface-3);
  color: var(--hp-text);
}
.hp-app-ios .hp-app-platform-icon     { background: rgba(255, 255, 255, .08); }
.hp-app-android .hp-app-platform-icon { background: rgba(34, 197, 94, .14); color: var(--hp-success); }
.hp-app-platform-label { font-size: 14px; font-weight: 700; color: var(--hp-text); }
.hp-app-platform-sub   { font-size: 11.5px; color: var(--hp-text-3); }
.hp-app-qr-wrap {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  margin: 0 auto 12px;
  width: fit-content;
}
.hp-app-qr-wrap img { display: block; }
.hp-app-store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  text-decoration: none;
}
.hp-app-store-apple   { background: #000; color: #fff; }
.hp-app-store-android { background: var(--hp-success); color: #fff; }

/* === 23. Empty state ============================================ */
.hp-empty {
  text-align: center;
  padding: 56px 24px;
  border: 1.5px dashed var(--hp-border);
  border-radius: var(--hp-r-lg);
  color: var(--hp-text-3);
}
.hp-empty-icon { font-size: 44px; opacity: .4; margin-bottom: 10px; }
.hp-empty p    { margin: 6px 0; }

/* === 24. 工具 class ============================================= */
.hp-mt-0  { margin-top: 0 !important; }
.hp-mb-0  { margin-bottom: 0 !important; }
.hp-mb-1  { margin-bottom: 8px !important; }
.hp-mb-2  { margin-bottom: 16px !important; }
.hp-mb-3  { margin-bottom: 24px !important; }
.hp-btn-sm {
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  width: auto !important;
}
.hp-btn-tight { width: auto !important; padding: 12px 18px; }
.hp-btn-row   { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* === 25. RWD =================================================== */
@media (max-width: 820px) {
  .hp-main { padding: 20px 16px 32px; }
  .hp-header { padding: 10px 16px; }
  .hp-brand-sub { display: none; }
  .hp-me-hero { padding: 18px 18px; flex-wrap: wrap; }
  .hp-me-hero h2 { font-size: 18px; }
  .hp-me-card { padding: 18px 18px; }
  .hp-kpi { padding: 14px 12px; }
  .hp-kpi-val { font-size: 24px; }
  .hp-hero { padding: 32px 12px 24px; }
  .hp-features { grid-template-columns: 1fr !important; }
  .lg-table th, .lg-table td { padding: 10px 12px; }
  /* 手機切卡片視圖:隱表格、顯卡片 */
  .lg-wrap  { display: none; }
  .lg-cards { display: flex; flex-direction: column; gap: 10px; }
}
@media (max-width: 540px) {
  .hp-form-row { grid-template-columns: 1fr; }
  .hp-row { grid-template-columns: 1fr; }
  .hp-row-actions { justify-content: flex-end; }
  .hp-oauth-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon info" "btn btn";
    gap: 10px 12px;
  }
  .hp-oauth-row > .hp-oauth-icon { grid-area: icon; }
  .hp-oauth-row > .hp-oauth-info { grid-area: info; }
  .hp-oauth-row > div:last-child { grid-area: btn; }
  .hp-oauth-row > div:last-child .hp-btn { width: 100%; }
  .sw-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* === 26. RWD show/hide utilities (2026-05-17 HA 直連卡用) ======== */
.hp-hide-mobile { display: block; }
.hp-only-mobile { display: none; }
@media (max-width: 640px) {
  .hp-hide-mobile { display: none !important; }
  .hp-only-mobile { display: block !important; }
}

/* HA 直連卡：手機版調整 (QR 隱藏、按鈕全寬、文字置中) */
.hp-cloud-url-box { grid-template-columns: 1fr auto !important; }
@media (max-width: 640px) {
  .hp-cloud-url-box { grid-template-columns: 1fr !important; }
  .hp-cloud-url-actions { flex-direction: column !important; align-items: stretch !important; }
  .hp-cloud-url-actions .hp-btn { width: 100% !important; }
  .hp-cloud-url-actions .hp-btn-sm { min-height: 44px !important; font-size: 14.5px !important; }
}


/* === 26. Modal (PDF export / generic) =========================== */
.hp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: hpFadeIn .15s ease-out;
}
@keyframes hpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hp-modal {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg, 12px);
  width: 100%; max-width: 440px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 32px);
}
.hp-modal-lg { max-width: 920px; }
.hp-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hp-border);
}
.hp-modal-hd h3 { margin: 0; font-size: 16px; color: var(--hp-text); font-weight: 600; }
.hp-modal-close {
  background: transparent; border: 0; color: var(--hp-text-3);
  font-size: 24px; cursor: pointer; line-height: 1;
  padding: 0 6px; border-radius: 6px;
  transition: background var(--hp-tr), color var(--hp-tr);
}
.hp-modal-close:hover { background: var(--hp-surface-hl); color: var(--hp-text); }
.hp-modal-bd { padding: 18px; overflow-y: auto; flex: 1; min-height: 0; }
.hp-modal-ft {
  padding: 12px 18px;
  border-top: 1px solid var(--hp-border);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}

.hp-field { display: flex; flex-direction: column; gap: 6px; }
.hp-field-label { font-size: 13px; color: var(--hp-text-2); font-weight: 600; }
.hp-checkbox-label {
  display: block; cursor: pointer; padding: 8px 0;
  color: var(--hp-text); font-size: 14px; user-select: none;
}
.hp-checkbox-label input[type="checkbox"] {
  margin-right: 8px; vertical-align: middle;
  accent-color: var(--hp-brand);
}

.lg-export-row {
  display: flex; justify-content: flex-end;
  margin-bottom: 10px;
}

@media (max-width: 540px) {
  .hp-modal { max-width: 100%; max-height: calc(100vh - 16px); }
  .hp-modal-ft { justify-content: stretch; }
  .hp-modal-ft .hp-btn { flex: 1; }
  .hp-modal-lg .hp-modal-bd iframe { height: 60vh; }
}


/* === 27. PDF Modal extras =========================== */
.lg-pdf-daterow {
  display: flex; align-items: center; gap: 8px;
}
.lg-pdf-daterow .hp-input { flex: 1; min-width: 0; }
.lg-pdf-arrow {
  color: var(--hp-text-3); font-size: 16px; user-select: none;
}
.hp-field-hint {
  color: var(--hp-text-3); font-size: 12.5px; margin-top: 6px;
}
.hp-field-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
@media (max-width: 540px) {
  .hp-field-row { flex-direction: column; }
}


/* === 28. Date input 客製日曆按鈕 (2026-05-17) ====== */
/* Chrome/Edge/Safari/iOS:把原生小灰圖換成藍色立體按鈕,白色日曆 SVG icon */
.hp-input[type="date"] {
  position: relative;
  padding-right: 8px;  /* 預留按鈕空間 */
  cursor: text;
}
.hp-input[type="date"]::-webkit-calendar-picker-indicator {
  /* 換成自己的白色 calendar SVG + 藍底按鈕 */
  background:
    var(--hp-brand)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>")
    center / 16px 16px
    no-repeat;
  width: 28px; height: 28px;
  margin-left: 8px;
  border-radius: 7px;
  cursor: pointer;
  opacity: 1;  /* 蓋掉預設淺色 */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .25);
  transition: background-color var(--hp-tr), transform .12s ease, box-shadow var(--hp-tr);
}
.hp-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background-color: var(--hp-brand-2);
  box-shadow:
    0 3px 7px rgba(37, 99, 235, .55),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}
.hp-input[type="date"]::-webkit-calendar-picker-indicator:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .20);
}
/* iOS Safari 也需要 */
.hp-input[type="date"]::-webkit-date-and-time-value { text-align: left; }


/* === 29. Sensor Dashboard Card (溫濕度等多指標) === */
.sw-sensor-card {
  border-left-color: var(--hp-brand) !important;  /* 中性藍 */
}
.sw-sensor-card .sw-dot,
.sw-dot.sw-dot-info {
  background: var(--hp-brand);
  box-shadow: 0 0 8px rgba(37, 99, 235, .5);
}
.sw-sensor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 10px 0 6px;
}
.sw-sensor-cell {
  text-align: center;
  padding: 12px 6px 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  transition: background var(--hp-tr), transform var(--hp-tr);
}
.sw-sensor-cell:hover {
  background: rgba(255, 255, 255, .055);
  transform: translateY(-1px);
}
.sw-sensor-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.sw-sensor-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--hp-text);
  font-family: var(--hp-font-mono);
  letter-spacing: -.3px;
  line-height: 1.1;
}
.sw-sensor-unit {
  font-size: 11px;
  color: var(--hp-text-3);
  font-weight: 500;
  font-family: var(--hp-font);
  margin-left: 2px;
}
.sw-sensor-label {
  font-size: 11.5px;
  color: var(--hp-text-2);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: .5px;
}
.sw-sensor-time {
  font-size: 11px;
  color: var(--hp-text-3);
  text-align: right;
  margin-top: 4px;
}

@media (max-width: 540px) {
  .sw-sensor-val  { font-size: 18px; }
  .sw-sensor-icon { font-size: 20px; }
}


/* 分桶分排:同工地內不同類別的卡片分排顯示 (2026-05-17) */
.sw-grid + .sw-grid { margin-top: 14px; }


/* SSE 即時更新動畫:cell 數值變化時短暫亮一下 (2026-05-17) */
.sw-sensor-cell-flash {
  background: rgba(37, 99, 235, .22) !important;
  box-shadow: 0 0 0 1px var(--hp-brand-glow), 0 0 12px var(--hp-brand-soft);
  transition: background .25s ease-out, box-shadow .25s ease-out;
}
.sw-sensor-cell-flash .sw-sensor-num {
  color: var(--hp-brand-3);
  transition: color .25s ease-out;
}


/* 儀表板卡多 metric 欄數變化 (3col=溫濕度,4col=電表) */
.sw-sensor-grid-4col { grid-template-columns: 1fr 1fr 1fr 1fr; }
.sw-sensor-grid-3col { grid-template-columns: 1fr 1fr 1fr; }
.sw-sensor-grid-2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) {
  .sw-sensor-grid-4col { grid-template-columns: 1fr 1fr; }
  .sw-sensor-grid-4col .sw-sensor-cell { padding: 10px 4px 8px; }
}


/* 電表 24h sparkline */
.sw-meter-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--hp-border);
}
.sw-meter-chart {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 8px 10px;
}
.sw-meter-chart-hd {
  font-size: 11px;
  color: var(--hp-text-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.sw-meter-spark {
  width: 100%;
  height: 78px;  /* chart 60 + 底部 18 給時間 label */
  display: block;
}
.sw-meter-chart-meta {
  font-size: 11px;
  color: var(--hp-text-2);
  text-align: right;
  margin-top: 2px;
  font-family: var(--hp-font-mono);
}


/* === 整合儀表板:每個 cell = icon+label + 大數字 + sparkline + range === */
.sw-sensor-card {
  grid-column: 1 / -1;  /* 儀表板卡 (溫濕度/電表) 全部跨整排 */
}
.sw-sensor-card--meter {
  /* meter 卡專屬樣式預留 */
}
.sw-sensor-cell {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  transition: background var(--hp-tr), transform var(--hp-tr), border-color var(--hp-tr);
  min-height: 130px;
  text-align: left;
}
.sw-sensor-cell:hover {
  background: rgba(255,255,255,.055);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.10);
}
.sw-cell-top {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--hp-text-3);
  font-weight: 600; letter-spacing: .3px;
}
.sw-cell-icon { font-size: 16px; line-height: 1; }
.sw-cell-label { color: var(--hp-text-2); }
.sw-cell-val {
  margin: 6px 0 4px;
  font-family: var(--hp-font-mono);
  letter-spacing: -.3px;
  line-height: 1.1;
}
.sw-cell-val .sw-sensor-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--hp-text);
}
.sw-cell-val .sw-sensor-unit {
  font-size: 12px;
  color: var(--hp-text-3);
  font-family: var(--hp-font);
  font-weight: 500;
  margin-left: 3px;
}
.sw-cell-spark {
  width: 100%;
  height: 52px;
  display: block;
  margin: 2px 0 4px;
  opacity: 0.95;
}
.sw-cell-range {
  font-size: 10.5px;
  color: var(--hp-text-3);
  font-family: var(--hp-font-mono);
  margin-top: auto;
  padding-top: 2px;
  text-align: right;
  letter-spacing: .3px;
}

/* 取消舊 .sw-sensor-icon / .sw-sensor-val / .sw-sensor-label (改用 sw-cell-* ) — 留著當 fallback,實際被新 class 覆寫 */

@media (max-width: 820px) {
  .sw-sensor-card--meter { grid-column: span 1; }
  .sw-sensor-grid-4col { grid-template-columns: 1fr 1fr !important; }
  .sw-sensor-cell { min-height: 120px; padding: 10px 12px; }
  .sw-cell-val .sw-sensor-num { font-size: 22px; }
}


/* 儀表板卡離線:暗灰不可用視覺(對齊 switch sw-unavail 設計) */
.sw-sensor-card--offline {
  opacity: .55;
  filter: grayscale(.7);
  cursor: not-allowed;
}
.sw-sensor-card--offline .sw-dot,
.sw-sensor-card--offline .sw-dot-info {
  background: var(--hp-text-3) !important;
  box-shadow: none !important;
}
.sw-sensor-card--offline .sw-name {
  color: var(--hp-text-3);
}


/* 工地卡 button 樣式重設 + active 高亮 (2026-05-17 改可點切換) */
button.hp-site-card {
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.hp-site-card:focus-visible {
  outline: 2px solid var(--hp-brand);
  outline-offset: 2px;
}
.hp-site-card.is-active {
  border-color: var(--hp-brand) !important;
  background: var(--hp-brand-soft);
  box-shadow: 0 0 0 1px var(--hp-brand-glow), 0 6px 20px rgba(37, 99, 235, .25);
}
.hp-site-card.is-active .hp-site-card-name {
  color: var(--hp-brand-3);
}

/* 動態切換 panel cards */
.me-site-panel { padding-top: 4px; }


/* === Landing page intro sections (2026-05-17) === */
.hp-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .25em;
  color: var(--hp-brand-3);
  padding: 6px 14px;
  border: 1px solid rgba(96, 165, 250, .35);
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  margin-bottom: 18px;
}
.hp-hero-slogan {
  margin-top: 28px;
  font-size: 13px;
  color: var(--hp-text-3);
  letter-spacing: .3em;
}

/* 關鍵數字 stats */
.ha-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 28px auto 0;
  padding: 0 4px;
}
.ha-stat {
  background: linear-gradient(180deg, var(--hp-surface), var(--hp-surface-2));
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: 24px 16px;
  text-align: center;
}
.ha-stat-num {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  color: var(--hp-brand-3);
  font-family: var(--hp-font-mono);
  letter-spacing: -.5px;
  line-height: 1.1;
  background: linear-gradient(135deg, #93c5fd, var(--hp-brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ha-stat-label {
  font-size: 13px;
  color: var(--hp-text-3);
  margin-top: 8px;
  letter-spacing: .1em;
}

/* 區塊通用 */
.ha-section {
  max-width: 1080px;
  margin: 80px auto 0;
  padding: 0 16px;
}
.ha-section-head {
  text-align: center;
  margin-bottom: 36px;
}
.ha-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .25em;
  color: var(--hp-brand-3);
  padding-left: 16px;
  position: relative;
  margin-bottom: 12px;
}
.ha-eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--hp-brand);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .18);
}
.ha-section-h {
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 800;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #ffffff 0%, #93c5fd 60%, var(--hp-brand-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ha-section-sub {
  color: var(--hp-text-3);
  font-size: 15px;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* 3-step 流程 */
.ha-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ha-step {
  background: linear-gradient(180deg, var(--hp-surface), var(--hp-surface-2));
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.ha-step::after {
  content: "";
  position: absolute;
  right: -50px; bottom: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .12) 0%, transparent 70%);
  pointer-events: none;
}
.ha-step[data-accent="blue"]::after    { background: radial-gradient(circle, rgba(37, 99, 235, .15) 0%, transparent 70%); }
.ha-step[data-accent="emerald"]::after { background: radial-gradient(circle, rgba(16, 185, 129, .15) 0%, transparent 70%); }
.ha-step[data-accent="amber"]::after   { background: radial-gradient(circle, rgba(245, 158, 11, .15) 0%, transparent 70%); }
.ha-step-no {
  font-size: 36px;
  font-weight: 900;
  font-family: var(--hp-font-mono);
  letter-spacing: -2px;
  margin-bottom: 12px;
  line-height: 1;
}
.ha-step[data-accent="blue"]    .ha-step-no { color: #60a5fa; }
.ha-step[data-accent="emerald"] .ha-step-no { color: #34d399; }
.ha-step[data-accent="amber"]   .ha-step-no { color: #fbbf24; }
.ha-step h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--hp-text);
}
.ha-step p {
  font-size: 14px;
  color: var(--hp-text-2);
  line-height: 1.7;
  margin: 0;
}

/* 預覽 grid */
.ha-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ha-preview {
  background: linear-gradient(180deg, var(--hp-surface), var(--hp-surface-2));
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: 28px 22px;
  text-align: center;
  transition: transform var(--hp-tr), border-color var(--hp-tr);
}
.ha-preview:hover {
  transform: translateY(-3px);
  border-color: var(--hp-brand);
}
.ha-preview-img {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, .3));
}
.ha-preview h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--hp-text);
}
.ha-preview p {
  font-size: 13.5px;
  color: var(--hp-text-3);
  line-height: 1.65;
  margin: 0;
}

/* CTA 漸層卡 */
.ha-cta {
  margin: 80px auto 32px;
  max-width: 1080px;
  padding: 36px 32px;
  border-radius: var(--hp-r-lg);
  background: linear-gradient(135deg, rgba(37, 99, 235, .12) 0%, rgba(139, 92, 246, .10) 100%);
  border: 1px solid rgba(96, 165, 250, .25);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px -10px rgba(37, 99, 235, .25);
}
.ha-cta-text h2 {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--hp-text);
}
.ha-cta-text p {
  font-size: 14px;
  color: var(--hp-text-3);
  margin: 0;
}
.ha-cta-btns {
  display: flex;
  gap: 10px;
}
.ha-cta-btns .hp-btn { width: auto; min-width: 130px; }

/* RWD */
@media (max-width: 820px) {
  .ha-stats        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-steps        { grid-template-columns: 1fr; }
  .ha-preview-grid { grid-template-columns: 1fr; }
  .ha-section      { margin-top: 56px; }
  .ha-cta          { grid-template-columns: 1fr; text-align: center; padding: 28px 20px; }
  .ha-cta-btns     { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .ha-stats { grid-template-columns: 1fr; }
}


/* 預覽卡實圖 */
.ha-preview-img-real {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--hp-r);
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5);
  transition: transform var(--hp-tr);
}
.ha-preview:hover .ha-preview-img-real {
  transform: scale(1.02);
}


/* auth 簡化 brand bar */
.hp-header-mini { background: transparent; border-bottom: 0; padding: 18px 0 4px; }
.hp-header-mini .hp-brand { font-size: 14px; }
.hp-header-mini .hp-brand-logo { width: 28px; height: 28px; }


/* ================================================================
   Landing Page v2 — 2026-05-17 Major Redesign
   ================================================================ */

/* ---- Scroll Reveal ---- */
.ha-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.ha-reveal.ha-visible { opacity: 1; transform: none; }
.ha-rd1{transition-delay:.08s}.ha-rd2{transition-delay:.18s}.ha-rd3{transition-delay:.28s}
.ha-rd4{transition-delay:.38s}.ha-rd5{transition-delay:.48s}.ha-rd6{transition-delay:.58s}
@media(prefers-reduced-motion:reduce){.ha-reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ---- Hero v2 background ---- */
.ha-lv2-hero { position:relative; width:100vw; margin-left:calc(50% - 50vw); padding:0; overflow:hidden; margin-top:-28px; background:#060c1c; min-height:clamp(560px,80vh,780px); display:flex; align-items:center; }
.ha-lv2-hero-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ha-lv2-orb { position:absolute; border-radius:50%; filter:blur(80px); }
.ha-lv2-orb-1 { width:520px;height:420px;background:rgba(37,99,235,.22);left:-100px;top:-80px;animation:ha-orb-float 9s ease-in-out infinite; }
.ha-lv2-orb-2 { width:380px;height:300px;background:rgba(139,92,246,.16);right:-60px;top:30px;animation:ha-orb-float 11s ease-in-out infinite;animation-delay:3s; }
.ha-lv2-orb-3 { width:280px;height:280px;background:rgba(37,99,235,.1);left:42%;bottom:-80px;animation:ha-orb-float 8s ease-in-out infinite;animation-delay:5.5s; }
@keyframes ha-orb-float { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.04)} }
.ha-lv2-grid-pattern { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);background-size:32px 32px; }

/* ---- Hero layout ---- */
.ha-lv2-hero-inner { position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:52px;align-items:center; }
.ha-lv2-h1 { font-size:clamp(30px,5vw,54px);font-weight:900;line-height:1.14;letter-spacing:-.5px;margin:14px 0 20px;background:linear-gradient(135deg,#ffffff 0%,#dbeafe 55%,#93c5fd 100%);-webkit-background-clip:text;background-clip:text;color:transparent; }
.ha-lv2-h1 em { font-style:normal;background:linear-gradient(135deg,#60a5fa,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent; }
.ha-lv2-hero-sub { font-size:16.5px;color:rgba(255,255,255,.7);line-height:1.78;margin:0 0 32px;max-width:540px; }
.ha-lv2-hero-btns { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px; }
.ha-lv2-hero-btns .hp-btn { width:auto;min-width:152px; }
.ha-lv2-trust { display:flex;gap:22px;flex-wrap:wrap; }
.ha-lv2-trust-item { display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.52); }
.ha-lv2-trust-item::before { content:"✓";color:#22c55e;font-weight:800; }

/* ---- Hero visual ---- */
.ha-lv2-hero-visual { position:relative;display:flex;align-items:center;justify-content:center; }
.ha-lv2-hero-img-wrap { position:relative;width:100%; }
.ha-lv2-hero-img { width:100%;height:auto;border-radius:20px;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(37,99,235,.2),0 28px 80px rgba(37,99,235,.28),0 6px 20px rgba(0,0,0,.5);animation:ha-img-float 6s ease-in-out infinite; }
@keyframes ha-img-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
.ha-lv2-hero-glow { position:absolute;inset:-30%;background:radial-gradient(ellipse,rgba(37,99,235,.24),transparent 65%);pointer-events:none;z-index:-1; }
.ha-lv2-float-badge { position:absolute;display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(8,16,30,.9);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.45);backdrop-filter:blur(14px);font-size:13px;font-weight:600;color:var(--hp-text);white-space:nowrap;z-index:2; }
.ha-lv2-float-1 { top:-18px;right:-12px; }
.ha-lv2-float-2 { bottom:24px;left:-20px; }
.ha-float-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.ha-float-dot-on { background:#22c55e;animation:ha-dot-pulse 2s ease-in-out infinite; }
@keyframes ha-dot-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)} }

/* ---- Stats v2 ---- */
.ha-stats-v2 { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px; }
.ha-stat-v2 { background:linear-gradient(135deg,var(--hp-surface) 0%,var(--hp-surface-2) 100%);border:1px solid var(--hp-border);border-radius:var(--hp-r-lg);padding:26px 20px;text-align:center;position:relative;overflow:hidden;transition:border-color .2s,transform .2s; }
.ha-stat-v2:hover { border-color:var(--hp-border-2);transform:translateY(-2px); }
.ha-stat-v2::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--hp-brand-3),transparent);opacity:.6; }
.ha-stat-v2-icon { font-size:22px;margin-bottom:10px; }
.ha-stat-v2-num { font-size:clamp(30px,4.5vw,44px);font-weight:900;font-family:var(--hp-font-mono);letter-spacing:-1px;line-height:1;margin-bottom:8px;background:linear-gradient(135deg,#93c5fd,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent; }
.ha-stat-v2-label { font-size:13px;color:var(--hp-text-3);letter-spacing:.05em;font-weight:500; }

/* ---- What is HA ---- */
.ha-whatisit { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:60px;align-items:center; }
.ha-whatisit-img-wrap { position:relative; }
.ha-whatisit-img { width:100%;height:auto;border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.5); }
.ha-whatisit-glow { position:absolute;inset:-25%;background:radial-gradient(ellipse,rgba(37,99,235,.18),transparent 65%);pointer-events:none;z-index:-1; }
.ha-check-list { list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:12px; }
.ha-check-list li { display:flex;align-items:center;gap:10px;font-size:14.5px;color:rgba(255,255,255,.76);line-height:1.5; }
.ha-check-list li::before { content:"";width:20px;height:20px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }
.ha-text-link { display:inline-flex;align-items:center;gap:6px;color:var(--hp-brand-3);font-weight:600;font-size:14.5px;text-decoration:none;transition:gap var(--hp-tr),color var(--hp-tr); }
.ha-text-link:hover { gap:10px;color:#93c5fd; }

/* ---- Features v2 ---- */
.ha-features-v2 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px; }
.ha-feat-card { background:linear-gradient(160deg,var(--hp-surface) 0%,var(--hp-surface-2) 100%);border:1px solid var(--hp-border);border-radius:var(--hp-r-lg);padding:28px 24px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s,border-color .22s; }
.ha-feat-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ha-c,var(--hp-brand)); }
.ha-feat-card::after { content:'';position:absolute;right:-50px;bottom:-50px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,var(--ha-glow,rgba(37,99,235,.12)) 0%,transparent 70%);pointer-events:none; }
.ha-feat-card:hover { transform:translateY(-5px);border-color:var(--ha-border,rgba(37,99,235,.38));box-shadow:0 18px 44px rgba(0,0,0,.38),0 0 0 1px var(--ha-border,rgba(37,99,235,.2)); }
.ha-feat-card[data-c="blue"]   { --ha-c:#3b82f6;--ha-border:rgba(59,130,246,.38);--ha-glow:rgba(59,130,246,.12);--ha-ic:#60a5fa; }
.ha-feat-card[data-c="emerald"]{ --ha-c:#10b981;--ha-border:rgba(16,185,129,.38);--ha-glow:rgba(16,185,129,.12);--ha-ic:#34d399; }
.ha-feat-card[data-c="amber"]  { --ha-c:#f59e0b;--ha-border:rgba(245,158,11,.38);--ha-glow:rgba(245,158,11,.12);--ha-ic:#fbbf24; }
.ha-feat-card[data-c="violet"] { --ha-c:#8b5cf6;--ha-border:rgba(139,92,246,.38);--ha-glow:rgba(139,92,246,.12);--ha-ic:#a78bfa; }
.ha-feat-card[data-c="cyan"]   { --ha-c:#06b6d4;--ha-border:rgba(6,182,212,.38);--ha-glow:rgba(6,182,212,.12);--ha-ic:#22d3ee; }
.ha-feat-card[data-c="rose"]   { --ha-c:#f43f5e;--ha-border:rgba(244,63,94,.38);--ha-glow:rgba(244,63,94,.12);--ha-ic:#fb7185; }
.ha-feat-icon { width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:var(--ha-ic,var(--hp-brand-3)); }
.ha-feat-title { font-size:17px;font-weight:700;color:var(--hp-text);margin:0; }
.ha-feat-desc  { font-size:13.5px;color:var(--hp-text-2);line-height:1.72;margin:0;flex:1; }
.ha-feat-tag   { font-size:12px;font-weight:600;color:var(--ha-ic,var(--hp-brand-3));opacity:.85; }

/* ---- Steps v2 ---- */
.ha-steps-v2 { display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:center;margin-top:36px; }
.ha-step-v2 { background:linear-gradient(180deg,var(--hp-surface),var(--hp-surface-2));border:1px solid var(--hp-border);border-radius:var(--hp-r-lg);padding:34px 28px;text-align:center; }
.ha-step-arrow { display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2); }
.ha-step-v2-num { width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900;font-family:var(--hp-font-mono);margin:0 auto 18px; }
.ha-step-v2[data-s="1"] .ha-step-v2-num { background:rgba(37,99,235,.18);border:2px solid rgba(37,99,235,.45);color:#60a5fa; }
.ha-step-v2[data-s="2"] .ha-step-v2-num { background:rgba(16,185,129,.18);border:2px solid rgba(16,185,129,.45);color:#34d399; }
.ha-step-v2[data-s="3"] .ha-step-v2-num { background:rgba(245,158,11,.18);border:2px solid rgba(245,158,11,.45);color:#fbbf24; }
.ha-step-v2 h3 { font-size:18px;font-weight:700;margin:0 0 10px;color:var(--hp-text); }
.ha-step-v2 p  { font-size:14px;color:var(--hp-text-2);line-height:1.72;margin:0; }

/* ---- Screenshots ---- */
.ha-screenshots-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px; }
.ha-shot-card { background:linear-gradient(180deg,var(--hp-surface),var(--hp-surface-2));border:1px solid var(--hp-border);border-radius:var(--hp-r-lg);overflow:hidden;transition:transform .22s ease,border-color .22s,box-shadow .22s; }
.ha-shot-card:hover { transform:translateY(-5px);border-color:var(--hp-border-2);box-shadow:0 20px 50px rgba(0,0,0,.42); }
.ha-shot-img { width:100%;aspect-ratio:1;object-fit:cover;display:block;border-bottom:1px solid var(--hp-border); }
.ha-shot-info { padding:18px 20px; }
.ha-shot-title { font-size:16px;font-weight:700;color:var(--hp-text);margin:0 0 6px; }
.ha-shot-desc  { font-size:13px;color:var(--hp-text-3);line-height:1.65;margin:0; }

/* ---- Integrations ---- */
.ha-integrations-row { display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px; }
.ha-integ-badge { display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:10px;font-size:14px;font-weight:600;color:var(--hp-text-2);transition:border-color .15s,background .15s,color .15s; }
.ha-integ-badge:hover { border-color:var(--hp-brand-3);background:var(--hp-brand-soft);color:var(--hp-text); }

/* ---- FAQ ---- */
.ha-faq-list { display:flex;flex-direction:column;gap:10px;max-width:820px;margin:36px auto 0; }
.ha-faq-item { background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-lg);overflow:hidden;transition:border-color .15s; }
.ha-faq-item.is-open { border-color:rgba(96,165,250,.35); }
.ha-faq-q { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;font-size:15.5px;font-weight:700;color:var(--hp-text);cursor:pointer;user-select:none;transition:color .15s; }
.ha-faq-q:hover { color:var(--hp-brand-3); }
.ha-faq-chevron { flex-shrink:0;width:20px;height:20px;color:var(--hp-text-3);transition:transform .25s ease,color .15s; }
.ha-faq-item.is-open .ha-faq-chevron { transform:rotate(180deg);color:var(--hp-brand-3); }
.ha-faq-body { overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.4,0,.2,1); }
.ha-faq-a { padding:16px 22px 20px;font-size:14.5px;color:var(--hp-text-2);line-height:1.78;border-top:1px solid var(--hp-border); }

/* ---- CTA v2 ---- */
.ha-cta-v2 { position:relative;overflow:hidden;border-radius:24px;padding:72px 48px;text-align:center;background:radial-gradient(800px 400px at 50% 110%,rgba(37,99,235,.24),transparent 60%),linear-gradient(135deg,rgba(37,99,235,.14) 0%,rgba(139,92,246,.1) 100%);border:1px solid rgba(96,165,250,.22);box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 28px 70px rgba(37,99,235,.14);margin-bottom:20px; }
.ha-cta-v2::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(96,165,250,.55) 30%,rgba(139,92,246,.45) 70%,transparent); }
.ha-cta-v2-bg { position:absolute;inset:0;background:radial-gradient(320px 220px at 8% 50%,rgba(37,99,235,.12),transparent),radial-gradient(320px 220px at 92% 50%,rgba(139,92,246,.08),transparent);pointer-events:none; }
.ha-cta-v2 h2 { font-size:clamp(24px,4vw,38px);font-weight:900;margin:0 0 14px;background:linear-gradient(135deg,#fff,#93c5fd);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative; }
.ha-cta-v2 p { font-size:16px;color:rgba(255,255,255,.62);max-width:520px;margin:0 auto 36px;line-height:1.75;position:relative; }
.ha-cta-v2-btns { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative; }
.ha-cta-v2-btns .hp-btn { width:auto;min-width:160px; }

/* ---- RWD ---- */
@media(max-width:920px){
  .ha-lv2-hero-inner{grid-template-columns:1fr}.ha-lv2-hero-visual{display:none}.ha-lv2-h1{font-size:clamp(28px,6vw,40px)}
  .ha-whatisit{grid-template-columns:1fr;gap:36px}.ha-whatisit-img-wrap{max-width:420px;margin:0 auto}
  .ha-features-v2{grid-template-columns:repeat(2,1fr)}
  .ha-steps-v2{grid-template-columns:1fr;gap:12px}.ha-step-arrow{display:none}
  .ha-screenshots-grid{grid-template-columns:1fr}.ha-stats-v2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ha-cta-v2{padding:52px 28px}
}
@media(max-width:580px){
  .ha-features-v2{grid-template-columns:1fr}.ha-lv2-hero-btns{flex-direction:column}.ha-lv2-hero-btns .hp-btn{width:100%}
  .ha-cta-v2-btns .hp-btn{min-width:0;flex:1}
}
.hp-nav-link { color:var(--hp-text-2);padding:8px 12px;border-radius:10px;font-size:14px;font-weight:500;text-decoration:none;transition:background var(--hp-tr),color var(--hp-tr); }
.hp-nav-link:hover { color:var(--hp-text);background:var(--hp-surface-3); }

/* ================================================================
   Landing Page v2 — Additional classes (2026-05-17)
   ================================================================ */

/* Hero structure */
.ha-hero-bg-grid { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);background-size:32px 32px;pointer-events:none; }
.ha-hero-orb { position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none; }
.ha-orb-a { width:520px;height:420px;background:rgba(37,99,235,.22);left:-100px;top:-80px;animation:ha-orb-float 9s ease-in-out infinite; }
.ha-orb-b { width:380px;height:300px;background:rgba(139,92,246,.16);right:-60px;top:30px;animation:ha-orb-float 11s ease-in-out infinite;animation-delay:3s; }
@keyframes ha-orb-float { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.04)} }
.ha-hero-body { position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,55%) minmax(0,45%);gap:0;align-items:flex-start;min-height:680px; }
.ha-hero-left { display:flex;flex-direction:column;gap:0;padding:96px 48px 64px clamp(32px,5vw,80px); }
.ha-hero-right { display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;position:relative;background:transparent;align-self:flex-start;max-height:min(760px,95vh); } .ha-hero-right::before { content:'';position:absolute;left:0;top:0;bottom:0;width:100px;background:linear-gradient(to right,#07112b 0%,rgba(7,17,43,0) 100%);z-index:3;pointer-events:none; width:180px; }
.ha-hero-eyebrow { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(37,99,235,.18);border:1px solid rgba(96,165,250,.28);font-size:12px;font-weight:700;letter-spacing:.12em;color:#93c5fd;margin-bottom:14px;width:fit-content; }
.ha-hero-title { font-size:clamp(36px,5.8vw,68px);font-weight:900;line-height:1.1;letter-spacing:-.5px;margin:0 0 20px;color:var(--hp-text); }
.ha-hero-title span { background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent; }
.ha-hero-desc { font-size:16px;color:var(--hp-text-2);line-height:1.8;margin:0 0 28px;max-width:520px; }
.ha-hero-cta { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px; }
.ha-hero-cta .hp-btn { width:auto;min-width:144px; }
.ha-hero-badges { display:flex;gap:10px;flex-wrap:wrap; }
.ha-badge { display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(8,16,30,.75);border:1px solid rgba(255,255,255,.1);border-radius:999px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.72);backdrop-filter:blur(8px); }
.ha-badge-float { /* no float animation */ }
.ha-badge-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.ha-badge-dot-green { background:#22c55e;animation:ha-dot-pulse 2s ease-in-out infinite; }
.ha-badge-dot-blue  { background:#3b82f6; }
.ha-badge-dot-amber { background:#f59e0b; }

/* Hero image */
.ha-hero-img-wrap { position:relative;width:100%;display:block; }
@keyframes ha-img-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
.ha-hero-img { width:100%;height:auto;max-height:min(760px,95vh);object-fit:contain;border-radius:0;border:none;box-shadow:0 0 120px rgba(37,99,235,.25);display:block; }
.ha-hero-stat-bubble { position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 18px;background:rgba(8,16,30,.9);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.5);backdrop-filter:blur(14px);z-index:2;min-width:88px; }
.ha-bubble-a { top:22%;right:22%; }
.ha-bubble-b { bottom:22%;right:22%;left:auto; }
.ha-bubble-num { font-size:16px;font-weight:800;color:var(--hp-text);line-height:1; }
.ha-bubble-lbl { font-size:11px;color:var(--hp-text-3);margin-top:3px;white-space:nowrap; }

/* Stats v2 unit */
.ha-stat-v2-unit { font-size:clamp(20px,2.5vw,28px);font-weight:700; }

/* Section headings */
.ha-section-hd { text-align:center;margin-bottom:8px; }
.ha-eyebrow-v2 { display:inline-block;padding:5px 14px;border-radius:999px;background:rgba(37,99,235,.15);border:1px solid rgba(96,165,250,.25);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#93c5fd;margin-bottom:14px; }
.ha-h2 { font-size:clamp(22px,3.5vw,34px);font-weight:900;margin:0 0 12px;background:linear-gradient(135deg,#ffffff,#dbeafe);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.25; }
.ha-h2-sub { font-size:15px;color:var(--hp-text-3);max-width:560px;margin:0 auto;line-height:1.75; }

/* Section wrappers */
.ha-features-v2-wrap,.ha-steps-v2-wrap,.ha-screenshots-wrap,.ha-faq-wrap,.ha-integrations-wrap { margin-top:80px; }
.ha-whatisit { margin-top:80px; }

/* What is HA */
.ha-whatisit-img { width:100%;height:auto;border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.5); }
.ha-whatisit-text { display:flex;flex-direction:column;gap:0; }
.ha-whatisit-text p { font-size:15px;color:var(--hp-text-2);line-height:1.8;margin:0 0 10px; }
.ha-check-list { list-style:none;padding:0;margin:8px 0 22px;display:flex;flex-direction:column;gap:10px; }
.ha-check-list li { display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--hp-text-2);line-height:1.6; }
.ha-check { color:#22c55e;font-size:16px;font-weight:800;flex-shrink:0;margin-top:1px; }

/* Feature card image */
.ha-feat-img { width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.06);margin-top:8px; }
.ha-feat-card h3 { font-size:17px;font-weight:700;color:var(--hp-text);margin:0; }
.ha-feat-card p  { font-size:13.5px;color:var(--hp-text-2);line-height:1.72;margin:0;flex:1; }

/* Steps v2 number */
.ha-step-v2-no { font-size:40px;font-weight:900;font-family:var(--hp-font-mono);line-height:1;margin-bottom:14px;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent; }
.ha-step-v2 h3 { font-size:18px;font-weight:700;color:var(--hp-text);margin:0 0 8px; }
.ha-step-v2 p  { font-size:14px;color:var(--hp-text-2);line-height:1.72;margin:0; }
.ha-step-arrow { display:flex;align-items:center;justify-content:center;opacity:.35; }

/* Screenshots */
.ha-shot-card img { width:100%;aspect-ratio:1;object-fit:cover;display:block;border-bottom:1px solid var(--hp-border); }
.ha-shot-info { padding:18px 20px; }
.ha-shot-info h4 { font-size:16px;font-weight:700;color:var(--hp-text);margin:0 0 6px; }
.ha-shot-info p  { font-size:13px;color:var(--hp-text-3);line-height:1.65;margin:0; }

/* Integrations */
.ha-integrations-label { text-align:center;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--hp-text-3);text-transform:uppercase;margin-bottom:18px; }
.ha-int-badge { display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:10px;font-size:13.5px;font-weight:600;color:var(--hp-text-2);transition:border-color .15s,background .15s,color .15s;white-space:nowrap; }
.ha-int-badge:hover { border-color:rgba(96,165,250,.45);background:rgba(37,99,235,.08);color:var(--hp-text); }

/* FAQ */
.ha-faq-q { width:100%;background:none;border:none;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;font-size:15.5px;font-weight:700;color:var(--hp-text);cursor:pointer;user-select:none;transition:color .15s; }
.ha-faq-q:hover { color:var(--hp-brand-3); }
.ha-faq-arrow { flex-shrink:0;transition:transform .25s ease,color .15s;color:var(--hp-text-3); }
.ha-faq-item.open .ha-faq-arrow { transform:rotate(180deg);color:var(--hp-brand-3); }
.ha-faq-item.open { border-color:rgba(96,165,250,.35); }
.ha-faq-a { overflow:hidden;max-height:0;padding:0;font-size:14.5px;color:var(--hp-text-2);line-height:1.78;border-top:0 solid var(--hp-border);transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .35s,border-top-width .35s; }
.ha-faq-item.open .ha-faq-a { max-height:300px;padding:14px 22px 20px;border-top-width:1px; }
.ha-faq-more { text-align:center;margin-top:28px; }

/* CTA v2 orbs */
.ha-cta-v2-orb { position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none; }
.ha-cta-orb-a { width:360px;height:360px;background:rgba(37,99,235,.22);left:-100px;top:-80px; }
.ha-cta-orb-b { width:280px;height:280px;background:rgba(139,92,246,.16);right:-60px;bottom:-60px; }
.ha-cta-v2-title { font-size:clamp(24px,4vw,38px);font-weight:900;margin:0 0 14px;background:linear-gradient(135deg,#fff,#93c5fd);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative; }
.ha-cta-v2-sub { font-size:16px;color:rgba(255,255,255,.62);max-width:500px;margin:0 auto 36px;line-height:1.75;position:relative; }
.ha-cta-v2-btns { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative; }
.ha-cta-v2-btns .hp-btn { width:auto;min-width:160px; }

/* RWD additions */
@media(max-width:920px){
  .ha-hero-body { grid-template-columns:1fr;min-height:auto; }
  .ha-hero-left { padding:48px 24px 48px 24px; } .ha-hero-right { display:none; }
  .ha-whatisit { grid-template-columns:1fr;gap:36px; }
  .ha-whatisit-img { max-width:420px;margin:0 auto;display:block; }
}
@media(max-width:580px){
  .ha-hero-cta { flex-direction:column; }
  .ha-hero-cta .hp-btn { width:100%; }
  .ha-hero-badges { gap:8px; }
  .ha-steps-v2 { grid-template-columns:1fr; }
  .ha-step-arrow { display:none; }
  .ha-screenshots-grid { grid-template-columns:1fr; }
  .ha-features-v2 { grid-template-columns:1fr; }
}

/* ---- Sub-page shared ---- */
.ha-page-hero { text-align:center;padding:56px 0 40px; }
.ha-page-hero .hp-btn { width:auto;min-width:160px;margin-top:8px; }

/* ---- Feature detail rows ---- */
.ha-feat-detail { display:grid;grid-template-columns:80px 1fr;gap:28px;align-items:flex-start;padding:36px 40px;background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:var(--hp-r-lg);margin-top:20px;transition:border-color .2s; }
.ha-feat-detail:hover { border-color:var(--hp-border-2); }
.ha-feat-detail-icon { width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:var(--fg,rgba(37,99,235,.12));border:1px solid rgba(255,255,255,.08);color:var(--fc,#60a5fa);flex-shrink:0; }
.ha-feat-detail-body h2 { font-size:20px;font-weight:700;color:var(--hp-text);margin:0 0 10px; }
.ha-feat-detail-body > p { font-size:14.5px;color:var(--hp-text-2);line-height:1.8;margin:0 0 14px; }

/* ---- FAQ page categories ---- */
.ha-faq-page { margin-top:48px; }
.ha-faq-cat-title { font-size:18px;font-weight:700;color:var(--hp-text-2);margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--hp-border); }

@media(max-width:620px){
  .ha-feat-detail { grid-template-columns:1fr;padding:24px 20px;gap:16px; }
  .ha-feat-detail-icon { width:52px;height:52px; }
}


/* ============================================================
   Landing v3 Full-width redesign (2026-05-18)
   ============================================================ */

/* Hero: background image + overlay */
.ha-hero-bg-img {
  position:absolute;inset:0;
  background:url('/ha/assets/img/landing/hero-wide.png') center 35% / cover no-repeat;
  opacity:0.48;pointer-events:none;
}
.ha-hero-bg-overlay {
  position:absolute;inset:0;
  background:linear-gradient(108deg,
    rgba(5,11,26,0.97) 0%,
    rgba(5,11,26,0.85) 28%,
    rgba(5,11,26,0.52) 55%,
    rgba(5,11,26,0.65) 100%);
  pointer-events:none;
}
.ha-hero-content {
  position:relative;z-index:2;
  max-width:720px;
  padding:108px clamp(32px,5vw,80px) 108px;
}
.ha-hero-slogan {
  font-size:13px;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.42);margin:0 0 28px;
}

/* Stats: full-width, generous padding */
.ha-stats-v2 {
  width:100%;margin-top:0;
  padding:60px clamp(24px,5%,80px);
  gap:20px;
}

/* whatisit: wider centered max-width */
.ha-whatisit {
  margin-top:0;padding:80px clamp(24px,5%,80px);
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;align-items:center;
  box-sizing:border-box;
}
.ha-whatisit-text { max-width:600px; }

/* Features: full-width */
.ha-features-v2-wrap {
  margin-top:0;padding:80px clamp(24px,5%,80px);
}
.ha-features-v2-wrap .ha-section-hd { max-width:960px;margin:0 auto 40px; }
.ha-features-v2 { max-width:1400px;margin:0 auto;gap:20px; }

/* Steps: full-width */
.ha-steps-v2-wrap {
  margin-top:0;padding:80px clamp(24px,5%,80px);
}
.ha-steps-v2-wrap .ha-section-hd { max-width:960px;margin:0 auto 40px; }
.ha-steps-v2 { max-width:1200px;margin:0 auto; }

/* Screenshots: full-width */
.ha-screenshots-wrap {
  margin-top:0;padding:80px clamp(24px,5%,80px);
}
.ha-screenshots-wrap .ha-section-hd { max-width:960px;margin:0 auto 40px; }
.ha-screenshots-grid { max-width:1400px;margin:0 auto;gap:20px; }

/* Integrations: full-width */
.ha-integrations-wrap {
  margin-top:0;padding:60px clamp(24px,5%,80px);
}
.ha-integrations-wrap .ha-section-hd { max-width:960px;margin:0 auto 40px; }
.ha-integrations-grid { max-width:1200px;margin:0 auto; }

/* FAQ: full-width */
.ha-faq-wrap {
  margin-top:0;padding:80px clamp(24px,5%,80px);
}
.ha-faq-wrap .ha-section-hd { max-width:960px;margin:0 auto 40px; }
.ha-faq { max-width:900px;margin:0 auto; }

/* CTA */
.ha-cta-v2 { margin-top:80px; }

/* Mobile */
@media(max-width:920px){
  .ha-hero-content { padding:80px 24px 80px; }
  .ha-stats-v2 { padding:40px 24px; }
  .ha-whatisit { padding:60px 24px;grid-template-columns:1fr;gap:40px; }
  .ha-features-v2-wrap,.ha-steps-v2-wrap,.ha-screenshots-wrap,
  .ha-integrations-wrap,.ha-faq-wrap { padding:60px 24px; }
}
@media(max-width:580px){
  .ha-hero-content { padding:64px 20px 64px; }
  .ha-stats-v2 { padding:32px 20px; }
  .ha-whatisit { padding:40px 20px; }
  .ha-features-v2-wrap,.ha-steps-v2-wrap,.ha-screenshots-wrap,
  .ha-integrations-wrap,.ha-faq-wrap { padding:48px 20px; }
}


/* ================================================================
   Hero v3 - split layout + browser mockup (2026-05-18)
   ================================================================ */
.ha-hero-inner {
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center;
  width:100%;max-width:1440px;margin:0 auto;
  padding:108px clamp(32px,5vw,80px) 88px;
}
.ha-hero-text { display:flex;flex-direction:column;gap:22px; }
.ha-hero-title {
  font-size:clamp(52px,6.5vw,92px)!important;
  font-weight:900!important;line-height:1.06!important;
  letter-spacing:-0.025em!important;color:#fff!important;margin:0!important;
}
.ha-title-accent {
  background:linear-gradient(138deg,#60a5fa 0%,#a78bfa 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ha-hero-desc {
  font-size:17px!important;line-height:1.68!important;
  color:rgba(255,255,255,.72)!important;max-width:460px;margin:0!important;
}
.ha-hero-mockup {
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
}
.ha-browser-frame {
  width:100%;border-radius:12px;overflow:hidden;
  background:#0d1829;
  border:1px solid rgba(37,99,235,.35);
  box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px rgba(37,99,235,.2),0 0 80px rgba(37,99,235,.1);
  transform:perspective(1200px) rotateY(-9deg) rotateX(4deg);
  transform-origin:left center;
  animation:ha-browser-float 7s ease-in-out infinite;
}
.ha-browser-chrome {
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;background:#111827;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ha-browser-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.ha-browser-dot:nth-child(1){background:#ef4444;}
.ha-browser-dot:nth-child(2){background:#f59e0b;}
.ha-browser-dot:nth-child(3){background:#22c55e;}
.ha-browser-url {
  margin-left:8px;flex:1;
  font-size:11px;color:rgba(255,255,255,.38);
  font-family:ui-monospace,monospace;
  background:rgba(255,255,255,.05);
  padding:3px 10px;border-radius:4px;
}
.ha-browser-frame img { width:100%;display:block; }
.ha-phone-notif {
  position:absolute;bottom:-36px;right:-24px;
  width:42%;z-index:4;
  animation:ha-phone-float 5.5s ease-in-out infinite;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.6));
}
.ha-phone-notif img { width:100%;display:block; }
@keyframes ha-browser-float {
  0%,100%{transform:perspective(1200px) rotateY(-9deg) rotateX(4deg) translateY(0);}
  50%    {transform:perspective(1200px) rotateY(-9deg) rotateX(4deg) translateY(-14px);}
}
@keyframes ha-phone-float {
  0%,100%{transform:translateY(0) rotate(-5deg);}
  50%    {transform:translateY(-10px) rotate(-5deg);}
}
@media(max-width:960px){
  .ha-hero-inner{grid-template-columns:minmax(0,1fr);padding:80px clamp(24px,5vw,60px) 60px;}
  .ha-hero-mockup{display:none;}
}
@media(max-width:580px){
  .ha-hero-inner{padding:60px 20px 48px;}
  .ha-hero-title{font-size:52px!important;}
}

/* ================================================================
   Auth pages (login / register / forgot) — v2 2026-05-18
   Split-screen: left brand panel + right form panel
   ================================================================ */
body.hp-body-auth .hp-header-mini{display:none!important;}
body.hp-body-auth .hp-footer-mini{display:none!important;}
body.hp-body-auth .hp-page{height:100vh;overflow:hidden;display:flex;flex-direction:column;}
body.hp-body-auth .hp-main{flex:1;display:flex;padding:0!important;max-width:none!important;overflow:hidden;height:100%;}

/* ── Split container ── */
.hp-auth-split{display:flex;width:100%;min-height:100%;}

/* ── Left brand panel ── */
.hp-auth-brand{
  flex:1;min-width:0;position:relative;
  display:flex;align-items:center;justify-content:flex-start;
  padding:60px clamp(48px,6vw,100px);overflow:hidden;background:#060c1c;
}
.hp-auth-brand-bg{
  position:absolute;inset:0;
  background:url(/ha/assets/img/landing/hero-wide.png) center 35%/cover no-repeat;
  opacity:.28;
}
.hp-auth-brand-ov{
  position:absolute;inset:0;
  background:linear-gradient(128deg,rgba(4,9,22,.97) 0%,rgba(4,9,22,.82) 52%,rgba(37,99,235,.08) 100%);
}
.hp-auth-brand-body{position:relative;z-index:1;max-width:480px;}
.hp-auth-brand-logo{display:flex;align-items:center;gap:14px;margin-bottom:52px;}
.hp-auth-brand-name{font-size:16px;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.25;}
.hp-auth-brand-name small{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,.38);letter-spacing:.08em;margin-top:3px;text-transform:uppercase;}
.hp-auth-brand h2{
  font-size:clamp(36px,3.8vw,58px);font-weight:900;line-height:1.1;
  color:#fff;margin:0 0 16px;letter-spacing:-0.028em;
}
.hp-auth-brand h2 span{
  background:linear-gradient(138deg,#60a5fa,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hp-auth-brand-sub{font-size:15px;color:rgba(255,255,255,.58);line-height:1.7;margin:0 0 36px;}
.hp-auth-brand-feats{display:flex;flex-direction:column;gap:14px;margin-bottom:44px;}
.hp-auth-feat{display:flex;align-items:center;gap:12px;font-size:13.5px;color:rgba(255,255,255,.75);}
.hp-auth-feat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* stats row */
.hp-auth-brand-stats{
  display:flex;align-items:center;gap:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:16px 20px;
}
.hp-auth-bstat{display:flex;flex-direction:column;align-items:center;flex:1;gap:4px;}
.hp-auth-bstat-n{font-size:22px;font-weight:800;color:#fff;line-height:1;}
.hp-auth-bstat-n sup{font-size:12px;font-weight:600;color:#60a5fa;vertical-align:super;}
.hp-auth-bstat-l{font-size:11px;color:rgba(255,255,255,.42);letter-spacing:.04em;}
.hp-auth-bstat-sep{width:1px;height:36px;background:rgba(255,255,255,.1);flex-shrink:0;margin:0 8px;}

/* ── Right form panel ── */
.hp-auth-form{
  width:500px;flex-shrink:0;
  background:linear-gradient(180deg,#070f20 0%,#0a1628 100%);
  border-left:1px solid rgba(37,99,235,.15);
  display:flex;align-items:center;justify-content:center;
  padding:48px 40px;overflow-y:auto;
}
.hp-auth-inner{width:100%;max-width:380px;}

/* mobile logo (hidden on desktop) */
.hp-auth-mobile-logo{
  display:none;align-items:center;gap:10px;margin-bottom:28px;
  font-size:15px;font-weight:700;color:#fff;
}
.hp-auth-mobile-logo small{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,.4);margin-top:2px;}
.hp-auth-h1{font-size:26px;font-weight:800;color:#fff;margin:0 0 6px;letter-spacing:-.01em;}
.hp-auth-desc{font-size:14px;color:rgba(255,255,255,.48);margin:0 0 24px;}

/* OAuth horizontal row */
.hp-auth-oauth-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px;}
.hp-auth-oauth-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:46px;border-radius:12px;font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:opacity .15s,transform .12s,box-shadow .15s;
  white-space:nowrap;
}
.hp-auth-oauth-btn:hover{opacity:.88;transform:translateY(-1px);}
.hp-aob-line{
  color:#fff;
  background:linear-gradient(135deg,#06c755,#1ed760);
  box-shadow:0 4px 14px rgba(6,199,85,.28);
}
.hp-aob-google{
  color:#1f2937;background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  border-color:rgba(0,0,0,.06);
}
.hp-aob-apple{
  color:#fff;
  background:linear-gradient(135deg,#1c1c1e,#000);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* divider */
.hp-auth-divider{
  display:flex;align-items:center;gap:12px;
  font-size:12px;color:rgba(255,255,255,.3);margin:20px 0;
}
.hp-auth-divider::before,.hp-auth-divider::after{content:;flex:1;height:1px;background:rgba(255,255,255,.08);}

/* footer */
.hp-auth-foot{
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);
  text-align:center;font-size:13px;color:rgba(255,255,255,.38);
}
.hp-auth-foot a{color:#60a5fa;}

/* ── Responsive ── */
@media(max-width:900px){
  .hp-auth-brand{padding:48px clamp(32px,5vw,60px);}
  .hp-auth-form{width:440px;padding:40px 32px;}
}
@media(max-width:760px){
  .hp-auth-brand{display:none;}
  .hp-auth-form{width:100%;border-left:none;padding:48px 24px;justify-content:flex-start;padding-top:56px;}
  body.hp-body-auth .hp-main{overflow-y:auto;height:auto;}
  body.hp-body-auth .hp-page{height:auto;overflow:auto;}
  .hp-auth-inner{max-width:420px;margin:0 auto;}
  .hp-auth-mobile-logo{display:flex;}
}
@media(max-width:420px){
  .hp-auth-oauth-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hp-auth-oauth-btn{font-size:13px;gap:6px;height:44px;}
  .hp-auth-form{padding:36px 16px;}
}

/* animation slow-down */
.ha-browser-frame{animation-duration:12s!important;}
@keyframes ha-browser-float{
  0%,100%{transform:perspective(1200px) rotateY(-9deg) rotateX(4deg) translateY(0);}
  50%    {transform:perspective(1200px) rotateY(-9deg) rotateX(4deg) translateY(-8px);}
}
.ha-phone-notif{animation-duration:9s!important;}
.ha-hero-title .ha-title-accent:last-child{white-space:nowrap;}
@keyframes ha-phone-float {
  0%,100%{transform:translateY(0) rotate(-5deg);}
  50%    {transform:translateY(-6px) rotate(-5deg);}
}

/* ====== Inquiry Modal ====== */
.ha-modal-overlay{position:fixed;inset:0;z-index:9900;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s;}
.ha-modal-overlay.open{opacity:1;pointer-events:auto;}
.ha-modal{position:relative;background:#0d1829;border:1px solid rgba(37,99,235,.28);border-radius:20px;width:min(580px,92vw);max-height:90vh;overflow-y:auto;padding:40px 36px;box-shadow:0 40px 100px rgba(0,0,0,.8);}
.ha-modal-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:4px;}
.ha-modal-sub{color:#94a3b8;font-size:13.5px;margin-bottom:26px;line-height:1.5;}
.ha-modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:#64748b;cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.ha-modal-close:hover{background:rgba(255,255,255,.08);color:#fff;}
.ha-modal-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.ha-modal-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.ha-modal-label{color:#cbd5e1;font-size:13px;font-weight:500;}
.ha-modal-label .req{color:#60a5fa;margin-left:2px;}
.ha-modal-input,.ha-modal-textarea{background:#060e1e;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;color:#f1f5f9;font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%;box-sizing:border-box;}
.ha-modal-input::placeholder,.ha-modal-textarea::placeholder{color:#334155;}
.ha-modal-input:focus,.ha-modal-textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.2);}
.ha-modal-input.fmt-ok{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.15);}
.ha-modal-input.fmt-err{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18);}
.ha-modal-textarea{resize:vertical;min-height:96px;font-family:inherit;}
.ha-modal-actions{display:flex;gap:12px;margin-top:20px;}
.ha-modal-err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:10px 14px;color:#fca5a5;font-size:13.5px;margin-top:4px;}
.ha-modal-success{text-align:center;padding:24px 0;}
.ha-modal-success-icon{width:64px;height:64px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
@media(max-width:600px){.ha-modal{padding:28px 20px;}.ha-modal-row{grid-template-columns:minmax(0,1fr);}.ha-modal-actions{flex-direction:column;}}

/* narrow content column for form-only pages */
.hp-me-narrow{max-width:680px;}
.ha-modal-actions .hp-btn{flex:1;}