/* ============================================================
 * HabitPress — subscriber frontend (warm natural theme)
 * Everything scoped under #hp-app-root so it can't fight the theme.
 * ============================================================ */

/* Bundled brand font (variable weight 200–1000, SIL OFL — see assets/fonts/OFL.txt).
 * Registered under a private family name so no theme's own "Nunito" (possibly a
 * different cut or weight range) can hijack the app's typography. Served from
 * this plugin, so rendering is identical on every site and nothing is fetched
 * from third parties. */
@font-face {
  font-family: 'HabitPress Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'HabitPress Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

#hp-app-root {
  --bg: #fafdf5 !important;
  --card: #ffffff !important;
  --primary: #3d7a2e !important;
  --primary-d: #2f5f23 !important;
  --p-light: #f0fdf4 !important;
  --accent: #f97316 !important;
  --water: #0ea5e9 !important;
  --w-light: #e0f2fe !important;
  --sleep: #6366f1 !important;
  --s-light: #ede9fe !important;
  --muted: #f3f9f0 !important;
  --muted-fg: #6b8a6b !important;
  --fg: #1c3620 !important;
  --line: rgba(61, 122, 46, 0.15) !important;
  --line-soft: rgba(61, 122, 46, 0.08) !important;
  --ring-track: rgba(61, 122, 46, 0.12) !important;
  --red: #ef4444 !important;
  --sans: 'HabitPress Nunito', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --bn: 'Hind Siliguri', var(--sans) !important;

  display: block !important;
  font-family: var(--sans) !important;
  color: var(--fg) !important;
  background: var(--bg) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -webkit-text-size-adjust: 100% !important;
  text-align: left !important;
  /* full-bleed regardless of theme container */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  min-height: 100vh !important;
  overflow-x: clip !important;
}

#hp-app-root *, #hp-app-root *::before, #hp-app-root *::after { box-sizing: border-box !important; }
/* Heading/paragraph resets: margin and line-height stay NON-important on
   purpose. The #id specificity alone already beats any theme rule, while the
   app's own spacing — `.hp-auth h1 { margin-bottom: 8px !important }`, the
   inline style="margin-bottom:…" the JS renders — keeps working. (With
   !important these resets crushed all of the app's own title/subtitle
   spacing, which is exactly what "squished text" reports came from.) */
#hp-app-root h1, #hp-app-root h2, #hp-app-root h3, #hp-app-root h4, #hp-app-root h5, #hp-app-root h6 { margin: 0; padding: 0; line-height: 1.25; font-family: inherit !important; font-weight: 800 !important; color: var(--fg) !important; letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; }
#hp-app-root p { margin: 0; padding: 0; line-height: 1.55; font-family: inherit !important; letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; }
/* Base resets: keep border/background/color NON-important here so the .hp-*
   component classes (which use !important) and inline colours can win.
   The id-specificity of this selector would otherwise beat every component. */
#hp-app-root button { font-family: inherit !important; cursor: pointer; border: none; background: none; color: inherit; line-height: 1.4; letter-spacing: normal; text-transform: none; }
#hp-app-root a { color: inherit; text-decoration: none !important; }
#hp-app-root input, #hp-app-root select, #hp-app-root textarea { font-family: inherit !important; font-size: 15px !important; line-height: 1.4; letter-spacing: normal; }
#hp-app-root svg { display: block !important; }

/* ---- Boot ---- */
.hp-boot { min-height: 60vh !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; color: var(--muted-fg) !important; font-weight: 600 !important; }
.hp-boot-leaf { font-size: 40px !important; animation: hp-pulse 1.4s ease-in-out infinite !important; }
@keyframes hp-pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }

/* ============================================================
 * Auth page (login / signup) + gate + signed-in cards
 * ============================================================ */
