:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a1628; color: #e0e8f0; min-height: 100vh; }

/* ── PUBLIC LANDING PAGE ── */
.signin-screen { position: fixed; inset: 0; overflow-y: auto; background: #071421; z-index: 200; color: #e6f3f7; scroll-behavior: smooth; }
.landing-nav { position: sticky; top: 0; z-index: 2; height: calc(74px + var(--safe-area-top)); padding: var(--safe-area-top) max(24px, var(--safe-area-right), calc((100vw - 1180px) / 2)) 0 max(24px, var(--safe-area-left), calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; background: rgba(7,20,33,.94); border-bottom: 1px solid rgba(125,211,252,.16); backdrop-filter: blur(14px); }
.landing-brand { display: inline-flex; align-items: center; gap: 11px; color: #e6f3f7; font-size: 1.05rem; font-weight: 800; text-decoration: none; }
.landing-brand .logo { width: 40px; height: 40px; }
.landing-actions { display: flex; align-items: center; gap: 18px; }
.landing-login { padding: 8px 14px; border: 1px solid #2d5a8e; border-radius: 5px; background: transparent; color: #e6f3f7; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; text-decoration: none; }
.landing-login:hover { border-color: #7dd3fc; color: #7dd3fc; }
.landing-signin { color: #7dd3fc; font-size: .8rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid #2d5a8e; padding-bottom: 3px; }
.landing-signin:hover { color: #bae6fd; border-color: #7dd3fc; }
.landing-hero { min-height: calc(100vh - 74px); max-width: 1180px; margin: 0 auto; padding: 72px 24px 58px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); align-items: center; gap: 72px; }
.hero-copy { max-width: 720px; }
.hero-kicker { color: #38bdf8; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.hero-copy h1 { max-width: 680px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 400; line-height: .98; color: #f4fbfd; }
.hero-lede { max-width: 580px; margin-top: 26px; color: #9bb2bf; font-size: 1.05rem; line-height: 1.7; }
.hero-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 14px 18px; background: #35c4df; color: #061522; border-radius: 6px; font-size: .88rem; font-weight: 800; text-decoration: none; }
.hero-cta:hover { background: #7dd3fc; }
.hero-note { margin-top: 10px; color: #adbdd4; font-size: .72rem; }
.hero-mark { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #0d2736; background-image: radial-gradient(circle at 1px 1px, rgba(125,211,252,.16) 1px, transparent 0); background-size: 22px 22px; border: 1px solid #1c4c62; border-radius: 8px; box-shadow: 22px 22px 0 #05101b; }
.hero-mark .logo { width: min(220px, 58%); height: auto; filter: drop-shadow(0 18px 32px rgba(0,0,0,.35)); }
.hero-mark strong { margin-top: 22px; color: #f4fbfd; font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; font-weight: 400; }
.hero-mark span { margin-top: 6px; color: #7a9baa; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.landing-features { padding: 96px max(24px, calc((100vw - 1180px) / 2)); background: #e8f2f1; color: #102b35; }
.feature-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: end; margin-bottom: 52px; }
.feature-heading .hero-kicker { margin: 0 0 8px; color: #07485a; }
.feature-heading h2, .landing-start h2 { max-width: 700px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.2rem, 4vw, 3.7rem); line-height: 1.04; font-weight: 400; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #9eb9ba; }
.feature-grid article { padding: 26px 26px 10px 0; border-right: 1px solid #b8cecd; }
.feature-grid article + article { padding-left: 26px; }
.feature-grid article:last-child { border-right: 0; }
.feature-number { color: #07485a; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.feature-grid h3 { margin-top: 34px; font-size: 1rem; }
.feature-grid p { margin-top: 12px; color: #4c6a70; font-size: .82rem; line-height: 1.65; }
.service-pools { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; margin-top: 58px; padding: 30px; border: 1px solid #9eb9ba; border-radius: 8px; background: rgba(255,255,255,.42); }
.service-pools .hero-kicker { margin: 4px 0 0; color: #07485a; }
.service-pools h3 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 400; line-height: 1.15; }
.service-pools div p { max-width: 720px; margin-top: 14px; color: #4c6a70; font-size: .88rem; line-height: 1.7; }
.landing-start { padding: 96px max(24px, calc((100vw - 1180px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; background: #0c2d3a; }
.landing-start > div > p:last-child { max-width: 520px; margin-top: 20px; color: #91adb7; font-size: .9rem; line-height: 1.7; }
.trial-form { padding: 30px; background: #f4fbfd; color: #102b35; border-radius: 8px; }
.trial-form label { display: block; margin-bottom: 9px; font-size: .76rem; font-weight: 800; }
.trial-fields { display: grid; grid-template-columns: 1fr auto; }
.trial-fields input { min-width: 0; padding: 14px 15px; border: 1px solid #9eb9ba; border-right: 0; border-radius: 5px 0 0 5px; color: #102b35; background: #fff; font: inherit; font-size: .86rem; }
.trial-fields input:focus { outline: 2px solid #35c4df; outline-offset: -2px; }
.trial-fields button { padding: 14px 18px; border: 0; border-radius: 0 5px 5px 0; background: #087996; color: #fff; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.trial-fields button:hover { background: #075f77; }
.trial-disclaimer { margin-top: 11px; color: #42585e; font-size: .68rem; line-height: 1.5; }
.signin-error { margin-top: 14px; font-size: .78rem; color: #b42318; line-height: 1.45; }
.landing-signin-error { max-width: 680px; margin: 18px auto 0; padding: 0 24px; }
@media (max-width: 820px) {
  .landing-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 52px; }
  .hero-mark { min-height: 330px; box-shadow: 12px 12px 0 #05101b; }
  .feature-heading, .service-pools, .landing-start { grid-template-columns: 1fr; gap: 34px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid article:nth-child(2) { border-right: 0; }
  .feature-grid article:nth-child(n+3) { border-top: 1px solid #b8cecd; }
}
@media (max-width: 520px) {
  .landing-nav { height: calc(64px + var(--safe-area-top)); padding: var(--safe-area-top) max(18px, var(--safe-area-right)) 0 max(18px, var(--safe-area-left)); }
  .landing-brand .logo { width: 34px; height: 34px; }
  .landing-brand span { display: none; }
  .landing-actions { gap: 12px; }
  .landing-actions .landing-signin:last-child { display: none; }
  .landing-login { padding: 7px 11px; }
  .landing-hero { min-height: auto; padding: 46px 18px 54px; }
  .hero-copy h1 { font-size: 2.8rem; }
  .hero-mark { min-height: 280px; }
  .landing-features, .landing-start { padding: 70px 18px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article, .feature-grid article + article { padding: 24px 0; border-right: 0; border-top: 1px solid #b8cecd; }
  .trial-form { padding: 22px; }
  .trial-fields { grid-template-columns: 1fr; gap: 9px; }
  .trial-fields input, .trial-fields button { min-height: 48px; border: 1px solid #9eb9ba; border-radius: 5px; }
}

/* ── PRICING PAGE ── */
.pricing-page { min-height: 100vh; background: #071421; color: #e6f3f7; }
.pricing-main { max-width: 1040px; margin: 0 auto; padding: 88px 24px 96px; }
.pricing-heading { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.pricing-heading h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.8rem, 6vw, 4.8rem); font-weight: 400; line-height: 1; color: #f4fbfd; }
.pricing-heading > p:last-child { max-width: 600px; margin: 22px auto 0; color: #9bb2bf; font-size: 1rem; line-height: 1.7; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pricing-card { display: flex; flex-direction: column; padding: 36px; border: 1px solid #1c4c62; border-radius: 10px; background: #0d2736; }
.pricing-card.featured { border-color: #35c4df; box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.pricing-audience { color: #7dd3fc; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.pricing-card h2 { margin-top: 10px; font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; font-weight: 400; color: #f4fbfd; }
.pricing-amount { display: flex; align-items: baseline; gap: 6px; margin-top: 24px; }
.pricing-amount strong { font-size: 3.2rem; line-height: 1; color: #f4fbfd; }
.pricing-amount span { color: #9bb2bf; font-size: .82rem; }
.pricing-summary { min-height: 50px; margin-top: 18px; color: #a9c0c9; font-size: .88rem; line-height: 1.6; }
.pricing-benefits { flex: 1; margin: 28px 0 32px; padding: 24px 0 0; border-top: 1px solid #1c4c62; list-style: none; }
.pricing-benefits li { position: relative; margin-top: 13px; padding-left: 25px; color: #d3e4e9; font-size: .84rem; line-height: 1.5; }
.pricing-benefits li:first-child { margin-top: 0; }
.pricing-benefits li::before { position: absolute; left: 0; color: #35c4df; content: "✓"; font-weight: 800; }
.pricing-cta { display: block; padding: 14px 18px; border: 1px solid #35c4df; border-radius: 6px; color: #7dd3fc; font-size: .84rem; font-weight: 800; text-align: center; text-decoration: none; }
.pricing-actions { display: grid; gap: 12px; }
.pricing-subscribe { background: #35c4df; color: #061522; }
.pricing-cta:hover { background: #7dd3fc; color: #061522; }
.pricing-trial-link { color: #b8d7df; font-size: .78rem; font-weight: 700; text-align: center; text-underline-offset: 3px; }
.pricing-trial-link:hover { color: #7dd3fc; }
.pricing-fineprint { margin-top: 28px; color: #7896a2; font-size: .74rem; line-height: 1.6; text-align: center; }
.pricing-trial { margin-top: 64px; padding: 48px; border: 1px solid #1c4c62; border-radius: 10px; }
@media (max-width: 700px) {
  .pricing-main { padding: 64px 18px 72px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 28px; }
  .pricing-summary { min-height: 0; }
  .pricing-trial { padding: 32px 22px; }
}

/* ── LANDING SHOWCASE ── */
.landing-showcase { padding: 96px max(24px, calc((100vw - 1180px) / 2)); background: #0a2331; color: #e6f3f7; }
.showcase-heading { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.showcase-heading .hero-kicker { color: #38bdf8; }
.showcase-heading h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; font-weight: 400; color: #f4fbfd; }
.showcase-lede { margin-top: 18px; color: #9bb2bf; font-size: 1rem; line-height: 1.7; }
.showcase-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; margin-bottom: 72px; }
.showcase-row.reverse { grid-template-columns: .9fr 1.1fr; }
.showcase-row:last-child { margin-bottom: 0; }
.showcase-row.reverse .showcase-media { order: 2; }
.showcase-media { margin: 0; border: 1px solid #1c4c62; border-radius: 12px; overflow: hidden; background: #0d2736; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.showcase-media img { display: block; width: 100%; height: auto; }
.showcase-tag { color: #38bdf8; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.showcase-copy h3 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 400; line-height: 1.15; color: #f4fbfd; }
.showcase-copy p { margin-top: 14px; color: #9bb2bf; font-size: .98rem; line-height: 1.75; max-width: 46ch; }
.landing-faq { padding: 96px max(24px, calc((100vw - 1180px) / 2)); background: #e8f2f1; color: #102b35; }
.faq-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: end; margin-bottom: 46px; }
.faq-heading .hero-kicker { margin: 0 0 8px; color: #07485a; }
.faq-heading h2 { max-width: 720px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.2rem, 4vw, 3.7rem); line-height: 1.04; font-weight: 400; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #9eb9ba; }
.faq-grid article { padding: 26px 28px 26px 0; border-bottom: 1px solid #b8cecd; }
.faq-grid article:nth-child(even) { padding-left: 28px; border-left: 1px solid #b8cecd; }
.faq-grid h3 { font-size: 1rem; }
.faq-grid p { margin-top: 10px; color: #4c6a70; font-size: .84rem; line-height: 1.65; }
@media (max-width: 820px) {
  .landing-showcase { padding: 70px 18px; }
  .showcase-heading { margin-bottom: 44px; }
  .showcase-row, .showcase-row.reverse { grid-template-columns: 1fr; gap: 22px; margin-bottom: 52px; }
  .showcase-row.reverse .showcase-media { order: 0; }
  .landing-faq { padding: 70px 18px; }
  .faq-heading { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid article, .faq-grid article:nth-child(even) { padding: 24px 0; border-left: 0; }
}

/* ── HEADER ── */
body > header { background: linear-gradient(135deg, #0d2240 0%, #1a3a5c 100%); padding: calc(20px + var(--safe-area-top)) max(28px, var(--safe-area-right)) 20px max(28px, var(--safe-area-left)); border-bottom: 1px solid #1e3a5c; display: flex; align-items: center; gap: 16px; }
body > header .logo { width: 36px; height: 36px; flex-shrink: 0; }
body > header h1 { font-size: 1.4rem; font-weight: 700; color: #7dd3fc; }
body > header p { font-size: .78rem; color: #adbdd4; margin-top: 2px; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pool-switcher { position: relative; }
.pool-switcher-btn { display: flex; align-items: center; gap: 7px; max-width: min(420px, 48vw); padding: 0; border: 0; background: none; color: #7dd3fc; cursor: pointer; font: inherit; font-size: 1.4rem; font-weight: 700; text-align: left; }
.pool-switcher-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-switcher-chev { flex-shrink: 0; font-size: .7rem; color: #adbdd4; transition: transform .15s; }
.pool-switcher-btn[aria-expanded="true"] .pool-switcher-chev { transform: rotate(180deg); }
.pool-switcher-menu { position: absolute; left: 0; top: calc(100% + 8px); min-width: min(280px, calc(100vw - 28px)); max-width: 360px; max-height: min(420px, 65vh); overflow-y: auto; background: #0f1c2e; border: 1px solid #1e3a5c; border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.5); z-index: 70; }
.pool-switcher-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pool-switcher-item.active { background: #16273d; color: #7dd3fc; }
.pool-switcher-check { color: #35c4df; }
.user-menu { position: relative; }
.user-chip { display: flex; align-items: center; gap: 7px; background: #132033; border: 1px solid #1e3a5c; border-radius: 20px; padding: 4px 12px 4px 8px; cursor: pointer; font: inherit; transition: border-color .15s; }
.user-chip:hover { border-color: #2d5a8e; }
.user-chip[aria-expanded="true"] { border-color: #2d5a8e; background: #16273d; }
.user-chev { font-size: .6rem; color: #adbdd4; transition: transform .15s; }
.user-chip[aria-expanded="true"] .user-chev { transform: rotate(180deg); }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: #0f1c2e; border: 1px solid #1e3a5c; border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.5); z-index: 60; display: flex; flex-direction: column; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; color: #cbd5e1; cursor: pointer; font: inherit; font-size: .8rem; padding: 8px 12px; text-decoration: none; transition: background .12s, color .12s; }
.menu-item:hover, .menu-item:focus-visible { background: #16273d; color: #7dd3fc; outline: none; }
.menu-item:disabled { color: #adbdd4; cursor: default; background: none; }
.menu-danger { color: #f87171; }
.menu-danger:hover, .menu-danger:focus-visible { background: #2a1520; color: #fca5a5; }
.menu-sep { height: 1px; background: #1e3a5c; margin: 5px 6px; }
.user-avatar { width: 24px; height: 24px; border-radius: 50%; background: #2d5a8e; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #e6f4ff; flex-shrink: 0; }
.user-name { font-size: .75rem; color: #adbdd4; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-status { font-size: .75rem; color: #adbdd4; display: flex; align-items: center; gap: 5px; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #64748b; flex-shrink: 0; }
.sync-dot.ok   { background: #22c55e; }
.sync-dot.busy { background: #f59e0b; animation: pulse 1s infinite; }
.sync-dot.err  { background: #ef4444; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.btn-icon { background: none; border: 1px solid #1e3a5c; border-radius: 6px; color: #adbdd4; cursor: pointer; font-size: .78rem; padding: 5px 10px; transition: all .15s; white-space: nowrap; }
.btn-icon:hover { border-color: #2d5a8e; color: #7dd3fc; }

/* ── STATUS BAR ── */
.status-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 28px; background: #0d1f35; border-bottom: 1px solid #1e3a5c; }
.status-card { background: #132033; border-radius: 10px; padding: 10px 16px; flex: 1; min-width: 120px; border-left: 3px solid #64748b; }
.status-card.ok   { border-left-color: #22c55e; }
.status-card.warn { border-left-color: #f59e0b; }
.status-card.bad  { border-left-color: #ef4444; }
.status-card .label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #adbdd4; margin-bottom: 4px; }
.status-card .val   { font-size: 1.25rem; font-weight: 700; }
.status-card.ok   .val { color: #4ade80; }
.status-card.warn .val { color: #fbbf24; }
.status-card.bad  .val { color: #f87171; }
.status-card .ideal { font-size: .68rem; color: #adbdd4; margin-top: 2px; }

/* ── DOSING ── */
.dose-section:empty { display: none; }
.dose-section { background: #0b1c30; border-bottom: 1px solid #1e3a5c; padding: 16px 28px; }
.dose-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dose-head h3 { font-size: .9rem; font-weight: 700; color: #e0e8f0; }
.dose-sub { font-size: .72rem; color: #adbdd4; margin-top: 3px; }
.dose-prefs-btn { margin-left: auto; flex-shrink: 0; background: none; border: 1px solid #1e3a5c; border-radius: 6px; color: #adbdd4; cursor: pointer; font: inherit; font-size: .72rem; padding: 5px 10px; transition: all .15s; }
.dose-prefs-btn:hover { border-color: #2d5a8e; color: #7dd3fc; }
.dose-prefs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; padding: 12px 14px; background: #0d2236; border: 1px solid #1e3a5c; border-radius: 8px; }
.dose-prefs.hidden { display: none; }
.dose-pref { display: flex; flex-direction: column; gap: 5px; min-width: 200px; flex: 1; }
.dose-pref span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: #adbdd4; }
.dose-pref select { background: #0a1628; border: 1px solid #1e3a5c; border-radius: 6px; color: #e0e8f0; font: inherit; font-size: .8rem; padding: 7px 8px; }
.dose-pref select:focus { outline: none; border-color: #38bdf8; }
.dose-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dose-item { display: flex; gap: 12px; align-items: flex-start; background: #132033; border-left: 3px solid #38bdf8; border-radius: 8px; padding: 11px 14px; }
.dose-item-applied { border-left-color: #22c55e; }
.dose-step { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #1e3a5c; color: #7dd3fc; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dose-body { min-width: 0; flex: 1; }
.dose-amount { font-size: .92rem; font-weight: 700; color: #e0e8f0; }
.dose-amount span { font-weight: 500; color: #adbdd4; }
.dose-staged { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 4px; background: #422006; color: #fbbf24; font-size: .62rem; font-style: normal; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }
.dose-effect { font-size: .74rem; color: #7dd3fc; margin-top: 4px; }
.dose-side { font-size: .7rem; color: #fbbf24; margin-top: 3px; }
.dose-note { font-size: .7rem; color: #adbdd4; margin-top: 3px; line-height: 1.45; }
.dose-apply-btn { flex-shrink: 0; border: 1px solid #2d5a8e; border-radius: 6px; background: #0d2236; color: #7dd3fc; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; padding: 6px 10px; }
.dose-apply-btn:hover { border-color: #38bdf8; background: #132b43; color: #e0f2fe; }
.dose-apply-btn:disabled { cursor: default; opacity: 1; }
.dose-apply-btn.applied { border-color: #15803d; background: #123524; color: #86efac; }
.dose-ok { background: #132033; border-left: 3px solid #22c55e; border-radius: 8px; padding: 11px 14px; font-size: .82rem; color: #4ade80; }
.dose-empty { font-size: .82rem; color: #adbdd4; }
.dose-warnings { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dose-warn { background: #132033; border-left: 3px solid #f59e0b; border-radius: 6px; padding: 8px 12px; font-size: .76rem; color: #adbdd4; line-height: 1.45; }
.dose-swg { margin-top: 8px; background: #132033; border-left: 3px solid #35c4df; border-radius: 6px; padding: 8px 12px; font-size: .76rem; color: #adbdd4; line-height: 1.45; }
/* Salt readings are meaningless without a generator, so the column, the chart
   tab and the entry field only exist for pools that have one. */
body:not(.salt-pool) .col-salt { display: none !important; }
.treatment-row { cursor: default; background: rgba(34, 197, 94, .06); }
.treatment-label { display: block; width: fit-content; margin-bottom: 3px; padding: 1px 6px; border: 1px solid #15803d; border-radius: 999px; color: #86efac; font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.dose-disclaimer { margin-top: 10px; font-size: .68rem; color: #adbdd4; line-height: 1.5; }
.dose-disclaimer a { color: #7dd3fc; text-decoration: underline; }
@media (max-width: 520px) {
  .dose-section { padding: 14px 18px; }
  .dose-pref { min-width: 100%; }
  .dose-item { flex-wrap: wrap; }
  .dose-apply-btn { margin-left: 34px; }
}

/* ── WEATHER BAR ── */
.weather-bar { background: #0b1c30; border-bottom: 1px solid #1e3a5c; padding: 14px 28px; }
.wx-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.wx-now { display: flex; align-items: baseline; gap: 10px; }
.wx-now .wx-ico { align-self: center; display: flex; flex-shrink: 0; }
.wx-now .wx-ico svg { width: 32px; height: 32px; display: block; }
.wx-now .temp { font-size: 1.9rem; font-weight: 700; color: #7dd3fc; line-height: 1; }
.wx-now .cond { font-size: .9rem; color: #adbdd4; }
.wx-meta { font-size: .8rem; color: #adbdd4; display: flex; gap: 14px; flex-wrap: wrap; }
.wx-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: #adbdd4; }
.wx-refresh { margin-left: auto; background: none; border: 1px solid #1e3a5c; border-radius: 6px; color: #adbdd4; cursor: pointer; font-size: .78rem; padding: 4px 10px; transition: all .15s; }
.wx-refresh:hover { border-color: #2d5a8e; color: #7dd3fc; }
.wx-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.wx-day { background: #132033; border-radius: 10px; padding: 9px 12px; min-width: 108px; flex: 1; text-align: center; border-top: 3px solid #334155; }
.wx-day.hot  { border-top-color: #ef4444; }
.wx-day.warm { border-top-color: #f59e0b; }
.wx-day.wet  { border-top-color: #38bdf8; }
.wx-day.cold { border-top-color: #a78bfa; }
.wx-day .d-name { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: #adbdd4; margin-bottom: 5px; }
.wx-day .d-hi { font-size: 1.05rem; font-weight: 700; color: #e0e8f0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.wx-day .d-lo { font-size: .82rem; color: #adbdd4; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 1.1em; }
.wx-day .d-ico { display: flex; flex-shrink: 0; }
.wx-day .d-hi .d-ico svg { width: 21px; height: 21px; display: block; }
.wx-day .d-lo .d-ico svg { width: 16px; height: 16px; display: block; }
.wx-day .d-pop { font-size: .76rem; color: #38bdf8; margin-top: 3px; min-height: .9em; }
.wx-day .d-cond { font-size: .74rem; color: #adbdd4; margin-top: 3px; line-height: 1.25; }
.wx-impacts { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.wx-impact { background: #132033; border-left: 3px solid #64748b; border-radius: 6px; padding: 8px 12px; font-size: .82rem; color: #adbdd4; line-height: 1.45; }
.wx-impact.alert { border-left-color: #ef4444; }
.wx-impact.warn  { border-left-color: #f59e0b; }
.wx-impact.info  { border-left-color: #38bdf8; }
.wx-impact.ok    { border-left-color: #22c55e; }
.wx-impact b { color: #e0e8f0; font-weight: 600; }
.wx-disclaimer { font-size: .76rem; color: #adbdd4; line-height: 1.4; padding: 2px 12px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 9999;
  transform: translateX(-50%) translateY(12px);
  max-width: min(90vw, 420px);
  background: #1e293b; color: #e0e8f0;
  border: 1px solid #334155; border-left: 3px solid #22c55e; border-radius: 8px;
  padding: 10px 16px; font-size: .8rem; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wx-msg { font-size: .82rem; color: #adbdd4; padding: 4px 0; }
.wx-msg.err { color: #f87171; }

/* ── CHART TOOLTIP (custom HTML so we can render weather icons) ── */
.chart-tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 120;
  background: #0d1f35; border: 1px solid #2d5a8e; border-radius: 8px; padding: 9px 12px; min-width: 158px;
  font-size: .78rem; color: #e0e8f0; box-shadow: 0 6px 20px rgba(0,0,0,.5); transform: translate(-50%,-100%); }
.chart-tip .tip-date { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: #adbdd4; margin-bottom: 4px; }
.chart-tip .tip-val { font-size: 1.02rem; font-weight: 700; }
.chart-tip .tip-band { font-size: .66rem; color: #adbdd4; margin-top: 1px; }
.chart-tip .tip-wx { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #1e3a5c; }
.chart-tip .tip-wx svg { width: 24px; height: 24px; flex-shrink: 0; }
.chart-tip .tip-temps { font-weight: 700; font-size: .84rem; }
.chart-tip .tip-cond { font-size: .68rem; color: #adbdd4; }
.chart-tip .tip-precip { font-size: .68rem; color: #38bdf8; margin-top: 5px; }
.chart-tip .tip-flag { display: inline-block; margin-top: 6px; margin-right: 4px; border-radius: 4px; padding: 1px 6px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
.chart-tip .tip-flag.freeze { background: #2e1065; color: #c4b5fd; }
.chart-tip .tip-flag.heat   { background: #450a0a; color: #fca5a5; }
.chart-tip .tip-flag.rain   { background: #082f49; color: #7dd3fc; }
.chart-tip .tip-nowx { font-size: .66rem; color: #adbdd4; margin-top: 7px; padding-top: 7px; border-top: 1px solid #1e3a5c; }

/* ── POOL SETUP ── */
.pool-setup-cta { color: #7dd3fc; font-weight: 600; cursor: pointer; text-decoration: none; border-bottom: 1px solid #2d5a8e; }
.pool-setup-cta:hover { border-bottom-color: #7dd3fc; }
.pool-setup-why { color: #adbdd4; margin-left: 12px; font-size: .96em; }
.empty-row { text-align: center; color: #adbdd4; padding: 26px 12px !important; font-size: .84rem; }
.wx-link { color: #7dd3fc; cursor: pointer; border-bottom: 1px solid #2d5a8e; }
.wx-link:hover { border-bottom-color: #7dd3fc; }
.pool-name { color: #e0e8f0; font-weight: 600; }
.pool-glyph { display: inline-block; vertical-align: -2px; margin-right: 7px; }
.pool-glyph svg { width: 15px; height: 12px; }
.pool-empty-state { margin: 48px auto; max-width: 520px; padding: 38px 28px; text-align: center; }
.pool-empty-state .logo { width: 64px; height: 64px; margin-bottom: 18px; }
.pool-empty-state h2 { color: #e0e8f0; font-size: 1.3rem; margin-bottom: 8px; }
.pool-empty-state p { color: #adbdd4; font-size: .88rem; line-height: 1.6; margin-bottom: 20px; }
body.no-active-pool #viewHome > :not(.pool-empty-state) { display: none; }
.setup-overlay { position: fixed; inset: 0; background: rgba(6,14,26,.82); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: max(32px, var(--safe-area-top)) max(16px, var(--safe-area-right)) max(32px, var(--safe-area-bottom)) max(16px, var(--safe-area-left)); overflow-y: auto; }
.setup-overlay.hidden { display: none; }
.setup-panel { background: #0d1f35; border: 1px solid #2d5a8e; border-radius: 14px; width: 100%; max-width: 700px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.setup-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid #1e3a5c; }
.setup-head h2 { font-size: 1.05rem; font-weight: 700; color: #e0e8f0; }
.setup-head p { font-size: .74rem; color: #adbdd4; margin-top: 2px; }
.setup-close { margin-left: auto; background: none; border: 1px solid #1e3a5c; border-radius: 6px; color: #adbdd4; cursor: pointer; font-size: 1rem; line-height: 1; padding: 5px 9px; }
.setup-close:hover { border-color: #2d5a8e; color: #7dd3fc; }
.setup-body { padding: 20px 24px; }
.setup-section { margin-bottom: 22px; }
.setup-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #adbdd4; margin-bottom: 10px; }
.opt-grid { display: grid; gap: 10px; }
.opt-grid.shapes { grid-template-columns: repeat(4, 1fr); }
.opt-grid.grades { grid-template-columns: repeat(3, 1fr); }
.opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; background: #132033; border: 1px solid #1e3a5c; border-radius: 10px; padding: 12px 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.opt:hover { border-color: #2d5a8e; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt:has(input:checked) { border-color: #38bdf8; background: #16293f; }
.opt:has(input:focus-visible) { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.opt-fig svg { display: block; width: 100%; height: auto; }
.opt-grid.shapes .opt-fig { width: 46px; }
.opt-grid.grades .opt-fig { width: 100%; }
.opt-name { font-size: .74rem; font-weight: 600; color: #adbdd4; text-align: center; }
.opt:has(input:checked) .opt-name { color: #7dd3fc; }
.opt-sub { font-size: .64rem; color: #adbdd4; text-align: center; line-height: 1.3; }
.dim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dim { display: flex; flex-direction: column; gap: 5px; }
.dim.hidden { display: none; }
.dim label { font-size: .72rem; color: #adbdd4; }
.dim .hint { font-size: .64rem; color: #adbdd4; }
.ftin { display: flex; align-items: center; gap: 5px; }
.ftin input { width: 100%; min-width: 0; background: #0a1628; border: 1px solid #1e3a5c; border-radius: 6px; color: #e0e8f0; font-size: .86rem; padding: 7px 8px; font-family: inherit; }
.ftin input:focus { outline: none; border-color: #38bdf8; }
.ftin span { font-size: .68rem; color: #adbdd4; }
.setup-text { width: 100%; min-width: 0; max-width: 100%; background: #0a1628; border: 1px solid #1e3a5c; border-radius: 6px; color: #e0e8f0; font-size: .86rem; padding: 8px 10px; font-family: inherit; }
.setup-text:focus { outline: none; border-color: #38bdf8; }
.vol-box { background: #132033; border: 1px solid #1e3a5c; border-radius: 10px; padding: 14px 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vol-box .vol-num { font-size: 1.6rem; font-weight: 700; color: #7dd3fc; }
.vol-box .vol-unit { font-size: .8rem; color: #adbdd4; }
.vol-box .vol-detail { font-size: .7rem; color: #adbdd4; margin-left: auto; text-align: right; line-height: 1.5; }
.vol-err { color: #f87171; font-size: .76rem; margin-top: 8px; }
.vol-warn { color: #fbbf24; font-size: .74rem; margin-top: 8px; line-height: 1.45; }
/* Both dialog action bars share one treatment. The affirmative button borrows
   the landing page call to action colour, and 44px is the touch target WCAG
   2.5.5 and Apple's guidance agree on. The transparent border matches Cancel's
   1px, which Chrome adds outside the flex base size when the two stretch. */
.setup-actions, .setup-foot { display: flex; gap: 12px; justify-content: center; padding: 16px 24px 20px; border-top: 1px solid #1e3a5c; }
.setup-actions button, .setup-foot button { box-sizing: border-box; min-height: 44px; min-width: 132px; padding: 12px 28px; font-size: .88rem; border-radius: 8px; }
.setup-actions .btn-icon, .setup-foot .btn-icon { color: #adbdd4; font-weight: 600; }
.setup-actions .btn-icon:hover, .setup-foot .btn-icon:hover { border-color: #2d5a8e; color: #7dd3fc; }
.btn-save { background: #35c4df; border: 1px solid transparent; border-radius: 8px; color: #061522; cursor: pointer; font-size: .88rem; font-weight: 800; padding: 12px 28px; }
.btn-save:hover { background: #7dd3fc; color: #061522; }
/* A dimmed bright cyan reads as a rendering fault rather than an unavailable
   control, so disabled gets its own flat slate instead of reduced opacity. */
.btn-save:disabled { background: #16273d; color: #a3b4cc; border-color: #1e3a5c; cursor: default; }
.btn-save:disabled:hover { background: #16273d; color: #a3b4cc; }
@media (max-width: 620px) {
  .opt-grid.shapes { grid-template-columns: repeat(2, 1fr); }
  .opt-grid.grades { grid-template-columns: 1fr; }
  .dim-grid { grid-template-columns: 1fr; }
}

/* ── TABS ── */
.tabs { display: flex; gap: 4px; padding: 16px 28px 0; overflow-x: auto; }
.tab { padding: 8px 18px; border-radius: 8px 8px 0 0; font-size: .82rem; font-weight: 600; cursor: pointer; background: #132033; color: #adbdd4; border: 1px solid #1e3a5c; border-bottom: none; transition: all .15s; white-space: nowrap; user-select: none; }
.tab.active { background: #1a3a5c; color: #7dd3fc; border-color: #2d5a8e; }
.tab:hover:not(.active) { background: #1a2d45; color: #adbdd4; }

/* ── CHARTS ── */
.chart-section { background: #132033; margin: 0 28px; border: 1px solid #1e3a5c; border-radius: 0 12px 12px 12px; padding: 20px; }
.chart-wrap { position: relative; height: 280px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #1e3a5c; font-size: .75rem; color: #adbdd4; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot  { width: 10px; height: 10px; border-radius: 50%; }
.legend-band { width: 18px; height: 8px; border-radius: 2px; opacity: .35; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 28px; }
@media(max-width:700px){ .grid { grid-template-columns: 1fr; } }
.mini-card { background: #132033; border: 1px solid #1e3a5c; border-radius: 10px; padding: 14px; }
.mini-card h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: #adbdd4; margin-bottom: 10px; }
.mini-chart-wrap { position: relative; height: 160px; }

/* ── TABLE ── */
.table-section { margin: 0 28px 28px; background: #132033; border: 1px solid #1e3a5c; border-radius: 12px; overflow: hidden; }
.table-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #1e3a5c; }
.table-header h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: #adbdd4; }
.add-btn { background: #1a3a5c; border: 1px solid #2d5a8e; color: #7dd3fc; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: .78rem; font-weight: 600; transition: background .15s; }
.add-btn:hover { background: #2d5a8e; }
.add-btn:disabled { opacity: .4; cursor: default; }
.ai-btn { background: transparent; border: 1px solid #334155; color: #adbdd4; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: .78rem; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.ai-btn:hover { background: #1e293b; color: #e0e8f0; border-color: #475569; }
.ai-btn:disabled { opacity: .4; cursor: default; }
.table-actions { display: flex; align-items: center; gap: 8px; }
.export-btn { background: none; border: 1px solid #2d5a8e; color: #adbdd4; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: .78rem; font-weight: 600; transition: all .15s; white-space: nowrap; }
.export-btn:hover:not(:disabled) { background: #132033; border-color: #7dd3fc; color: #7dd3fc; }
.export-btn:disabled { opacity: .4; cursor: default; }
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 860px; }
th { padding: 8px 10px; text-align: left; background: #0d1f35; color: #adbdd4; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
td { padding: 7px 10px; border-top: 1px solid #1a2d45; vertical-align: middle; }
tr.data-row { cursor: pointer; }
tr.data-row:hover td { background: #1e3a5c !important; }
tr.today-row td { background: #152a40 !important; }
tr.today-row:hover td { background: #1e3a5c !important; }
tr.add-row td, tr.edit-row td { background: #0d1f35 !important; }

/* ── BADGES ── */
.badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: .7rem; font-weight: 700; }
.badge-ok   { background: #14532d; color: #4ade80; }
.badge-warn { background: #451a03; color: #fbbf24; }
.badge-bad  { background: #450a0a; color: #f87171; }

/* ── NOTES ── */
.notes-cell { max-width: 240px; }
.notes-text { color: #adbdd4; font-size: .78rem; line-height: 1.4; word-break: break-word; }
.notes-toggle { background: none; border: none; color: #3b82f6; cursor: pointer; font-size: .72rem; margin-left: 4px; padding: 0; }
.notes-toggle:hover { color: #7dd3fc; }

/* ── EDIT CONTROLS ── */
.edit-input { background: #0a1628; border: 1px solid #2d5a8e; border-radius: 4px; color: #e0e8f0; padding: 4px 6px; font-size: .8rem; font-family: inherit; transition: border-color .15s; }
.edit-input:focus { outline: none; border-color: #7dd3fc; }
.edit-input.w-date  { width: 130px; color-scheme: dark; cursor: text; }
.edit-input.w-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }
.edit-input.w-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.edit-input.w-num   { width: 66px; }
.edit-input.w-notes { width: 100%; min-height: 52px; resize: vertical; }
.action-cell { white-space: nowrap; }
/* Scoped to the table row editor. Unscoped these override the dialog .btn-save
   above, which is why the setup dialog's Save button rendered small and green. */
.action-cell .btn-save   { background: #14532d; color: #4ade80; border: none; border-radius: 4px; padding: 5px 10px; cursor: pointer; font-size: .8rem; font-weight: 700; }
.action-cell .btn-cancel { background: #1e293b; color: #adbdd4; border: 1px solid #334155; border-radius: 4px; padding: 5px 10px; cursor: pointer; font-size: .8rem; margin-left: 4px; }
.action-cell .btn-save:hover   { background: #166534; }
.action-cell .btn-cancel:hover { background: #334155; }
.btn-delete { background: transparent; color: #adbdd4; border: none; border-radius: 4px; padding: 4px 6px; cursor: pointer; font-size: .85rem; opacity: .6; }
.btn-delete:hover { background: #7f1d1d; color: #fca5a5; opacity: 1; }

/* ── LOADING ── */
.loading-overlay { position: fixed; inset: 0; background: rgba(10,22,40,.9); z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.spinner { width: 40px; height: 40px; border: 3px solid #1e3a5c; border-top-color: #7dd3fc; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay p { color: #adbdd4; font-size: .9rem; }
.hidden { display: none !important; }

/* ── ADMIN CONSOLE ── */
.admin-gate { display: flex; align-items: center; justify-content: center; padding: 64px 20px; }
.admin-gate-card { background: #0f1c2e; border: 1px solid #1e3a5c; border-radius: 12px; padding: 28px 32px; text-align: center; max-width: 420px; }
.admin-gate-card h2 { color: #7dd3fc; font-size: 1.05rem; margin-bottom: 8px; }
.admin-gate-card p { color: #adbdd4; font-size: .82rem; line-height: 1.5; margin-bottom: 16px; }
.gate-identity { text-align: left; background: #0b1524; border: 1px solid #1e3a5c; border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.gate-identity-who { color: #cbd5e1 !important; font-size: .78rem !important; margin-bottom: 10px !important; }
.gate-identity-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.gate-identity-label { color: #adbdd4; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; min-width: 62px; }
.gate-identity-value { color: #7dd3fc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; word-break: break-all; flex: 1; user-select: all; }
.gate-copy { background: #1e3a5c; border: none; border-radius: 5px; color: #cbd5e1; cursor: pointer; font-size: .68rem; padding: 4px 9px; }
.gate-copy:hover { background: #2b5183; }
.admin-main { padding: 20px 28px 40px; }
.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-search { flex: 1; min-width: 240px; background: #0f1c2e; border: 1px solid #1e3a5c; border-radius: 8px; color: #e2e8f0; font: inherit; font-size: .82rem; padding: 8px 12px; }
.admin-search:focus { outline: none; border-color: #2d5a8e; }
.admin-count { color: #adbdd4; font-size: .75rem; }
.admin-banner { border-radius: 8px; font-size: .8rem; margin-bottom: 14px; padding: 10px 14px; }
.admin-banner.ok { background: #0d2a1a; border: 1px solid #1e5c3a; color: #86efac; }
.admin-banner.err { background: #2a1520; border: 1px solid #7f1d1d; color: #fca5a5; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.admin-table th { background: #0d1c30; color: #adbdd4; font-size: .68rem; font-weight: 600; letter-spacing: .04em; padding: 10px 12px; text-align: left; text-transform: uppercase; }
.admin-table td { border-top: 1px solid #16273d; color: #cbd5e1; padding: 10px 12px; vertical-align: middle; }
.admin-user-name { color: #e2e8f0; font-weight: 600; }
.admin-user-sub { color: #adbdd4; font-size: .72rem; margin-top: 2px; word-break: break-all; }
.admin-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-date { background: #0f1c2e; border: 1px solid #1e3a5c; border-radius: 6px; color: #cbd5e1; font: inherit; font-size: .76rem; padding: 4px 8px; color-scheme: dark; }
.admin-empty { color: #adbdd4; padding: 24px 12px; text-align: center; }
.btn-warn { border-color: #7f1d1d; color: #fca5a5; }
.btn-warn:hover { background: #2a1520; border-color: #b91c1c; }
.pill { border-radius: 12px; display: inline-block; font-size: .7rem; font-weight: 600; padding: 3px 10px; white-space: nowrap; }
.pill-trial { background: #1a2f4a; color: #7dd3fc; }
.pill-licensed { background: #0d2a1a; color: #86efac; }
.pill-expired { background: #2a1520; color: #fca5a5; }

.landing-footer { text-align: center; padding: 24px 18px; background: #07141e; font-size: .76rem; color: #adbdd4; border-top: 1px solid #1e3a5c; }
.landing-footer a { color: #7dd3fc; text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }
footer { text-align: center; padding: 16px; font-size: .72rem; color: #a3b4cc; }

/* ── SUPPORT ── */
.support-fab { position: fixed; right: max(20px, var(--safe-area-right)); bottom: max(20px, var(--safe-area-bottom)); z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #2d5a8e; background: #123b58; color: #7dd3fc; font-size: 1.35rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.support-fab:hover { background: #0d5674; color: #e0f2fe; }
.support-fab:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.support-panel { max-width: 560px; }
.support-kinds { display: grid; gap: 8px; }
.support-kind { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #1e3a5c; border-radius: 8px; cursor: pointer; }
.support-kind:hover { border-color: #2d5a8e; background: #0d1f30; }
.support-kind input { margin-top: 3px; accent-color: #38bdf8; }
.support-kind span { display: flex; flex-direction: column; }
.support-kind strong { color: #e2e8f0; font-size: .86rem; font-weight: 600; }
.support-kind small { color: #adbdd4; font-size: .74rem; }
.support-panel input[type="text"],
.support-panel textarea { width: 100%; background: #0a1628; border: 1px solid #1e3a5c; border-radius: 6px; color: #e0e8f0; font-family: inherit; font-size: .86rem; padding: 8px 10px; }
.support-panel input[type="text"]:focus,
.support-panel textarea:focus { outline: none; border-color: #38bdf8; }
.support-panel textarea { resize: vertical; min-height: 120px; }
.support-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: .72rem; color: #adbdd4; }
.support-note { color: #fca5a5; font-size: .78rem; margin: 10px 0 0; min-height: 1em; }

@media (max-width: 520px) {
  .support-fab { right: max(14px, var(--safe-area-right)); bottom: max(14px, var(--safe-area-bottom)); width: 44px; height: 44px; }
  .setup-actions, .setup-foot { padding: 14px 16px 18px; }
  .setup-actions button, .setup-foot button { flex: 1; min-width: 0; padding: 12px 16px; }
}
/* ── VIEWS & APP NAV ── */
.view.hidden { display: none; }
#viewHistory { padding-top: 10px; }

/* The nav is the only way to reach History, so it shows at every width.
   Hiding it on desktop made that view unreachable. */
.app-nav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: fixed; z-index: 200;
  left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  bottom: max(18px, var(--safe-area-bottom));
  background: rgba(11, 28, 48, .96); backdrop-filter: blur(8px);
  border: 1px solid #1e3a5c; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  padding: 6px 4px;
}
/* The nav outranks the overlays (z-index 200 vs 100), so it floats over an open
   dialog and covers its buttons. Keyed off the overlay rather than toggled in
   each open/close path, so a future dialog cannot forget to do it. */
body:has(.setup-overlay:not(.hidden)) .app-nav { display: none; }
.nav-item {
  background: none; border: 0; cursor: pointer; color: #adbdd4;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; min-height: 52px; font-size: .6rem; letter-spacing: .02em;
}
.nav-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active { color: #35c4df; }
.nav-item:hover { color: #7dd3fc; }
/* Add sits proud of the bar so the primary action is the obvious one. */
.nav-item.nav-add { color: #7dd3fc; }
.nav-item.nav-add .nav-add-badge {
  background: #35c4df; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: -16px;
  box-shadow: 0 4px 12px rgba(53, 196, 223, .35);
}
.nav-item.nav-add .nav-add-badge svg { width: 21px; height: 21px; stroke: #061522; stroke-width: 2.8; }
body { padding-bottom: calc(104px + var(--safe-area-bottom)); }

@media (max-width: 760px) {
  .app-nav { left: max(12px, var(--safe-area-left)); right: max(12px, var(--safe-area-right)); width: auto; transform: none; bottom: max(6px, var(--safe-area-bottom)); }
  /* The nav occupies the corner the help button used, and help now lives in the
     profile menu, so the floating button is redundant on a phone. */
  .support-fab { display: none; }
  body { padding-bottom: calc(96px + var(--safe-area-bottom)); }
}

/* ── QUICK ENTRY ── */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quick-grid .dim label { display: block; }
.q-unit { color: #a3b4cc; font-weight: 400; }
.quick-notes { margin-top: 14px; }
.quick-email-fields { margin-top: 18px; padding: 18px; border: 1px solid #1e3a5c; border-radius: 8px; background: #0d1c2d; }
.quick-email-option { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; color: #cbd5e1; font-size: .8rem; line-height: 1.45; }
.quick-email-option input { margin-top: 2px; accent-color: #35c4df; }
.quick-panel { max-width: 560px; }
@media (max-width: 560px) { .quick-grid { grid-template-columns: repeat(2, 1fr); } }

/* Status cards accept inline entry, so they are role=button divs rather than
   real buttons: an input inside a button is invalid. */
.status-card { cursor: pointer; }
.status-card:hover { background: #16273d; }
.status-card:active { transform: scale(.985); }
.status-card .val-empty { color: #a3b4cc; }
.card-input {
  width: 100%; box-sizing: border-box; background: #0a1628; color: #e0e8f0;
  border: 1px solid #35c4df; border-radius: 6px; padding: 2px 6px;
  font-size: 1.25rem; font-weight: 700; font-family: inherit;
}
.card-input:focus { outline: none; }

/* ── PROFILE VIEW ── */
.profile-card { background: #132033; border: 1px solid #1e3a5c; border-radius: 12px; margin: 16px 28px; padding: 18px; }
.profile-id { display: flex; align-items: center; gap: 14px; }
.profile-avatar { width: 46px; height: 46px; border-radius: 50%; background: #1a3a5c; color: #7dd3fc;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; flex-shrink: 0; }
.profile-name { font-size: 1.05rem; font-weight: 700; color: #e0e8f0; }
.profile-sub { font-size: .78rem; color: #adbdd4; margin-top: 2px; }
.profile-status { margin-top: 14px; padding-top: 14px; border-top: 1px solid #1e3a5c; font-size: .82rem; color: #7dd3fc; }
.profile-pools { background: #132033; border: 1px solid #1e3a5c; border-radius: 12px; margin: 16px 28px; overflow: hidden; }
.profile-pools-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border-bottom: 1px solid #1e3a5c; }
.profile-pools-head h2 { color: #e0e8f0; font-size: 1rem; }
.profile-pools-head p { color: #adbdd4; font-size: .75rem; margin-top: 3px; }
.profile-pool-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #1e3a5c; }
.profile-pool-row:last-child { border-bottom: 0; }
.profile-pool-select { min-width: 0; border: 0; background: none; color: #e0e8f0; cursor: pointer; font: inherit; text-align: left; }
.profile-pool-select strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.profile-pool-select span { color: #7dd3fc; font-size: .68rem; }
.profile-pool-action { border: 1px solid #2d5a8e; border-radius: 7px; background: transparent; color: #adbdd4; cursor: pointer; font: inherit; font-size: .72rem; padding: 6px 9px; }
.profile-pool-action:hover { color: #7dd3fc; border-color: #7dd3fc; }
.profile-pool-action.danger { color: #f87171; border-color: #7f3544; }
.profile-pool-empty { padding: 22px 18px; color: #adbdd4; font-size: .82rem; text-align: center; }
.billing-btn { width: 100%; margin-top: 12px; padding: 11px 16px; border: 0; border-radius: 10px; background: #35c4df; color: #061522; font-size: .9rem; font-weight: 600; cursor: pointer; }
.billing-btn:hover { background: #7dd3fc; }
.billing-btn:disabled { background: #16273d; color: #a3b4cc; cursor: default; }
.billing-btn.secondary { background: transparent; border: 1px solid #2d5a8e; color: #7dd3fc; }
.billing-btn.secondary:hover { background: #16273d; }
.billing-note { margin-top: 10px; font-size: .78rem; color: #adbdd4; }
.billing-note.error { color: #fca5a5; }

/* Scoped to beat ".trial-form label", which otherwise forces weight 800 and
   display:block. Consent text has to be legible, not decorative fine print. */
.trial-form .trial-terms { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; margin-bottom: 0; font-size: .72rem; font-weight: 500; line-height: 1.55; color: #24454f; cursor: pointer; }
.trial-form .trial-terms input { margin-top: 1px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: #1d6b84; cursor: pointer; }
.trial-form .trial-terms a { color: #14607a; text-decoration: underline; }

/* Sits above every other overlay: it gates the app rather than decorating it. */
.terms-gate { position: fixed; inset: 0; z-index: 900; background: rgba(6, 21, 34, .92); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.terms-gate-card { width: min(520px, 100%); background: #132033; border: 1px solid #1e3a5c; border-radius: 14px; padding: 26px 24px; }
.terms-gate-card h2 { font-size: 1.15rem; color: #f0f8ff; margin-bottom: 14px; }
.terms-gate-card p { font-size: .86rem; line-height: 1.65; color: #cbd5e1; margin-bottom: 12px; }
.terms-gate-card strong { color: #f0f8ff; }
.terms-gate-link a { color: #7dd3fc; font-size: .84rem; }
.terms-gate-choice { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 12px; color: #cbd5e1; font-size: .82rem; line-height: 1.5; cursor: pointer; }
.terms-gate-choice input { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; accent-color: #35c4df; cursor: pointer; }
.terms-gate-error { margin-bottom: 10px; font-size: .8rem; color: #fca5a5; }
#termsGateAccept { width: 100%; margin-top: 8px; padding: 12px 16px; border: 0; border-radius: 10px; background: #35c4df; color: #061522; font-size: .92rem; font-weight: 600; cursor: pointer; }
#termsGateAccept:hover { background: #7dd3fc; }
#termsGateAccept:disabled { background: #16273d; color: #a3b4cc; cursor: default; }
.profile-links { margin: 0 28px 28px; background: #132033; border: 1px solid #1e3a5c; border-radius: 12px; overflow: hidden; }
.profile-link { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between;
  background: none; border: 0; border-bottom: 1px solid #1e3a5c; color: #e0e8f0;
  font: inherit; font-size: .9rem; text-align: left; padding: 15px 18px; cursor: pointer; text-decoration: none; }
.profile-link:last-child { border-bottom: 0; }
.profile-link:hover { background: #16273d; }
.profile-link .chev { color: #a3b4cc; }
.profile-link.danger { color: #f87171; }
.theme-toggle { align-items: center; }
.header-theme-toggle { display: flex; gap: 7px; padding: 6px 9px; border: 1px solid #1e3a5c; border-radius: 6px; background: transparent; color: #adbdd4; cursor: pointer; font: inherit; font-size: .72rem; }
.header-theme-toggle:hover { border-color: #2d5a8e; color: #7dd3fc; }
.theme-toggle-label { line-height: 22px; }
.theme-switch { width: 38px; height: 22px; padding: 2px; border-radius: 12px; background: #2d5a8e; flex-shrink: 0; transition: background .15s; }
.theme-switch span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #e0e8f0; transition: transform .15s; }
.theme-toggle[aria-pressed="true"] .theme-switch { background: #087996; }
.theme-toggle[aria-pressed="true"] .theme-switch span { transform: translateX(16px); }

/* Dev-only preview theme. Production never applies this class. */
body.light-mode { background: #eef4f5; color: #17323a; }
body.light-mode > header { background: linear-gradient(135deg, #d8eef0 0%, #b9dce0 100%); border-color: #9fc5ca; }
body.light-mode > header h1 { color: #075f77; }
body.light-mode .sync-status,
body.light-mode .user-name { color: #42636a; }
body.light-mode > header p,
body.light-mode .pool-name { color: #17323a; }
body.light-mode .user-chip { background: #e9f4f4; border-color: #9fc5ca; }
body.light-mode .header-theme-toggle { border-color: #9fc5ca; color: #42636a; }
body.light-mode .header-theme-toggle:hover { border-color: #087996; color: #075f77; }
body.light-mode .status-bar,
body.light-mode .dose-section,
body.light-mode .weather-bar { background: #e1eff0; border-color: #b8d1d3; }
/* Background only — a border-color shorthand here would repaint the status accent edges grey. */
body.light-mode .status-card,
body.light-mode .dose-item,
body.light-mode .dose-ok,
body.light-mode .dose-warn,
body.light-mode .dose-swg,
body.light-mode .wx-day,
body.light-mode .wx-impact { background: #ffffff; }
body.light-mode .wx-impact,
body.light-mode .dose-warn,
body.light-mode .dose-swg { color: #17323a; }
body.light-mode .chart-section,
body.light-mode .mini-card,
body.light-mode .table-section,
body.light-mode .profile-card,
body.light-mode .profile-links,
body.light-mode .profile-pools { background: #ffffff; border-color: #b8d1d3; }
body.light-mode .pool-switcher-btn { color: #075f77; }
body.light-mode .pool-switcher-menu { background: #ffffff; border-color: #b8d1d3; }
body.light-mode .pool-switcher-item.active { background: #e7f1f2; color: #075f77; }
body.light-mode .pool-empty-state h2,
body.light-mode .profile-pools-head h2,
body.light-mode .profile-pool-select { color: #17323a; }
body.light-mode .pool-empty-state p,
body.light-mode .profile-pools-head p,
body.light-mode .profile-pool-empty { color: #42636a; }
body.light-mode .profile-pools-head,
body.light-mode .profile-pool-row { border-color: #d5e3e4; }
body.light-mode .status-card .label,
body.light-mode .status-card .ideal,
body.light-mode .dose-sub,
body.light-mode .dose-note,
body.light-mode .wx-meta,
body.light-mode .wx-title,
body.light-mode .wx-day .d-name,
body.light-mode .wx-day .d-lo,
body.light-mode .wx-day .d-cond,
body.light-mode .wx-disclaimer,
body.light-mode .profile-sub,
body.light-mode .billing-note,
body.light-mode .profile-link .chev,
body.light-mode .notes-text { color: #075f77; }
body.light-mode .dose-amount,
body.light-mode .wx-day .d-hi,
body.light-mode .wx-impact b,
body.light-mode .profile-name { color: #17323a; }
body.light-mode .dose-apply-btn { background: #ffffff; border-color: #087996; color: #075f77; }
body.light-mode .dose-apply-btn.applied { background: #dcfce7; border-color: #15803d; color: #166534; }
body.light-mode .treatment-row { background: #f0fdf4; }
body.light-mode .treatment-label { color: #166534; }
body.light-mode .dose-prefs,
body.light-mode th,
body.light-mode .setup-panel,
body.light-mode .setup-body,
body.light-mode tr.add-row td,
body.light-mode tr.edit-row td { background: #e7f1f2; border-color: #b8d1d3; }
body.light-mode .table-header,
body.light-mode .profile-status { border-color: #b8d1d3; }
body.light-mode .table-header h3,
body.light-mode .mini-card h3,
body.light-mode .dose-head h3,
body.light-mode .profile-status,
body.light-mode .setup-head h2 { color: #075f77; }
body.light-mode td { border-color: #d5e3e4; }
body.light-mode .profile-link { color: #17323a; border-color: #d5e3e4; }
body.light-mode .profile-link:hover,
body.light-mode .user-chip[aria-expanded="true"] { background: #e7f1f2; }
body.light-mode .setup-text,
body.light-mode .ftin input,
body.light-mode .dose-pref select,
body.light-mode .edit-input,
body.light-mode .card-input { background: #ffffff; border-color: #9fc5ca; color: #17323a; }
/* Pool setup modal: dark tiles and muted labels need the light treatment too. */
body.light-mode .setup-head,
body.light-mode .setup-actions,
body.light-mode .setup-foot { border-color: #b8d1d3; }
body.light-mode .setup-head p,
body.light-mode .setup-label,
body.light-mode .dim .hint,
body.light-mode .ftin span,
body.light-mode .opt-sub,
body.light-mode .setup-actions .btn-icon,
body.light-mode .setup-foot .btn-icon { color: #075f77; }
body.light-mode .dim label,
body.light-mode .opt-name { color: #17323a; }
body.light-mode .setup-close { color: #075f77; border-color: #9fc5ca; }
body.light-mode .setup-close:hover { color: #087996; border-color: #087996; }
body.light-mode .opt,
body.light-mode .vol-box { background: #ffffff; border-color: #b8d1d3; }
body.light-mode .opt:hover { border-color: #087996; }
body.light-mode .opt:has(input:checked) { background: #e1f2f6; border-color: #087996; }
body.light-mode .opt:has(input:checked) .opt-name { color: #075f77; }
body.light-mode .vol-warn { color: #b45309; }
body.light-mode .vol-err { color: #b91c1c; }
/* History actions: outlined buttons get dark text, Add Reading becomes the bright accent. */
body.light-mode .ai-btn { color: #17323a; border-color: #9fc5ca; }
body.light-mode .ai-btn:hover { background: #e1eff0; color: #075f77; border-color: #087996; }
body.light-mode .add-btn { background: #35c4df; border-color: transparent; color: #061522; }
body.light-mode .add-btn:hover { background: #7dd3fc; }
/* Support (feedback) modal radios and inputs on the light panel. */
body.light-mode .support-kind { border-color: #b8d1d3; }
body.light-mode .support-kind:hover { border-color: #087996; background: #e1eff0; }
body.light-mode .support-kind strong { color: #17323a; }
body.light-mode .support-kind small { color: #075f77; }
body.light-mode .support-meta { color: #075f77; }
body.light-mode .support-panel input[type="text"],
body.light-mode .support-panel textarea { background: #ffffff; border-color: #9fc5ca; color: #17323a; }
/* Admin console inherits the light theme too. */
body.light-mode .btn-icon { color: #075f77; border-color: #9fc5ca; }
body.light-mode .btn-icon:hover { color: #087996; border-color: #087996; }
body.light-mode .admin-gate-card { background: #ffffff; border-color: #b8d1d3; }
body.light-mode .admin-gate-card h2 { color: #075f77; }
body.light-mode .admin-gate-card p { color: #17323a; }
body.light-mode .admin-search,
body.light-mode .admin-date { background: #ffffff; border-color: #9fc5ca; color: #17323a; color-scheme: light; }
body.light-mode .admin-count,
body.light-mode .admin-user-sub,
body.light-mode .admin-empty { color: #075f77; }
body.light-mode .admin-table th { background: #e7f1f2; color: #075f77; }
body.light-mode .admin-table td { color: #17323a; border-color: #d5e3e4; }
body.light-mode .admin-user-name { color: #17323a; }
/* History measurement badges: bright fills with white text so status reads at a glance. */
body.light-mode .badge-ok,
body.light-mode .badge-warn,
body.light-mode .badge-bad { color: #ffffff; }
body.light-mode .badge-ok   { background: #16a34a; }
body.light-mode .badge-warn { background: #d97706; }
body.light-mode .badge-bad  { background: #dc2626; }
body.light-mode .app-nav { background: rgba(255,255,255,.96); border-color: #b8d1d3; }
body.light-mode .nav-item { color: #557278; }
body.light-mode .nav-item.active,
body.light-mode .nav-item:hover { color: #087996; }
body.light-mode .nav-item.nav-add { color: #075f77; }
body.light-mode .theme-switch span { background: #ffffff; }
/* Refresh and My products read as the active tab so they stand off the panel. */
body.light-mode .wx-refresh,
body.light-mode .dose-prefs-btn { background: #1a3a5c; color: #7dd3fc; border-color: #2d5a8e; }
body.light-mode .wx-refresh:hover,
body.light-mode .dose-prefs-btn:hover { background: #245483; color: #e0f2fe; border-color: #2d5a8e; }
/* Muted cyan/grey text is illegible on the light panels — pull it to the title tone. */
body.light-mode .wx-now .temp,
body.light-mode .wx-now .cond,
body.light-mode .wx-day .d-pop,
body.light-mode .dose-amount span,
body.light-mode .dose-pref span,
body.light-mode .dose-effect,
body.light-mode .dose-empty,
body.light-mode .dose-disclaimer,
body.light-mode .dose-disclaimer a,
body.light-mode .legend-row,
body.light-mode .empty-row,
body.light-mode .wx-msg,
body.light-mode .wx-link,
body.light-mode th,
body.light-mode .vol-box .vol-num,
body.light-mode .vol-box .vol-unit,
body.light-mode .vol-box .vol-detail,
body.light-mode .status-card .val .val-from,
body.light-mode .status-card .val .val-carried,
body.light-mode .notes-toggle { color: #075f77; }
/* Keep the red/amber/green semantics, but dark enough to read on white. */
body.light-mode .dose-side { color: #b45309; }
body.light-mode .status-card.ok   .val { color: #15803d; }
body.light-mode .status-card.warn .val { color: #b45309; }
body.light-mode .status-card.bad  .val { color: #b91c1c; }

/* Every action on the history view reads as the same weight. */
.table-actions button { min-width: 132px; min-height: 38px; padding: 8px 14px;
  font-size: .78rem; border-radius: 8px; box-sizing: border-box; text-align: center; }

/* ── STACKED TABLE ON SMALL SCREENS ── */
@media (max-width: 760px) {
  /* The desktop table declares min-width: 860px. Leaving that in place is what
     pushed every value off-screen while the labels stayed put. */
  .tbl-wrap { overflow: visible; }
  .tbl-wrap table { display: block; width: auto; min-width: 0; }
  .tbl-wrap tbody { display: block; }
  .tbl-wrap thead { position: absolute; left: -9999px; }
  .tbl-wrap tr.data-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px;
    background: #132033; border: 1px solid #1e3a5c; border-left: 3px solid #2d5a8e;
    border-radius: 10px; margin-bottom: 10px; padding: 12px 14px;
  }
  .tbl-wrap tr.data-row td {
    display: flex; flex-direction: column; gap: 2px;
    border: 0; padding: 0; text-align: left; font-size: .9rem;
  }
  .tbl-wrap tr.data-row td::before {
    content: attr(data-label); color: #adbdd4; font-size: .62rem;
    text-transform: uppercase; letter-spacing: .05em;
  }
  /* Date heads the card instead of competing with the measurements. */
  .tbl-wrap tr.data-row td:first-child {
    grid-column: 1 / -1; font-size: 1rem; font-weight: 700; color: #e0e8f0;
    border-bottom: 1px solid #1e3a5c; padding-bottom: 9px;
  }
  .tbl-wrap tr.data-row td:first-child::before { content: ''; display: none; }
  .tbl-wrap tr.data-row .notes-cell,
  .tbl-wrap tr.data-row .action-cell { grid-column: 1 / -1; max-width: none; }
  .tbl-wrap tr.data-row .action-cell { align-items: flex-end; }
  .tbl-wrap tr.data-row .action-cell::before { content: ''; display: none; }
  /* The desktop row hover paints each cell; in card form that reads as damage. */
  .tbl-wrap tr.data-row:hover td { background: transparent !important; }
  /* Editing keeps the card shape and the labels. Without them the row becomes
     eight unlabelled boxes and you cannot tell alkalinity from calcium. */
  .tbl-wrap tr.edit-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px;
    background: #132033; border: 1px solid #1e3a5c; border-left: 3px solid #35c4df;
    border-radius: 10px; margin-bottom: 10px; padding: 12px 14px;
  }
  .tbl-wrap tr.edit-row td { display: flex; flex-direction: column; gap: 3px; border: 0; padding: 0; }
  .tbl-wrap tr.edit-row td::before {
    content: attr(data-label); color: #adbdd4; font-size: .62rem;
    text-transform: uppercase; letter-spacing: .05em;
  }
  .tbl-wrap tr.edit-row td:first-child,
  .tbl-wrap tr.edit-row .edit-notes,
  .tbl-wrap tr.edit-row .action-cell { grid-column: 1 / -1; }
  .tbl-wrap tr.edit-row .action-cell { flex-direction: row; justify-content: flex-end; gap: 8px; padding-top: 4px; }
  .tbl-wrap tr.edit-row .action-cell::before { content: ''; display: none; }
  .tbl-wrap tr.edit-row .edit-input { width: 100%; box-sizing: border-box; }
  .table-header { flex-direction: column; align-items: stretch; gap: 10px; }
  /* flex-grow splits leftover space per wrapped row, so a row of two ends up
     wider than a row of one. A grid makes every action the same size. */
  .table-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .table-actions button { width: 100%; min-width: 0; }
}

/* Keep the header structure stable when a phone rotates into landscape. */
@media (max-width: 900px) {
  body > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding-left: max(14px, var(--safe-area-left));
    padding-right: max(14px, var(--safe-area-right));
  }
  body > header .logo { grid-column: 1; align-self: center; }
  .header-pool-info { grid-column: 2; min-width: 0; }
  body > header p {
    max-width: 100%;
    margin-top: 4px;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .header-right {
    grid-column: 3;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
  }
  .sync-status { max-width: 130px; justify-content: flex-end; text-align: right; }
  /* The header chip duplicates the Profile view the nav already reaches. */
  .user-menu { display: none; }
}

/* ── FULL-BLEED ON PHONES ──
   Every panel keeps a 28px desktop inset. On a phone that spends 56px of a
   390px screen on margin, so the shell runs edge to edge instead. */
@media (max-width: 760px) {
  .status-bar, .dose-section, .weather-bar { padding-left: 12px; padding-right: 12px; }
  .grid { padding: 12px; gap: 12px; }
  .chart-section { margin: 0 12px; padding: 14px; }
  .table-section, .profile-links, .profile-pools { margin: 0 0 14px; border-left: 0; border-right: 0; border-radius: 0; }
  .profile-card { margin: 0 0 14px; border-left: 0; border-right: 0; border-radius: 0; }
  .pool-switcher-btn { max-width: 100%; font-size: 1.15rem; }
  .profile-pools-head { align-items: flex-start; }
  .table-header { padding: 12px; }
  /* Side inset stays: the cards line up with the entry cards above rather than
     running to the screen edge. */
  .tbl-wrap { padding: 20px 12px 12px; }
  .status-bar { gap: 8px; }
  .status-card { min-width: 0; flex: 1 1 calc(50% - 4px); }
}

/* A value carried from an earlier day reads dimmer than one logged today, with
   the day it came from. Ties the .status-card.ok/.warn/.bad .val colours on
   specificity and wins by order, so the left border still signals range while
   the number still says "not measured today". */
.status-card .val .val-carried { color: #a3b4cc; }
.status-card .val .val-from { font-size: .58rem; font-weight: 400; color: #adbdd4; margin-left: 6px; letter-spacing: .03em; }