.hp-auth { min-height: 100vh !important; display: flex !important; }
.hp-auth-form { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px 24px !important; position: relative !important; }
.hp-auth-inner { width: 100% !important; max-width: 388px !important; }
.hp-auth-brand { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 30px !important; }
.hp-auth-brand .mark { width: 38px !important; height: 38px !important; border-radius: 12px !important; background: var(--primary) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.hp-auth-brand .mark svg { width: 20px !important; height: 20px !important; }
.hp-auth-brand b { font-size: 17px !important; display: block !important; line-height: 1 !important; }
.hp-auth-brand small { font-size: 11px !important; color: var(--muted-fg) !important; }
.hp-auth h1 { font-size: 26px !important; margin-bottom: 6px !important; }
.hp-auth-sub { color: var(--muted-fg) !important; font-size: 14px !important; margin-bottom: 22px !important; }
.hp-auth-tabs { display: flex !important; gap: 4px !important; padding: 4px !important; border-radius: 14px !important; background: #eef6eb !important; margin-bottom: 22px !important; }
.hp-auth-tabs button { flex: 1 !important; padding: 10px !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important; color: var(--muted-fg) !important; transition: all 0.18s !important; }
.hp-auth-tabs button.on { background: var(--primary) !important; color: #fff !important; }
.hp-field { margin-bottom: 14px !important; }
.hp-field label { display: block !important; font-size: 12px !important; font-weight: 700 !important; color: var(--muted-fg) !important; margin-bottom: 6px !important; }
.hp-input { width: 100% !important; border: 1.5px solid #d1e8ca !important; background: #fff !important; border-radius: 12px !important; padding: 12px 14px !important; color: var(--fg) !important; outline: none !important; transition: border-color 0.18s !important; }
.hp-input:focus { border-color: var(--primary) !important; }
.hp-auth-msg { display: flex !important; align-items: center !important; gap: 8px !important; padding: 11px 13px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 14px !important; }
.hp-auth-msg.err { background: #fef2f2 !important; color: var(--red) !important; }
.hp-auth-msg.ok { background: var(--p-light) !important; color: var(--primary) !important; }

/* Live password checklist under the sign-up password field. Collapsed until the
   member starts typing, so an untouched form stays uncluttered. */
.hp-pwreq { list-style: none !important; margin: -6px 0 14px !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px 12px !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; transition: max-height .2s, opacity .2s !important; }
.hp-pwreq.on { max-height: 120px !important; opacity: 1 !important; }
.hp-pwreq li { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--muted-fg) !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; }
.hp-pwreq li i { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; border-radius: 50% !important; border: 1.5px solid var(--line) !important; background: transparent !important; position: relative !important; box-sizing: border-box !important; transition: background .15s, border-color .15s !important; }
.hp-pwreq li.ok { color: var(--primary) !important; }
.hp-pwreq li.ok i { background: var(--primary) !important; border-color: var(--primary) !important; }
.hp-pwreq li.ok i::after { content: "" !important; position: absolute !important; left: 3px !important; top: 1px !important; width: 3px !important; height: 6px !important; border: solid #fff !important; border-width: 0 1.5px 1.5px 0 !important; transform: rotate(45deg) !important; }
@media (max-width: 420px) { .hp-pwreq { grid-template-columns: 1fr !important; } .hp-pwreq.on { max-height: 160px !important; } }

/* Same rules, stated once as a hint under the in-app profile password field. */
.hp-pwhint { display: block !important; margin-top: 5px !important; font-size: 11px !important; line-height: 1.5 !important; color: var(--muted-fg) !important; font-weight: 500 !important; }
.hp-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; padding: 13px !important; border-radius: 12px !important; background: var(--primary) !important; color: #fff !important; font-weight: 800 !important; font-size: 15px !important; transition: all 0.18s !important; }
.hp-btn:hover { background: var(--primary-d) !important; }
.hp-btn:active { transform: scale(0.985) !important; }
.hp-btn.ghost { background: #fff !important; color: #374151 !important; border: 1.5px solid #e5e7eb !important; }
.hp-btn.ghost:hover { background: #f9fafb !important; }
.hp-auth-or { display: flex !important; align-items: center !important; gap: 12px !important; margin: 18px 0 !important; color: #9ca3af !important; font-size: 12px !important; }
.hp-auth-or::before, .hp-auth-or::after { content: "" !important; flex: 1 !important; height: 1px !important; background: #e5e7eb !important; }
.hp-forgot { text-align: right !important; margin-bottom: 6px !important; }
.hp-forgot a { font-size: 12px !important; font-weight: 700 !important; color: var(--primary) !important; }
.hp-auth-fine { font-size: 11px !important; color: #9ca3af !important; text-align: center !important; margin-top: 18px !important; line-height: 1.6 !important; }
.hp-auth-art { width: 42% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px !important; position: relative !important; overflow: hidden !important; background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 40%, #d1fae5 100%) !important; }
.hp-auth-art-in { position: relative !important; z-index: 2 !important; text-align: center !important; max-width: 320px !important; }
.hp-auth-art h2 { font-size: 32px !important; margin-bottom: 12px !important; }
.hp-auth-art .blob { position: absolute !important; border-radius: 50% !important; }
.hp-auth-art-tag { color: #4a7c59 !important; font-size: 14px !important; margin-bottom: 24px !important; line-height: 1.6 !important; }
.hp-auth-feats { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.hp-auth-feat { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.6) !important; text-align: left !important; }
.hp-auth-feat .ic { width: 32px !important; height: 32px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.hp-auth-feat p { font-size: 12.5px !important; font-weight: 700 !important; }
.hp-auth-stats { display: flex !important; align-items: center !important; justify-content: center !important; gap: 26px !important; margin-top: 28px !important; }
.hp-auth-stats b { display: block !important; font-size: 19px !important; color: var(--primary) !important; }
.hp-auth-stats small { font-size: 10px !important; color: var(--muted-fg) !important; }

/* gate / signed-in cards (centered) */
.hp-center { min-height: 80vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; }
.hp-gate { width: 100% !important; max-width: 420px !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 22px !important; padding: 34px !important; text-align: center !important; box-shadow: 0 20px 50px -30px rgba(61, 122, 46, 0.4) !important; }
.hp-gate .emoji { font-size: 44px !important; margin-bottom: 12px !important; }
.hp-gate h2 { font-size: 22px !important; margin-bottom: 8px !important; }
.hp-gate p { color: var(--muted-fg) !important; font-size: 14px !important; margin-bottom: 20px !important; }

/* ============================================================
 * App shell — top nav + bottom tab bar
 * ============================================================ */
.hp-nav { position: sticky !important; top: 0 !important; z-index: 40 !important; background: rgba(250, 253, 245, 0.92) !important; backdrop-filter: blur(10px) !important; border-bottom: 1px solid var(--line-soft) !important; }
.hp-nav-in { max-width: 1024px !important; margin: 0 auto !important; padding: 12px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
.hp-brand { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; }
.hp-brand .mark { width: 38px !important; height: 38px !important; border-radius: 12px !important; background: linear-gradient(135deg, var(--primary), #16a34a) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.hp-brand .mark svg { width: 20px !important; height: 20px !important; }
.hp-brand b { font-size: 16px !important; display: block !important; line-height: 1.1 !important; }
.hp-brand small { font-size: 11px !important; color: var(--muted-fg) !important; }
.hp-tabs { display: flex !important; gap: 4px !important; background: var(--muted) !important; padding: 4px !important; border-radius: 14px !important; }
.hp-tab { display: flex !important; align-items: center !important; gap: 7px !important; padding: 8px 16px !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important; color: var(--muted-fg) !important; transition: all 0.18s !important; }
.hp-tab svg { width: 16px !important; height: 16px !important; }
.hp-tab.on { background: var(--primary) !important; color: #fff !important; box-shadow: 0 4px 12px -4px rgba(61, 122, 46, 0.5) !important; }
.hp-nav-right { display: flex !important; align-items: center !important; gap: 10px !important; }
.hp-avatar { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--primary), #16a34a) !important; color: #fff !important; font-weight: 800 !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; cursor: pointer !important; }
/* Photo overlays the initials; onerror removes a 404'd Gravatar so they show. */
.hp-avatar { position: relative !important; }
.hp-avatar img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }

.hp-bottomnav { display: none !important; }

.hp-wrap { max-width: 768px !important; margin: 0 auto !important; padding: 24px 16px 40px !important; display: flex !important; flex-direction: column !important; gap: 18px !important; }
.hp-card { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 20px !important; padding: 20px !important; }
.hp-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 16px !important; flex-wrap: wrap !important; }
.hp-card h3 { font-size: 17px !important; }
.hp-card-sub { font-size: 12.5px !important; color: var(--muted-fg) !important; margin-top: 2px !important; }
.hp-h { font-size: 17px !important; font-weight: 800 !important; }
.hp-date .clock { font-variant-numeric: tabular-nums !important; }
.hp-langbtn { height: 34px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--card) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; color: var(--fg) !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; margin-right: 8px !important; }
.hp-langbtn svg { flex-shrink: 0 !important; color: var(--muted-fg) !important; }
.hp-langbtn:hover { border-color: var(--primary) !important; background: #eef6eb !important; color: var(--primary) !important; }
.hp-langlist { display: flex !important; flex-direction: column !important; gap: 5px !important; max-height: 320px !important; overflow-y: auto !important; }
.hp-langlist button { display: flex !important; align-items: baseline !important; gap: 8px !important; width: 100% !important; text-align: left !important; padding: 11px 13px !important; border-radius: 10px !important; background: var(--muted) !important; border: 1.5px solid var(--line) !important; font-size: 14px !important; }
.hp-langlist button small { color: var(--muted-fg) !important; font-size: 11.5px !important; }
.hp-langlist button .tick { margin-left: auto !important; }
.hp-langlist button.on { border-color: var(--primary) !important; background: #eef6eb !important; }
.hp-langlist button:hover { border-color: var(--primary) !important; }
.hp-langlist .hint { font-size: 12px !important; color: var(--muted-fg) !important; padding: 8px 2px !important; }
#hp-app[dir="rtl"] .hp-setting .lbl b { flex-direction: row-reverse !important; justify-content: flex-end !important; }

/* ---- Habit rows ---- */
.hp-habits { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.hp-habit { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px !important; border-radius: 14px !important; background: var(--muted) !important; border: 1.5px solid transparent !important; cursor: pointer !important; user-select: none !important; transition: all 0.15s !important; }
.hp-habit .box { width: 26px !important; height: 26px !important; border-radius: 50% !important; border: 2px solid !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.hp-habit .box svg { width: 14px !important; height: 14px !important; color: #fff !important; }
.hp-habit .name { font-size: 15px !important; font-weight: 700 !important; }
.hp-habit.done .name { color: var(--muted-fg) !important; text-decoration: line-through !important; }
.hp-habit .meta { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 3px !important; flex-wrap: wrap !important; }
.hp-tag { font-size: 10px !important; font-weight: 800 !important; padding: 2px 9px !important; border-radius: 999px !important; }
.hp-habit .freq { font-size: 10.5px !important; color: var(--muted-fg) !important; }
.hp-streak { display: flex !important; align-items: center !important; gap: 4px !important; color: var(--accent) !important; font-weight: 800 !important; font-size: 13px !important; flex-shrink: 0 !important; }
.hp-streak svg { width: 13px !important; height: 13px !important; }
.hp-addbtn { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 800 !important; padding: 8px 14px !important; border-radius: 10px !important; background: var(--p-light) !important; color: var(--primary) !important; border: 1px solid var(--line) !important; }
.hp-cats { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.hp-cat { font-size: 11px !important; font-weight: 800 !important; padding: 5px 12px !important; border-radius: 999px !important; background: var(--p-light) !important; color: var(--muted-fg) !important; border: 1px solid var(--line) !important; }
.hp-cat.on { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.hp-done-banner { margin-top: 16px !important; padding: 16px !important; border-radius: 14px !important; text-align: center !important; background: rgba(61,122,46,0.08) !important; border: 1px solid rgba(61,122,46,0.25) !important; }
.hp-done-banner b { color: var(--primary) !important; font-size: 15px !important; }
.hp-done-banner p { color: var(--muted-fg) !important; font-size: 12.5px !important; margin-top: 3px !important; }
.hp-bar { height: 8px !important; border-radius: 999px !important; overflow: hidden !important; margin-bottom: 8px !important; background: var(--w-light) !important; }
.hp-bar i { display: block !important; height: 100% !important; border-radius: 999px !important; transition: width 0.5s !important; }

/* ============================================================
 * Analytics
 * ============================================================ */
.hp-statgrid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
.hp-stat { border-radius: 18px !important; padding: 16px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.hp-stat .ic { width: 32px !important; height: 32px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.hp-stat .v { font-size: 20px !important; font-weight: 800 !important; }
.hp-stat .l { font-size: 10.5px !important; color: var(--muted-fg) !important; }
.hp-two { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.hp-two > .hp-card { display: flex !important; flex-direction: column !important; }
.hp-two .hp-ringwrap { flex: 1 !important; justify-content: center !important; }
.hp-legend { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 10px !important; }
.hp-legend .row { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 12px !important; }
.hp-legend .dot { width: 9px !important; height: 9px !important; border-radius: 50% !important; display: inline-block !important; margin-right: 7px !important; }
.hp-ringwrap { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; }
.hp-ring { position: relative !important; }
.hp-ring .center { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
.hp-ring .center .pct { font-size: 24px !important; font-weight: 800 !important; }
.hp-ring .center .cl { font-size: 10px !important; color: var(--muted-fg) !important; }
.hp-suggest { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.hp-sug { padding: 16px !important; border-radius: 14px !important; }
.hp-sug .top { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 4px !important; flex-wrap: wrap !important; }
.hp-sug .issue { font-size: 11.5px !important; color: #6b7280 !important; margin-bottom: 6px !important; }
.hp-sug .tip { font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 12px !important; }
.hp-sug .go { font-size: 11px !important; font-weight: 800 !important; padding: 7px 12px !important; border-radius: 9px !important; color: #fff !important; }

/* heatmap */
.hp-hist { display: grid !important; grid-template-columns: repeat(15, 1fr) !important; gap: 3px !important; margin-top: 4px !important; }
.hp-hist span { aspect-ratio: 1 !important; border-radius: 3px !important; display: block !important; }
.hp-badges { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.hp-bdg { text-align: center !important; padding: 14px 8px !important; border-radius: 14px !important; border: 1px solid var(--line) !important; background: var(--muted) !important; opacity: 0.45 !important; filter: grayscale(1) !important; }
.hp-bdg.earned { opacity: 1 !important; filter: none !important; background: #fdf9ec !important; border-color: #f1e2b8 !important; box-shadow: 0 4px 14px -10px rgba(180, 130, 20, 0.5) !important; }
.hp-bdg .e { font-size: 24px !important; display: block !important; margin-bottom: 5px !important; }
.hp-bdg b { font-size: 12px !important; display: block !important; }
.hp-bdg small { font-size: 9.5px !important; color: var(--muted-fg) !important; }
@media (max-width: 560px) { .hp-badges { grid-template-columns: repeat(2, 1fr) !important; }}

.hp-archrow { display: flex !important; align-items: center !important; gap: 7px !important; width: 100% !important; margin-top: 10px !important; padding: 10px 12px !important; border-radius: 12px !important; background: transparent !important; border: 1px dashed var(--line) !important; color: var(--muted-fg) !important; font-size: 12.5px !important; font-weight: 700 !important; }
.hp-archrow:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.hp-habit.archived { cursor: default !important; margin-top: 8px !important; }
.hp-moodchart { display: flex !important; align-items: flex-end !important; gap: 6px !important; height: 92px !important; }
.hp-mood-col { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; gap: 3px !important; height: 100% !important; min-width: 0 !important; }
.hp-mood-col .e { font-size: 13px !important; line-height: 1 !important; }
.hp-mood-col i { width: 100% !important; max-width: 22px !important; border-radius: 5px 5px 2px 2px !important; }
.hp-mood-col small { font-size: 9px !important; color: var(--muted-fg) !important; }
.hp-heat { display: grid !important; gap: 3px !important; }
.hp-heat-col { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
.hp-heat-cell { width: 12px !important; height: 12px !important; border-radius: 3px !important; flex-shrink: 0 !important; }
.hp-heat .hp-heat-cell { width: 100% !important; height: auto !important; aspect-ratio: 1 !important; }
.hp-heat-months { display: grid !important; gap: 3px !important; margin-bottom: 5px !important; font-size: 10px !important; font-weight: 700 !important; color: var(--muted-fg) !important; }
.hp-heat-months span { white-space: nowrap !important; overflow: visible !important; }
.hp-heat-legend { display: flex !important; align-items: center !important; gap: 4px !important; margin-top: 10px !important; font-size: 10px !important; color: var(--muted-fg) !important; }

/* per-habit history */
.hp-hh-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.hp-hh-row { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; text-align: left !important; padding: 11px 13px !important; border-radius: 12px !important; background: var(--muted) !important; border: 1px solid var(--line) !important; cursor: pointer !important; transition: border-color 0.15s !important; }
.hp-hh-row:hover { border-color: var(--primary) !important; }
.hp-hh-row .dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
.hp-hh-row .main { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; }
.hp-hh-row .main b { font-size: 14px !important; color: var(--fg) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.hp-hh-row .main small { font-size: 11.5px !important; color: var(--muted-fg) !important; font-weight: 600 !important; }
.hp-hh-row .pct { font-size: 13px !important; font-weight: 800 !important; flex-shrink: 0 !important; }
.hp-hh-chips { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; margin-bottom: 14px !important; }
.hp-hh-chip { border-radius: 12px !important; padding: 10px 4px !important; text-align: center !important; border: 1px solid var(--line) !important; background: var(--muted) !important; }
.hp-hh-chip .v { font-size: 16px !important; font-weight: 800 !important; }
.hp-hh-chip .l { font-size: 9.5px !important; color: var(--muted-fg) !important; font-weight: 700 !important; }
.hp-hcal-nav { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 8px !important; }
.hp-hcal-nav b { font-size: 14px !important; color: var(--fg) !important; }
.hp-hcal-nav button { width: 30px !important; height: 30px !important; border-radius: 8px !important; border: 1px solid var(--line) !important; background: var(--card) !important; font-size: 16px !important; font-weight: 800 !important; color: var(--fg) !important; cursor: pointer !important; line-height: 1 !important; }
.hp-hcal-nav button:disabled { opacity: 0.35 !important; cursor: default !important; }
.hp-hcal { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; }
.hp-hcal .wd { text-align: center !important; font-size: 10px !important; font-weight: 800 !important; color: var(--muted-fg) !important; padding: 2px 0 !important; }
.hp-hcal .d { aspect-ratio: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; font-size: 12px !important; font-weight: 700 !important; border: 1px solid var(--line-soft) !important; color: var(--fg) !important; }
.hp-hcal .d.off { color: var(--muted-fg) !important; opacity: 0.45 !important; border-color: transparent !important; }
.hp-hcal .d.future { opacity: 0.3 !important; border-style: dashed !important; }
.hp-hcal .d.miss { background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.25) !important; color: #b91c1c !important; }
.hp-hcal .d.today { box-shadow: 0 0 0 2px var(--primary) !important; }
.hp-hh-legend { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 12px !important; font-size: 10.5px !important; color: var(--muted-fg) !important; font-weight: 700 !important; }
.hp-hh-legend span { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.hp-hh-legend i { width: 11px !important; height: 11px !important; border-radius: 3px !important; display: inline-block !important; box-sizing: border-box !important; }
.hp-histlink { font-size: 11px !important; font-weight: 800 !important; color: var(--primary) !important; background: none !important; border: none !important; padding: 0 !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.hp-hhback { width: 30px !important; height: 30px !important; border-radius: 8px !important; border: 1px solid var(--line) !important; background: var(--card) !important; color: var(--fg) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 10px !important; cursor: pointer !important; flex-shrink: 0 !important; padding: 0 !important; }
.hp-hhback svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; }
.hp-hhback svg { transform: rotate(180deg) !important; }


/* chart load animations (applied only when a tab is (re)entered) */
@keyframes hpGrowY { from { height: 0; } }
@keyframes hpGrowX { from { width: 0; } }
@keyframes hpFadeIn { from { opacity: 0; } }
.hp-anim .hp-mood-col i { animation: hpGrowY 0.7s cubic-bezier(0.25, 0.8, 0.3, 1) both !important; }
.hp-anim .hp-bar i { animation: hpGrowX 0.8s cubic-bezier(0.25, 0.8, 0.3, 1) both !important; }
.hp-anim .hp-prog-bar i { animation: hpGrowX 0.8s cubic-bezier(0.25, 0.8, 0.3, 1) both !important; }
.hp-anim .hp-areafill { animation: hpFadeIn 1.2s ease both !important; }
.hp-anim .hp-heat .hp-heat-cell { animation: hpFadeIn 0.9s ease both !important; }
.hp-anim .hp-statgrid .hp-stat, .hp-anim .hp-sum .hp-sumcard, .hp-anim .hp-lstats .hp-lstat { animation: hpFadeIn 0.5s ease both !important; }

/* workouts + language toggle */
.hp-langtoggle { display: inline-flex !important; background: var(--muted) !important; border-radius: 10px !important; padding: 3px !important; }
.hp-langtoggle button { padding: 5px 12px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 800 !important; color: var(--muted-fg) !important; }
.hp-langtoggle button.on { background: var(--primary) !important; color: #fff !important; }

/* ============================================================
 * Profile (v2.11 redesign: hero card + two-column grid)
 * ============================================================ */
.hp-pf-hero { position: relative !important; border-radius: 24px !important; overflow: hidden !important; background: var(--card) !important; border: 1px solid var(--line) !important; box-shadow: 0 24px 60px -34px rgba(28, 54, 32, 0.5) !important; }
/* background-image stays NON-important: the member's cover photo arrives as an
   inline style and must beat the fallback gradient. */
.hp-pf-cover { position: relative !important; height: 168px !important; background-color: #3d7a2e !important; background-image: linear-gradient(135deg, #3d7a2e, #84cc16); background-size: cover !important; background-position: center 40% !important; }
.hp-pf-scrim { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(28, 54, 32, 0) 30%, rgba(28, 54, 32, 0.55) 100%) !important; }
.hp-pf-edit { position: absolute !important; top: 14px !important; right: 14px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 13px !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; background: rgba(255, 255, 255, 0.22) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; }
.hp-pf-edit:hover { background: rgba(255, 255, 255, 0.34) !important; }
#hp-app[dir="rtl"] .hp-pf-edit { right: auto !important; left: 14px !important; }
/* Frosted panel overlapping the cover's bottom edge. */
.hp-pf-glass { position: relative !important; margin: -52px 16px 16px !important; padding: 20px 22px 22px !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 18px 44px -24px rgba(28, 54, 32, 0.4) !important; display: flex !important; gap: 20px !important; align-items: flex-end !important; flex-wrap: wrap !important; }
.hp-pf-avwrap { position: relative !important; flex-shrink: 0 !important; margin-top: -60px !important; }
/* Conic level ring (fill % is inline from JS; track colour via --ring-track). */
.hp-pf-ring { width: 112px !important; height: 112px !important; border-radius: 30px !important; padding: 4px !important; box-shadow: 0 12px 30px -12px rgba(28, 54, 32, 0.5) !important; }
.hp-pf-ring .big-av { position: relative !important; width: 100% !important; height: 100% !important; border-radius: 26px !important; border: 3px solid var(--card) !important; background: linear-gradient(135deg, var(--primary), #16a34a) !important; color: #fff !important; font-size: 34px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; cursor: pointer !important; }
.hp-pf-ring .big-av img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.big-av .cam { position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: rgba(28, 54, 32, 0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity 0.15s !important; }
.big-av:hover .cam, .big-av:focus .cam { opacity: 1 !important; }
.hp-pf-lvl { position: absolute !important; bottom: -8px !important; left: 50% !important; transform: translateX(-50%) !important; background: var(--card) !important; border: 1px solid var(--line) !important; color: var(--primary) !important; font-size: 10.5px !important; font-weight: 800 !important; padding: 3px 10px !important; border-radius: 999px !important; white-space: nowrap !important; box-shadow: 0 4px 12px -6px rgba(28, 54, 32, 0.4) !important; }
.hp-pf-id { flex: 1 !important; min-width: 220px !important; }
.hp-pf-id h2 { font-size: 26px !important; letter-spacing: -0.5px !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.hp-pf-meta { display: flex !important; align-items: center !important; gap: 4px 14px !important; flex-wrap: wrap !important; margin-top: 6px !important; color: var(--muted-fg) !important; font-size: 13.5px !important; font-weight: 600 !important; }
.hp-pf-meta span { display: inline-flex !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; }
.hp-pf-meta svg { flex-shrink: 0 !important; }
.hp-pf-pills { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 12px !important; }
.hp-pf-pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 13px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 800 !important; color: #fff !important; background: var(--primary) !important; border: 1px solid transparent !important; }
.hp-pf-pill.soft { background: var(--p-light) !important; color: var(--primary) !important; border-color: var(--line) !important; } /* JS overrides colours per badge tier */
.hp-pf-streak { flex-shrink: 0 !important; text-align: center !important; padding: 16px 22px !important; border-radius: 18px !important; background: linear-gradient(150deg, #f97316, #fb923c) !important; color: #fff !important; box-shadow: 0 16px 34px -16px rgba(249, 115, 22, 0.7) !important; min-width: 128px !important; }
.hp-pf-streak svg { margin: 0 auto 2px !important; }
.hp-pf-streak b { display: block !important; font-size: 34px !important; line-height: 1.05 !important; letter-spacing: -1px !important; }
.hp-pf-streak small { display: block !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; opacity: 0.92 !important; margin-top: 4px !important; }
/* Two-column body: stats/activity/milestones + wellness/week/account rail. */
.hp-pf-grid { display: grid !important; grid-template-columns: 1fr 296px !important; gap: 18px !important; align-items: start !important; }
.hp-pf-col { display: flex !important; flex-direction: column !important; gap: 18px !important; min-width: 0 !important; }
.hp-wellrow { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; border-radius: 14px !important; }
.hp-wellrow svg { flex-shrink: 0 !important; }
.hp-wellrow .mid { flex: 1 !important; min-width: 0 !important; }
.hp-wellrow .mid small { display: block !important; font-size: 11.5px !important; color: var(--muted-fg) !important; font-weight: 700 !important; }
.hp-wellrow .mid b { display: block !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.15 !important; }
.hp-wellrow .track { width: 48px !important; height: 6px !important; border-radius: 999px !important; overflow: hidden !important; flex-shrink: 0 !important; }
.hp-wellrow .track i { display: block !important; height: 100% !important; border-radius: 999px !important; transition: width 0.5s !important; }
.hp-pf-week { display: flex !important; align-items: center !important; gap: 16px !important; }
.hp-pf-week .hp-ring { flex-shrink: 0 !important; }
/* The generic .hp-ring centre text (24px, 26px on wide screens) overflows this
   96px ring once the value hits "100%" — scope it down so it fits everywhere. */
.hp-pf-week .hp-ring .center .pct { font-size: 19px !important; }
.hp-pf-week .hp-ring .center .cl { font-size: 9.5px !important; }
.hp-pf-week .txt { flex: 1 !important; min-width: 0 !important; }
.hp-pf-week .txt b { display: block !important; font-size: 14px !important; font-weight: 700 !important; }
.hp-pf-week .txt small { display: block !important; font-size: 12px !important; color: var(--muted-fg) !important; font-weight: 600 !important; margin-top: 3px !important; line-height: 1.45 !important; }
.hp-lstats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
.hp-lstat { border-radius: 14px !important; padding: 14px !important; text-align: center !important; }
.hp-lstat svg { margin: 0 auto 8px !important; }
.hp-lstat .v { font-size: 18px !important; font-weight: 800 !important; }
.hp-lstat .l { font-size: 9.5px !important; color: var(--muted-fg) !important; margin-top: 2px !important; }
.hp-setting { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 10px 0 !important; }
.hp-setting .lbl { flex: 1 !important; min-width: 0 !important; }
.hp-setting .hp-btn { width: auto !important; flex-shrink: 0 !important; }
.hp-setting .lbl b { font-size: 14px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.hp-setting .lbl b svg { flex-shrink: 0 !important; }
.hp-setting .lbl small { font-size: 11.5px !important; color: var(--muted-fg) !important; }
.hp-acct { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.hp-acct button.row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 13px 14px !important; border-radius: 12px !important; background: var(--muted) !important; border: 1px solid var(--line) !important; font-size: 14px !important; font-weight: 600 !important; text-align: left !important; }
.hp-acct button.row span { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.hp-acct button.row svg { flex-shrink: 0 !important; }
.hp-acct button.row:hover { background: #eef6eb !important; }
.hp-signout { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 13px !important; border-radius: 12px !important; background: var(--red) !important; color: #fff !important; font-weight: 800 !important; font-size: 14px !important; }

/* ---- Toggle switch ---- */
.hp-switch { width: 42px !important; height: 24px !important; border-radius: 999px !important; background: #e5e7eb !important; position: relative !important; flex-shrink: 0 !important; transition: background 0.18s !important; }
.hp-switch.on { background: var(--primary) !important; }
.hp-switch i { position: absolute !important; top: 3px !important; left: 3px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; transition: left 0.18s !important; }
.hp-switch.on i { left: 21px !important; }

/* ---- Modal + toast (mounted inside root) ---- */
.hp-modal-ov { position: fixed !important; inset: 0 !important; z-index: 99999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; background: rgba(28, 54, 32, 0.5) !important; backdrop-filter: blur(3px) !important; }
.hp-modal { width: 100% !important; max-width: 440px !important; background: var(--card) !important; border-radius: 22px !important; max-height: 90vh !important; overflow-y: auto !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4) !important; }
.hp-modal-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 20px !important; border-bottom: 1px solid var(--line) !important; position: sticky !important; top: 0 !important; background: var(--card) !important; }
.hp-modal-head b { font-size: 16px !important; font-weight: 800 !important; }
.hp-modal-body { padding: 20px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.hp-x { width: 30px !important; height: 30px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--muted-fg) !important; }
.hp-x:hover { background: var(--muted) !important; }
.hp-toast { position: fixed !important; bottom: 84px !important; left: 50% !important; transform: translateX(-50%) translateY(10px) !important; background: var(--primary) !important; color: #fff !important; font-weight: 800 !important; font-size: 14px !important; padding: 11px 20px !important; border-radius: 999px !important; z-index: 100000 !important; opacity: 0 !important; transition: all 0.2s !important; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.4) !important; }
.hp-toast.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
.hp-toast.err { background: var(--red) !important; }

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 720px) {
  .hp-tabs { display: none !important; }
  .hp-bottomnav {
    display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 45 !important;
    background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(10px) !important;
    border-top: 1px solid var(--line) !important; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .hp-bottomnav button { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; padding: 6px !important; color: var(--muted-fg) !important; font-size: 10px !important; font-weight: 800 !important; border-radius: 12px !important; }
  .hp-bottomnav button svg { width: 20px !important; height: 20px !important; }
  .hp-bottomnav button.on { color: var(--primary) !important; }
  .hp-wrap { padding-bottom: 90px !important; }
  .hp-two, .hp-sleep-two { grid-template-columns: 1fr !important; }
  .hp-statgrid { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-lstats { grid-template-columns: repeat(2, 1fr) !important; }
  .hp-pf-streak { width: 100% !important; }
  .hp-pf-glass { margin: -52px 12px 12px !important; padding: 18px 16px 18px !important; }
  .hp-auth-art { display: none !important; }}

.hp-habit-edit { flex-shrink: 0 !important; width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 8px !important; border: 1px solid var(--line) !important; background: var(--card) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--muted-fg) !important; }
.hp-habit-edit:hover { background: rgba(61, 122, 46, 0.1) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
.hp-habit-edit svg { flex-shrink: 0 !important; }
.hp-colors { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.hp-color { width: 30px !important; height: 30px !important; border-radius: 50% !important; border: 3px solid transparent !important; cursor: pointer !important; padding: 0 !important; }
.hp-color.on { border-color: var(--fg) !important; }
/* Profile grid folds to one column a bit above the generic mobile cutoff —
   at 296px the rail gets too cramped inside the 768px content column. */
@media (max-width: 860px) {
  .hp-pf-grid { grid-template-columns: 1fr !important; }}

.hp-soon { opacity: 0.6 !important; cursor: not-allowed !important; position: relative !important; }
.hp-soon:hover { background: #fff !important; }
.hp-soon-badge { font-size: 10px !important; font-weight: 800 !important; background: #eef6eb !important; color: var(--muted-fg) !important; padding: 2px 7px !important; border-radius: 999px !important; }

/* ---- v2.1: habit types (count/duration) + scheduling ---- */
.hp-habit-main { flex: 1 !important; min-width: 0 !important; }
.hp-prog { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 6px !important; }
.hp-prog-bar { flex: 1 !important; height: 6px !important; border-radius: 999px !important; background: rgba(61, 122, 46, 0.1) !important; overflow: hidden !important; max-width: 160px !important; }
.hp-prog-bar i { display: block !important; height: 100% !important; border-radius: 999px !important; transition: width 0.3s !important; }
.hp-prog-val { font-size: 11px !important; font-weight: 800 !important; color: var(--muted-fg) !important; white-space: nowrap !important; }
.hp-stepper { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }
.hp-stepper button { width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 9px !important; border: 1.5px solid var(--line) !important; background: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.hp-stepper button svg { flex-shrink: 0 !important; }
.hp-stepper button:hover { background: var(--muted) !important; }
.hp-stepper button:active { transform: scale(0.92) !important; }
.hp-types { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.hp-typebtn { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; padding: 10px 12px !important; border-radius: 12px !important; border: 1.5px solid var(--line) !important; background: #fff !important; text-align: left !important; }
.hp-typebtn b { font-size: 13px !important; font-weight: 800 !important; color: var(--fg) !important; }
.hp-typebtn small { font-size: 10px !important; color: var(--muted-fg) !important; }
.hp-typebtn.on { border-color: var(--primary) !important; background: var(--p-light) !important; }
.hp-typebtn.on b { color: var(--primary) !important; }
.hp-goalrow { display: flex !important; gap: 8px !important; }
.hp-goalrow #hp-htarget { max-width: 100px !important; }
.hp-days { display: flex !important; gap: 6px !important; margin-top: 10px !important; }
.hp-day { flex: 1 !important; height: 38px !important; border-radius: 10px !important; border: 1.5px solid var(--line) !important; background: #fff !important; font-size: 13px !important; font-weight: 800 !important; color: var(--muted-fg) !important; }
.hp-day.on { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
@media (max-width: 420px) {
  .hp-types { grid-template-columns: 1fr !important; }}


/* ============================================================
 * HabitPress Lite polish (appended so these win the cascade):
 * larger type · roomier line-heights · theme-proofing ·
 * SVG mood faces · balanced modal buttons.
 * ============================================================ */

/* Theme-proofing — neutralise inherited values a WP theme might inject
   (set on the root only, so the app's own rules still win locally). */
#hp-app-root {
  font-size: 17px !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
}

/* Issue 10 — a bigger, professional type scale across the subscriber app. */
.hp-nav-in { padding: 14px 20px !important; }
.hp-brand b { font-size: 18px !important; }
.hp-brand small { font-size: 12.5px !important; }
.hp-tab { font-size: 15px !important; padding: 9px 17px !important; }
.hp-card { padding: 22px !important; }
.hp-card h3 { font-size: 19.5px !important; line-height: 1.35 !important; }
.hp-card-sub { font-size: 14px !important; line-height: 1.55 !important; }
.hp-h { font-size: 19px !important; }
.hp-habit .name { font-size: 17px !important; }
.hp-habit .freq { font-size: 12px !important; }
.hp-tag { font-size: 11px !important; }
.hp-addbtn { font-size: 14px !important; }
.hp-stat .v { font-size: 23px !important; }
.hp-stat .l { font-size: 12.5px !important; line-height: 1.35 !important; }
.hp-ring .center .pct { font-size: 26px !important; }
.hp-ring .center .cl { font-size: 11.5px !important; }
.hp-legend .row { font-size: 13px !important; }
.hp-lstat .v { font-size: 21px !important; }
.hp-lstat .l { font-size: 11.5px !important; line-height: 1.4 !important; }
.hp-bdg b { font-size: 13px !important; }
.hp-bdg small { font-size: 10.5px !important; }
.hp-acct button.row { font-size: 15px !important; }
.hp-setting .lbl b { font-size: 15px !important; }
.hp-setting .lbl small { font-size: 12.5px !important; }
.hp-btn { font-size: 15.5px !important; }
.hp-pf-id h2 { font-size: 28px !important; }
.hp-pf-pill { font-size: 12.5px !important; }
.hp-input, #hp-app-root input, #hp-app-root select, #hp-app-root textarea { font-size: 16px !important; }

/* Issue 8 — profile section headings + labels were cramped. */
.hp-bdg b { line-height: 1.3 !important; margin-top: 3px !important; }
.hp-bdg small { line-height: 1.35 !important; }

/* Issue 2 — login lockup: roomier line-heights + a professional size bump. */
.hp-auth-brand b { font-size: 18px !important; line-height: 1.15 !important; }
.hp-auth-brand small { font-size: 12px !important; line-height: 1.4 !important; }
.hp-auth h1 { font-size: 27px !important; line-height: 1.3 !important; margin-bottom: 8px !important; }
.hp-auth-sub { font-size: 14.5px !important; line-height: 1.55 !important; }
.hp-auth-tabs button { font-size: 15px !important; line-height: 1.2 !important; }
.hp-field label { font-size: 13px !important; }
.hp-auth-art h2 { font-size: 33px !important; line-height: 1.25 !important; }
.hp-auth-art-tag { font-size: 14.5px !important; line-height: 1.6 !important; }
.hp-auth-feat p { font-size: 13px !important; line-height: 1.4 !important; }
.hp-auth-fine { font-size: 12px !important; }

/* Issue 3 — the "Passwords don't match" note stays hidden until the two
   password fields actually differ (was forced visible by display:flex). */
.hp-auth-msg.hp-hidden { display: none !important; }

/* Issue 7 — balanced modal actions; "Add habit" never collapses/wraps. */
.hp-modal-actions { display: flex !important; gap: 10px !important; }
.hp-modal-actions .hp-btn { flex: 1 1 auto !important; width: auto !important; white-space: nowrap !important; }
.hp-modal-actions .hp-btn.ghost { flex: 0 0 auto !important; padding-left: 22px !important; padding-right: 22px !important; }
.hp-mood-logged { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin-top: 14px !important; color: var(--accent) !important; font-weight: 800 !important; font-size: 14px !important; }
.hp-mood-avg { display: inline-flex !important; align-items: center !important; gap: 7px !important; }
.hp-moodchart .e { display: flex !important; align-items: center !important; justify-content: center !important; }

/* Issue 4 — brand logo. The mark is a self-contained badge, so drop the old
   green square backdrop and let it stand on its own. */
.hp-auth-brand .mark, .hp-brand .mark {
  background: none !important;
  width: 42px !important; height: 42px !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}
.hp-auth-brand .mark svg, .hp-brand .mark svg { width: 42px !important; height: 42px !important; }
.hp-logo { display: block !important; }

/* Animated "running" mark in the frontend header (respects reduced-motion). */
@keyframes hpLogoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes hpLogoDash { 0% { opacity: 0; transform: translateX(3px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(-6px); } }
.hp-logo-anim { animation: hpLogoBob 1s ease-in-out infinite !important; }
.hp-logo-anim .hp-run-dash .d1 { animation: hpLogoDash 1s linear infinite !important; }
.hp-logo-anim .hp-run-dash .d2 { animation: hpLogoDash 1s linear infinite .16s !important; }
.hp-logo-anim .hp-run-dash .d3 { animation: hpLogoDash 1s linear infinite .32s !important; }
@media (prefers-reduced-motion: reduce) {
  .hp-logo-anim { animation: none !important; }
  .hp-logo-anim .hp-run-dash { display: none !important; }}


/* ============================================================
 * Theme isolation, round 2 — keep this section LAST.
 *
 * Inherited values are the weakest thing in CSS: a theme rule like
 * `small { line-height: 1 }` or `b { font-family: serif }` beats them.
 * These direct rules (id specificity, deliberately WITHOUT !important)
 * take back control from any theme stylesheet while still letting the
 * app's own !important class rules — and inline styles — win.
 * ============================================================ */
#hp-app-root :is(div, span, b, strong, i, em, small, label, a, li, td, th) {
  line-height: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  word-spacing: normal;
  text-transform: none;
  text-shadow: none;
  text-indent: 0;
}
/* Font-weight discipline: themes that thicken body text (`p { font-weight:600 }`,
   heavy global stacks…) made the whole app look bold on some sites. Body copy
   inherits the root's 400; only <b>/<strong> and the app's own !important
   class rules / inline styles set anything heavier. */
#hp-app-root :is(div, span, i, em, small, label, a, li, td, th, p) { font-weight: inherit; }
#hp-app-root :is(b, strong) { font-weight: 700; }
#hp-app-root small { line-height: 1.45; }
#hp-app-root label { line-height: 1.4; }
#hp-app-root ul, #hp-app-root ol { margin: 0; padding: 0; list-style: none; }
#hp-app-root img { border: 0; box-shadow: none; }

/* Type rhythm safety net: a section heading that starts a card gets
   breathing room even where the JS passes no inline margin. Inline
   style="margin-bottom:…" (non-important) still overrides this. */
#hp-app-root .hp-card > h3:first-child { margin-bottom: 12px; }

/* ============================================================
 * Theme isolation, round 3 — colour armour for dynamic accents.
 *
 * Category chips, progress fills, sleep/mood bars and the sleep quality
 * pill are coloured per habit/value by the JS. Plain inline styles
 * (`style="background:…;color:…"`) lose to any theme rule marked
 * !important — which is exactly how chips turned white / sleep bars
 * recoloured on some sites. The JS now passes those colours as inline
 * custom properties (--hp-chip-bg, --hp-chip-fg, --hp-bar, --hp-sug-bg,
 * --hp-sug-bc) and these id-scoped !important rules consume them, so no
 * theme stylesheet can repaint them.
 * ============================================================ */
#hp-app-root .hp-tag {
  background: var(--hp-chip-bg, var(--p-light)) !important;
  color: var(--hp-chip-fg, var(--primary)) !important;
}
#hp-app-root .hp-mood-col i { background: var(--hp-bar, var(--line)) !important; }
#hp-app-root .hp-prog-bar i { background: var(--hp-bar, var(--primary)) !important; }
#hp-app-root .hp-bar i { background: var(--hp-bar, var(--water)) !important; }
#hp-app-root .hp-sug {
  background: var(--hp-sug-bg, var(--muted)) !important;
  border: 1px solid var(--hp-sug-bc, var(--line)) !important;
}

/* ============================================================
 * v2.10: header positions, avatar menu, dark mode, Settings page,
 * verified tick, activity badge, Today-widget sizes.
 * Same !important + #hp-app-root-scoped pattern as the rest of the
 * file (theme isolation — see the armour section above).
 * ============================================================ */

/* ---- Theme toggle button (header) ---- */
.hp-thbtn { width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--line) !important; background: var(--card) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--fg) !important; cursor: pointer !important; flex-shrink: 0 !important; }
.hp-thbtn:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
/* Give icon-only buttons an explicit CSS size. Theme resets (e.g. Hello
   Elementor's button padding/width rules) collapse an attribute-sized SVG
   flex item to 0 width on first layout — the sun/moon icon vanished. */
.hp-thbtn svg, .hp-x svg { width: 15px !important; height: 15px !important; }
#hp-app-root button svg { flex-shrink: 0; }

/* ---- Avatar wrap + verified tick + dropdown menu ---- */
.hp-avwrap { position: relative !important; display: inline-flex !important; }
.hp-avwrap .hp-avatar { border: none !important; padding: 0 !important; }
.hp-av-vtick { position: absolute !important; right: -3px !important; bottom: -3px !important; display: flex !important; padding: 1px !important; background: var(--card) !important; border-radius: 50% !important; pointer-events: none !important; z-index: 2 !important; }
.hp-vtick { vertical-align: -2px !important; flex-shrink: 0 !important; }
.hp-avmenu { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; min-width: 216px !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: 0 18px 40px -18px rgba(28, 54, 32, 0.4) !important; padding: 8px !important; z-index: 60 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
#hp-app[dir="rtl"] .hp-avmenu { right: auto !important; left: 0 !important; }
.hp-avmenu-item { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 11px 12px !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 700 !important; color: var(--fg) !important; text-align: left !important; background: transparent !important; border: none !important; cursor: pointer !important; }
.hp-avmenu-item svg { color: var(--muted-fg) !important; flex-shrink: 0 !important; }
.hp-avmenu-item:hover, .hp-avmenu-item.on { background: var(--muted) !important; }
.hp-avmenu-item.soon { opacity: 0.55 !important; cursor: default !important; }
.hp-avmenu-sep { height: 1px !important; background: var(--line-soft) !important; margin: 6px 4px !important; }

/* ---- Settings page ---- */
.hp-set-head h2 { font-size: 22px !important; margin-bottom: 2px !important; }
.hp-set-grid { display: grid !important; grid-template-columns: 216px 1fr !important; gap: 18px !important; align-items: start !important; }
.hp-setrail { display: flex !important; flex-direction: column !important; gap: 6px !important; position: sticky !important; top: 80px !important; }
.hp-settab { display: flex !important; align-items: center !important; gap: 9px !important; padding: 11px 12px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--muted-fg) !important; background: transparent !important; border: none !important; text-align: left !important; cursor: pointer !important; white-space: nowrap !important; }
.hp-settab.on { background: var(--primary) !important; color: #fff !important; }
.hp-settab.on svg { color: #fff !important; }
.hp-settab:hover:not(.on) { background: var(--muted) !important; color: var(--fg) !important; }
.hp-setbody { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 18px !important; }
.hp-set-2col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 12px !important; }
.hp-input:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }
@media (max-width: 720px) {
  .hp-set-grid { grid-template-columns: 1fr !important; }
  .hp-setrail { flex-direction: row !important; overflow-x: auto !important; position: static !important; padding-bottom: 4px !important; }
  .hp-set-2col { grid-template-columns: 1fr !important; }}


/* ---- Widget settings controls + Today-page widget sizes ---- */
.hp-wctl { display: flex !important; align-items: center !important; gap: 12px !important; flex-shrink: 0 !important; }
.hp-wsizes { display: inline-flex !important; align-items: center !important; gap: 3px !important; background: var(--muted) !important; border-radius: 9px !important; padding: 3px !important; }
/* inline-flex centring + padding:0 so theme button resets (padding/line-height)
   can't push the S/M/L glyphs off-centre inside the fixed-height pill. */
.hp-wsize { width: 26px !important; height: 24px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; border-radius: 7px !important; font-size: 11px !important; font-weight: 800 !important; color: var(--muted-fg) !important; background: transparent !important; border: none !important; cursor: pointer !important; }
.hp-wsize.on { background: var(--primary) !important; color: #fff !important; }
.hp-wsize:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
.hp-w-sm { padding: 12px 14px !important; }
.hp-w-sm h3 { font-size: 14px !important; }
.hp-w-sm .hp-card-sub { font-size: 11px !important; }
.hp-w-lg { padding: 28px !important; }
.hp-w-lg h3 { font-size: 22px !important; }
.hp-w-lg .hp-card-sub { font-size: 15px !important; }

/* ---- Wide monitors: let the content column breathe a little more, so the
   page doesn't read as a narrow strip between huge empty margins. ---- */
@media (min-width: 1440px) {
  .hp-wrap { max-width: 880px !important; }}


/* ---- WP admin bar: our sticky/fixed header must sit below it, or the
   brand/logo hides behind the bar. WP pins the bar at 32px (46px ≤782px;
   it stops being fixed ≤600px, where offsetting again would leave a gap). ---- */
body.admin-bar #hp-app-root:not(.hp-pos-bottom) .hp-nav { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar #hp-app-root:not(.hp-pos-bottom) .hp-nav { top: 46px !important; }}

@media (max-width: 600px) {
  body.admin-bar #hp-app-root:not(.hp-pos-bottom) .hp-nav { top: 0 !important; }}


/* ---- Header positions (Pro). Desktop only: small screens always use the
   top header + bottom tab bar.
   Left/right is a simple always-visible sidebar (Facebook-style): full
   248px sidebar with labels on wide screens, a slim centred icon rail on
   narrow desktops. No hover-to-expand — the width never changes under the
   pointer. ---- */
@media (min-width: 721px) {
  .hp-pos-bottom .hp-nav { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; border-bottom: none !important; border-top: 1px solid var(--line-soft) !important; }
  .hp-pos-bottom .hp-wrap { padding-bottom: 110px !important; }
  .hp-pos-bottom .hp-avmenu { top: auto !important; bottom: calc(100% + 10px) !important; }

  .hp-pos-left .hp-nav, .hp-pos-right .hp-nav {
    position: fixed !important; top: 0 !important; bottom: 0 !important; width: 248px !important;
    border-bottom: none !important; backdrop-filter: none !important; background: var(--card) !important;
  }
  .hp-pos-left .hp-nav { left: 0 !important; right: auto !important; border-right: 1px solid var(--line-soft) !important; }
  .hp-pos-right .hp-nav { right: 0 !important; left: auto !important; border-left: 1px solid var(--line-soft) !important; }

  .hp-pos-left .hp-nav-in, .hp-pos-right .hp-nav-in {
    flex-direction: column !important; align-items: stretch !important; height: 100% !important;
    max-width: none !important; padding: 20px 14px !important; gap: 24px !important;
  }
  .hp-pos-left .hp-tabs, .hp-pos-right .hp-tabs {
    flex-direction: column !important; background: transparent !important; padding: 0 !important; gap: 6px !important; flex: 1 !important;
  }
  .hp-pos-left .hp-tab, .hp-pos-right .hp-tab { width: 100% !important; justify-content: flex-start !important; padding: 12px 14px !important; border-radius: 12px !important; }
  .hp-pos-left .hp-tab svg, .hp-pos-right .hp-tab svg { width: 19px !important; height: 19px !important; }
  /* Account controls: a simple left-aligned row at the sidebar's foot
     (theme toggle · language · avatar), not a centred stack. */
  .hp-pos-left .hp-nav-right, .hp-pos-right .hp-nav-right {
    flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    gap: 10px !important; margin-top: auto !important; padding-top: 14px !important;
    border-top: 1px solid var(--line-soft) !important;
  }
  .hp-pos-left .hp-langbtn, .hp-pos-right .hp-langbtn { margin-right: 0 !important; }
  .hp-pos-left .hp-avwrap, .hp-pos-right .hp-avwrap { margin-left: auto !important; }
  /* The avatar menu opens upward, inside the sidebar's footprint. */
  .hp-pos-left .hp-avmenu, .hp-pos-right .hp-avmenu { top: auto !important; bottom: calc(100% + 10px) !important; right: 0 !important; left: auto !important; }
  /* Push the app content out from under the sidebar; the wrap then centres
     itself in the remaining space (no lopsided gap). */
  .hp-pos-left #hp-app > .hp-wrap, .hp-pos-right #hp-app > .hp-wrap { margin-left: auto !important; margin-right: auto !important; }
  .hp-pos-left #hp-app { padding-left: 248px !important; }
  .hp-pos-right #hp-app { padding-right: 248px !important; }}

/* Narrow desktops: the sidebar slims to a centred icon rail. */
@media (min-width: 721px) and (max-width: 1179px) {
  .hp-pos-left .hp-nav, .hp-pos-right .hp-nav { width: 76px !important; }
  .hp-pos-left .hp-nav-in, .hp-pos-right .hp-nav-in { padding: 18px 10px !important; }
  .hp-pos-left .hp-brand, .hp-pos-right .hp-brand { justify-content: center !important; }
  .hp-pos-left .hp-brand > span:last-child, .hp-pos-right .hp-brand > span:last-child,
  .hp-pos-left .hp-tab span, .hp-pos-right .hp-tab span { display: none !important; }
  .hp-pos-left .hp-tab, .hp-pos-right .hp-tab { justify-content: center !important; padding: 12px 0 !important; }
  .hp-pos-left .hp-nav-right, .hp-pos-right .hp-nav-right { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 12px !important; }
  .hp-pos-left .hp-avwrap, .hp-pos-right .hp-avwrap { margin-left: 0 !important; }
  /* No room above the rail's foot — the avatar menu pops out sideways. */
  .hp-pos-left .hp-avmenu { top: auto !important; bottom: 0 !important; left: calc(100% + 12px) !important; right: auto !important; }
  .hp-pos-right .hp-avmenu { top: auto !important; bottom: 0 !important; right: calc(100% + 12px) !important; left: auto !important; }
  .hp-pos-left #hp-app { padding-left: 76px !important; }
  .hp-pos-right #hp-app { padding-right: 76px !important; }}


/* ---- Dark mode (Settings persists settings.theme; class on #hp-app-root) ---- */
#hp-app-root.hp-dark {
  --bg: #0b1210 !important;
  --card: #141d17 !important;
  --primary: #55a444 !important;
  --primary-d: #3d7a2e !important;
  --p-light: rgba(132, 204, 22, 0.09) !important;
  --w-light: rgba(14, 165, 233, 0.13) !important;
  --s-light: rgba(99, 102, 241, 0.14) !important;
  --muted: #1b2620 !important;
  --muted-fg: #94aa9a !important;
  --fg: #e7efe7 !important;
  --line: rgba(140, 200, 120, 0.18) !important;
  --line-soft: rgba(140, 200, 120, 0.09) !important;
  --ring-track: rgba(255, 255, 255, 0.10) !important;
}
#hp-app-root.hp-dark .hp-nav { background: rgba(11, 18, 16, 0.92) !important; }
#hp-app-root.hp-dark .hp-input { background: #0f1713 !important; border-color: rgba(140, 200, 120, 0.25) !important; color: var(--fg) !important; }
#hp-app-root.hp-dark .hp-langbtn:hover, #hp-app-root.hp-dark .hp-acct button.row:hover, #hp-app-root.hp-dark .hp-retry:hover { background: rgba(132, 204, 22, 0.12) !important; }
#hp-app-root.hp-dark .hp-switch { background: #2b3a31 !important; }
/* Cards that carry inline light-pastel backgrounds from JS templates. */
#hp-app-root.hp-dark .hp-sumcard, #hp-app-root.hp-dark .hp-lstat, #hp-app-root.hp-dark .hp-tipcard { background: rgba(255, 255, 255, 0.045) !important; border-color: rgba(255, 255, 255, 0.09) !important; }
#hp-app-root.hp-dark .hp-quote { background: var(--card) !important; }
#hp-app-root.hp-dark .hp-av-vtick { background: var(--bg) !important; }
/* Profile hero: frosted panel + tinted stat boxes need dark equivalents. */
#hp-app-root.hp-dark .hp-pf-glass { background: rgba(20, 29, 23, 0.72) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
#hp-app-root.hp-dark .hp-pf-scrim { background: linear-gradient(180deg, rgba(11, 18, 16, 0) 30%, rgba(11, 18, 16, 0.85) 100%) !important; }

/* ============================================================
 * v3.0 — Pro Today dashboard (widget grid).
 * Lite never renders this markup (PRO-gated in app.js), so these
 * rules are inert there. Same !important theme-armour conventions
 * as the rest of the file; decorative SVGs get explicit CSS sizes
 * (see the Hello Elementor notes above).
 * ============================================================ */

/* The dashboard needs more room than the classic 768px column. */
.hp-wrap-wide { max-width: 1140px !important; }
@media (min-width: 1440px) { .hp-wrap-wide { max-width: 1180px !important; }}


/* ---- Page head: title + date + reset ---- */
.hp-thead { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 14px !important; flex-wrap: wrap !important; }
.hp-thead h1 { font-size: 28px !important; letter-spacing: -0.4px !important; }
.hp-thead .sub { font-size: 13.5px !important; color: var(--muted-fg) !important; font-weight: 600 !important; margin-top: 4px !important; }

/* ---- Grid + card shell ---- */
.hp-tgrid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 16px !important; grid-auto-flow: dense !important; }
.hp-tw { position: relative !important; border-radius: 22px !important; overflow: hidden !important; background: var(--card) !important; border: 1px solid var(--line) !important; box-shadow: 0 12px 30px -20px rgba(28, 54, 32, 0.4) !important; cursor: grab !important; min-height: 150px !important; }
.hp-tw-S { grid-column: span 2 !important; }
.hp-tw-M { grid-column: span 4 !important; }
.hp-tw-L { grid-column: span 6 !important; }
.hp-twanim { position: absolute !important; inset: 0 !important; overflow: hidden !important; pointer-events: none !important; z-index: 1 !important; }
.hp-twbody { position: relative !important; z-index: 2 !important; padding: 18px 20px !important; }
.hp-twtitle { font-size: 16px !important; font-weight: 800 !important; display: block !important; }
.hp-twsub { font-size: 12px !important; font-weight: 600 !important; color: var(--muted-fg) !important; margin-top: 2px !important; }
.hp-clk { background: linear-gradient(160deg, #1f4030, #0c1d13) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #eefbf2 !important; }
.hp-twstat-habits { background: linear-gradient(160deg, #eef7e6, #ddefcd) !important; border-color: rgba(61, 122, 46, 0.22) !important; }
/* Lite-only stat skins (streak / best / week / active). Pro shows water, sleep
   and hydration in these slots instead. */
.hp-twstat-streak { background: linear-gradient(160deg, #fff3e4, #ffe3c6) !important; border-color: rgba(249, 115, 22, 0.24) !important; }
.hp-twstat-best { background: linear-gradient(160deg, #f2effe, #e3dcfb) !important; border-color: rgba(99, 102, 241, 0.24) !important; }
.hp-twstat-week { background: linear-gradient(180deg, #eef8fe, #dcf0fc) !important; border-color: rgba(14, 165, 233, 0.25) !important; }
.hp-twstat-active { background: linear-gradient(160deg, #edf7e4, #dcefc9) !important; border-color: rgba(61, 122, 46, 0.22) !important; }
.hp-twstat-streak .big { color: #c2610c !important; }
.hp-twstat-best .big { color: #5145c4 !important; }
.hp-twstat-week .big { color: #0369a1 !important; }
.hp-twstat-active .big { color: #2f7a22 !important; }
#hp-app-root.hp-dark .hp-twstat-streak { background: linear-gradient(160deg, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0.05)) !important; }
#hp-app-root.hp-dark .hp-twstat-best { background: linear-gradient(160deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.05)) !important; }
#hp-app-root.hp-dark .hp-twstat-week { background: linear-gradient(180deg, rgba(14, 165, 233, 0.16), rgba(14, 165, 233, 0.05)) !important; }
#hp-app-root.hp-dark .hp-twstat-active { background: linear-gradient(160deg, rgba(94, 162, 63, 0.18), rgba(94, 162, 63, 0.05)) !important; }
#hp-app-root.hp-dark .hp-twstat-streak .big { color: #fdba74 !important; }
#hp-app-root.hp-dark .hp-twstat-best .big { color: #b3aaf7 !important; }
#hp-app-root.hp-dark .hp-twstat-week .big { color: #7dd3fc !important; }
#hp-app-root.hp-dark .hp-twstat-active .big { color: #a3e087 !important; }
.hp-twq { background: linear-gradient(160deg, #fdf3e2, #fce8cf) !important; border-color: rgba(240, 180, 90, 0.4) !important; }
#hp-app-root.hp-dark .hp-twstat-habits { background: linear-gradient(160deg, rgba(94, 162, 63, 0.18), rgba(94, 162, 63, 0.05)) !important; }
#hp-app-root.hp-dark .hp-twq { background: linear-gradient(160deg, rgba(249, 180, 90, 0.14), rgba(249, 115, 22, 0.05)) !important; border-color: rgba(249, 180, 90, 0.22) !important; }

/* Weather ambience: drifting clouds, rain/snow, sun, moon, haze, lightning.
 *
 * NOTE — none of these rules may declare `opacity` (or `transform`) with
 * `!important`: an important declaration out-ranks the keyframes, which is
 * exactly how the rain used to end up frozen at opacity 0. Animated properties
 * are left to the keyframes and the selectors carry `#hp-app-root` instead, so
 * they still out-specify a host theme.
 *
 * Rain/snow fall the full height of the card via `--fall`, set per size below. */
.hp-tw-S .hp-twanim { --fall: 240px; }
.hp-tw-M .hp-twanim { --fall: 400px; }
.hp-tw-L .hp-twanim { --fall: 620px; }
@keyframes hpWxCloud { 0% { transform: translateX(-8%); } 50% { transform: translateX(8%); } 100% { transform: translateX(-8%); } }

/* Shared ambient bits: bokeh circles, scrolling waves / ECG trace. */
#hp-app-root .hp-twdot { position: absolute !important; border-radius: 50% !important; animation: hpTwDrift 12s ease-in-out infinite backwards; }
@keyframes hpTwDrift {
  0% { transform: translate3d(0, 16px, 0) scale(0.7); opacity: 0; }
  18% { opacity: var(--o, 0.3); }
  70% { opacity: var(--o, 0.3); }
  100% { transform: translate3d(9px, -64px, 0) scale(1.25); opacity: 0; }
}
.hp-twwave { position: absolute !important; bottom: -2px !important; left: 0 !important; width: 200% !important; animation: hpTwWave 11s linear infinite !important; }
@keyframes hpTwWave { to { transform: translateX(-50%); } }
.hp-twecg { position: absolute !important; bottom: 8px !important; left: 0 !important; width: 200% !important; height: 48px !important; color: rgba(61, 122, 46, 0.32) !important; animation: hpTwWave 10s linear infinite !important; }
#hp-app-root.hp-dark .hp-twecg { color: rgba(140, 220, 120, 0.35) !important; }
.hp-twq-rays { transform-box: fill-box; transform-origin: center; animation: hpTwSpin 40s linear infinite; }
@keyframes hpTwSpin { to { transform: rotate(360deg); } }
.hp-twq-disc { transform-box: fill-box; transform-origin: center; animation: hpTwPulse 6s ease-in-out infinite; }
@keyframes hpTwPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }
/* Generic two-blob ambience (twGlowAnim) — the tint comes from --gc. */
.hp-tw-glow { position: absolute !important; border-radius: 50% !important; background: radial-gradient(circle, var(--gc), transparent 70%) !important; filter: blur(10px) !important; }
.hp-tw-glow.g1 { top: -40% !important; right: -22% !important; width: 82% !important; height: 105% !important; animation: hpWxCloud 28s ease-in-out infinite !important; }
.hp-tw-glow.g2 { bottom: -45% !important; left: -25% !important; width: 78% !important; height: 100% !important; animation: hpWxCloud 36s ease-in-out infinite reverse !important; }
.hp-clk-glow { position: absolute !important; border-radius: 50% !important; }
.hp-clk-glow.g1 { top: -35% !important; right: -25% !important; width: 90% !important; height: 100% !important; background: radial-gradient(circle, rgba(94, 200, 120, 0.24), transparent 70%) !important; filter: blur(8px) !important; animation: hpWxCloud 26s ease-in-out infinite !important; }
.hp-clk-glow.g2 { bottom: -40% !important; left: -25% !important; width: 85% !important; height: 95% !important; background: radial-gradient(circle, rgba(56, 189, 248, 0.14), transparent 70%) !important; filter: blur(10px) !important; animation: hpWxCloud 34s ease-in-out infinite reverse !important; }

/* ---- Clock widget ---- */
.hp-clk-row { display: flex !important; gap: 18px !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; height: 100% !important; box-sizing: border-box !important; }
.hp-clk-left { flex-shrink: 0 !important; min-width: 0 !important; }
.hp-clk-classic { font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.8px !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; }
.hp-clk-date { font-size: 12px !important; font-weight: 700 !important; opacity: 0.8 !important; margin-top: 8px !important; }
.hp-clk-hijri { font-size: 11px !important; font-weight: 600 !important; opacity: 0.55 !important; margin-top: 1px !important; }
.hp-clk-cal { border-radius: 14px !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; padding: 12px 14px !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 250px !important; align-self: center !important; }
.hp-tw-S .hp-clk-cal { max-width: 220px !important; }
.hp-tw-L .hp-clk-cal { max-width: 300px !important; }
.hp-clk-cal .title { font-size: 12px !important; font-weight: 800 !important; text-align: center !important; margin-bottom: 6px !important; }
.hp-tw-L .hp-clk-cal .title { font-size: 13px !important; }
.hp-clk-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; }
.hp-clk-grid .dow { font-size: 10px !important; font-weight: 800 !important; text-align: center !important; opacity: 0.5 !important; padding-bottom: 1px !important; }
.hp-clk-grid .d { font-size: 11.5px !important; font-weight: 600 !important; text-align: center !important; line-height: 21px !important; height: 21px !important; border-radius: 7px !important; color: rgba(238, 251, 242, 0.72) !important; }
.hp-tw-L .hp-clk-grid .d { font-size: 13px !important; }
.hp-clk-grid .d.today { background: #5ec878 !important; color: #0c1d13 !important; font-weight: 800 !important; }

/* ---- Stat cards ---- */
.hp-twstat .hp-twbody { height: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.hp-twstat .ic { width: 30px !important; height: 30px !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.75) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px -4px rgba(28, 54, 32, 0.3) !important; flex-shrink: 0 !important; align-self: flex-start !important; }
.hp-twstat .ic svg { width: 16px !important; height: 16px !important; }
#hp-app-root.hp-dark .hp-twstat .ic { background: rgba(255, 255, 255, 0.08) !important; }
.hp-twstat .big { font-size: 28px !important; font-weight: 800 !important; line-height: 1 !important; margin-top: 12px !important; }
.hp-twstat .lbl { font-size: 12.5px !important; font-weight: 700 !important; margin-top: 5px !important; }
.hp-twstat .sub { font-size: 11.5px !important; font-weight: 600 !important; color: var(--muted-fg) !important; margin-top: 1px !important; }
.hp-twstat-habits .big { color: #2f7a22 !important; }
#hp-app-root.hp-dark .hp-twstat-habits .big { color: #a3e087 !important; }

/* ---- Mood widget ---- */
.hp-twmood-row { display: flex !important; gap: 8px !important; margin-top: 14px !important; flex-wrap: wrap !important; }
.hp-twmood-btn { flex: 1 !important; min-width: 52px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; padding: 10px 12px !important; border-radius: 14px !important; background: var(--muted) !important; border: 2px solid var(--line-soft) !important; cursor: pointer !important; }
.hp-twmood-btn small { font-size: 10.5px !important; font-weight: 800 !important; color: var(--muted-fg) !important; }
.hp-twmood-btn.on { background: var(--card) !important; border-color: var(--hp-mood, var(--accent)) !important; box-shadow: 0 6px 14px -8px var(--hp-mood, var(--accent)) !important; }
.hp-twmood-btn.on small { color: var(--hp-mood, var(--accent)) !important; }
.hp-twmood-btn .hp-face { width: 26px !important; height: 26px !important; }

/* ---- Quote widget ---- */
.hp-twq-body { height: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.hp-twq-body .kicker { font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--muted-fg) !important; display: block !important; margin-right: 96px !important; }
.hp-twq-body .txt { margin: 8px 0 0 !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--fg) !important; }
.hp-tw-M .hp-twq-body .txt, .hp-tw-L .hp-twq-body .txt { font-size: 16px !important; }
.hp-twq-body .by { font-size: 11.5px !important; font-weight: 600 !important; color: var(--muted-fg) !important; margin-top: 6px !important; }

/* ---- Responsive: two-up small cards on tablets, full width on phones ---- */
@media (max-width: 900px) {
  .hp-tw-S { grid-column: span 3 !important; }
  .hp-tw-M, .hp-tw-L { grid-column: span 6 !important; }}

@media (max-width: 560px) {
  .hp-tw-S { grid-column: span 6 !important; }}


/* Respect reduced-motion: the dashboard stays fully readable without motion.
   pro.css carries the same courtesy for the Pro-only layers. */
@media (prefers-reduced-motion: reduce) {
  .hp-twwave, .hp-twecg, .hp-twq-rays, .hp-twq-disc, .hp-clk-glow, .hp-tw-glow { animation: none !important; }
  #hp-app-root .hp-twdot { animation: none !important; opacity: var(--o, 0.3); }}