/* HealthTeky site shell: header, footer, home page, auth and console pages. Page bodies use practice/practice.css (pr-*).
   Theme: the HealthTeky gradient (sky blue #00a8ff -> green #64dd17) on the header, footer and ticker; buttons and selected
   states use a deeper blend of the same colours so white text stays readable. Never black fills. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/poppins/poppins-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/poppins/poppins-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/poppins/poppins-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/poppins/poppins-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../vendor/poppins/poppins-latin-800.woff2') format('woff2'); }

:root {
    --ink: #15263a; --soft: #56687c; --line: #dfe8f1; --bg: #f4f9fd; --ok: #2e9d0f; --bad: #c62828;
    --sky: #00a8ff; --green: #64dd17; --brand: #0088d1;
    --ht-grad: linear-gradient(90deg, #00a8ff 0%, #00a8ff 30%, #64dd17 100%);          /* header, footer, ticker */
    --ht-btn: linear-gradient(90deg, #0090e0 0%, #00a3b8 55%, #3aa815 100%);             /* buttons, selected tabs */
    --ht-soft: linear-gradient(135deg, #e6f6ff 0%, #effbe6 100%);                        /* soft panels */
    --radius: 18px; --shadow: 0 10px 30px -12px rgba(0, 120, 190, .25), 0 2px 6px rgba(21, 38, 58, .04);
    --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--font); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ── header ── */
.ht-head { position: sticky; top: 0; z-index: 50; background: var(--ht-grad); box-shadow: 0 4px 18px rgba(0, 120, 190, .18); }
.ht-head .container { display: flex; align-items: center; gap: 18px; height: 72px; max-width: 1680px; }
.ht-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 22px; color: #fff; letter-spacing: -.01em; white-space: nowrap; }
.ht-logo:hover { text-decoration: none; color: #fff; }
.ht-logo img { width: 36px; height: 36px; border-radius: 9px; background: #fff; padding: 2px; }
/* menu text size: set by the script in base.html - as large as fits (16px), smaller as items are added (down to 12px),
   then the menu folds into the menu button */
.ht-nav { display: flex; align-items: center; gap: .15em; flex: 1; min-width: 0; justify-content: center; overflow: hidden; font-size: var(--nav-fs, 15px); }
.ht-nav a { color: #fff; font-weight: 600; font-size: 1em; padding: .5em .55em; border-radius: 10px; white-space: nowrap; flex: none; }
.ht-nav .ht-i { width: 1.15em; height: 1.15em; }
.ht-nav a i { font-style: normal; margin-right: 4px; }
.ht-nav a:hover, .ht-nav a.on { background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none; }
.ht-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ht-login { color: #fff; border: 2px solid #fff; padding: 8px 14px; border-radius: 6px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap; }
.ht-login:hover { background: #fff; color: #0090e0; text-decoration: none; }
.ht-me { position: relative; }
.ht-me > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 30px;
    background: rgba(255, 255, 255, .18); color: #fff; }
.ht-me > summary::-webkit-details-marker { display: none; }
.ht-me > summary:hover { background: rgba(255, 255, 255, .28); }
.ht-me > summary b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.ht-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 14px 40px rgba(20, 33, 61, .16); padding: 8px; display: grid; }
.ht-menu a, .ht-menu button { display: block; text-align: left; padding: 9px 12px; border-radius: 9px; color: var(--ink); font: inherit; font-weight: 500;
    background: none; border: 0; width: 100%; cursor: pointer; }
.ht-menu a i { font-style: normal; margin-right: 8px; }
.ht-menu a:hover, .ht-menu button:hover { background: var(--ht-soft); text-decoration: none; }
.ht-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.ht-menu small { color: var(--soft); padding: 4px 12px 2px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.ht-burger { display: none; }
.ht-head.nav-folded .ht-nav { display: none; }
.ht-nav > a[hidden] { display: none !important; }   /* items that don't fit (base.html fit()); the mega menu has them */
.ht-more-btn { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: .5em .55em; border: 0; border-radius: 10px; background: none;
    color: #fff; font: 600 1em var(--font); white-space: nowrap; cursor: pointer; }
.ht-more-btn:hover, .ht-more-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
.ht-more-btn .ht-fi { transition: transform .15s; }
.ht-more-btn[aria-expanded="true"] .ht-fi { transform: rotate(180deg); }
/* solid menu icons ({% bold_icon %}, Font Awesome): sized by font-size, centred in the same box as the line icons */
.ht-fi { display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 1em; line-height: 1; }
/* Font Awesome loads after this file and makes the icon a left-aligned inline block: keep every glyph centred in its box, so in the
   bars the icon sits on the same centre line as the name under it */
i.ht-fi.fa-solid { display: inline-flex; text-align: center; }
.ht-head .ht-nav a i.ht-fi, .ht-more-btn i.ht-fi, .ht-dock i.ht-fi { margin: 0; }
.ht-side-list a .ht-fi { font-size: 18px; }
/* laptops & desktops: the icon on top, the name under it - like the bottom bar */
@media (min-width: 961px) {
    .ht-head .ht-nav a, .ht-more-btn { flex-direction: column; justify-content: center; gap: 3px; padding: .4em .6em; font-size: .84em; font-weight: 700; line-height: 1.1;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
    .ht-head .ht-nav .ht-i, .ht-more-btn .ht-i { width: 1.65em; height: 1.65em; font-size: 1.45em; }
    .ht-more-btn .ht-i { order: -1; font-size: 1.2em; }
    /* bold, like Brainmify's bars */
    .ht-head .ht-nav a, .ht-more-btn, .ht-dock > a, .ht-dock-more { font-weight: 700; }
}
/* menu button (left of the logo) and the slide-out sidebar - same design as Brainmify's */
.ht-head.nav-folded .ht-burger { display: inline-flex; }
@media (max-width: 960px) { .ht-nav { display: none; } .ht-burger { display: inline-flex; } .ht-right { margin-inline-start: auto; } }
.ht-burger { align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-inline-end: -6px;
    border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; }
.ht-burger:hover, .ht-burger:active { background: rgba(255, 255, 255, .2); }
.ht-side-backdrop { display: block; position: fixed; inset: 0; z-index: 1100; background: rgba(11, 37, 69, .38);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.ht-side { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 1101;
    width: min(84vw, 300px); background: linear-gradient(180deg, #eaf7ff 0%, #fff 30%, #fff 70%, #f0fbe8 100%);
    border-inline-end: 3px solid transparent; border-image: linear-gradient(180deg, #00a8ff 0%, #00a8ff 30%, #64dd17 100%) 1;
    box-shadow: 8px 0 30px rgba(11, 37, 69, .18); visibility: hidden;
    transform: translateX(-105%); transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s;
    overflow-y: auto; overscroll-behavior: contain; }
[dir="rtl"] .ht-side { transform: translateX(105%); }
body.ht-side-open .ht-side { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.32, .72, 0, 1); }
body.ht-side-open .ht-side-backdrop { opacity: 1; pointer-events: auto; }
body.ht-side-open { overflow: hidden; }
.ht-side-head { position: sticky; top: 0; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between;
    min-height: 72px; padding: env(safe-area-inset-top) 12px 0 18px; background: #00a8ff; }
.ht-side-head .ht-logo { font-size: 21px; }
.ht-side-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0;
    border-radius: 12px; background: rgba(255, 255, 255, .22); color: #fff; cursor: pointer; }
.ht-side-close:hover, .ht-side-close:active { background: rgba(255, 255, 255, .35); }
.ht-burger:focus-visible, .ht-side-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ht-side-list { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; flex: 1 0 auto; }
.ht-side-title { padding: 12px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #6f8aa6; }
.ht-side-list a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: #1d3b5c;
    font-weight: 500; font-size: 15px; line-height: 1.3; transition: background .15s ease, color .15s ease; }
.ht-side-list a .ht-i { width: 20px; height: 20px; color: #00a8ff; }
.ht-side-list a:hover, .ht-side-list a:active { background: #e6f6ff; color: #0086d1; text-decoration: none; }
.ht-side-list a.on { background: var(--ht-btn); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 168, 255, .35); }
.ht-side-list a.on .ht-i { color: #fff; }
.ht-side-foot { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.ht-side-user { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; color: var(--ink); }
.ht-side-user:hover { background: #eef7ff; text-decoration: none; }
.ht-side-user span { display: flex; flex-direction: column; min-width: 0; }
.ht-side-user strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-side-user small { color: var(--soft); font-size: 12.5px; }
.ht-side-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px;
    background: var(--ht-btn); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(0, 134, 209, .3); }
.ht-side-btn:hover { color: #fff; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .ht-side, .ht-side-backdrop { transition: none !important; } }
@media (max-width: 560px) { .ht-me > summary b { display: none; } .ht-login { padding: 7px 10px; font-size: 11.5px; } .ht-logo { font-size: 20px; } }

/* ── buttons used across the shell ── */
.ht-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 12px; font-weight: 600;
    border: 0; background: var(--ht-btn); color: #fff; cursor: pointer; font: 600 15px/1.2 var(--font); white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(0, 140, 200, .55); }
.ht-btn:hover { text-decoration: none; filter: brightness(1.06); color: #fff; }
.ht-btn.ghost { background: #fff; color: #0088d1; border: 2px solid #0090e0; padding: 8px 16px;   /* same size as a filled button */
    box-shadow: 0 6px 16px -10px rgba(0, 140, 200, .55); }
.ht-btn.ghost:hover { background: #eef8ff; color: #0077b8; filter: none; }
.ht-btn.ghost .ht-i { color: #0090e0; }
.hm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
@media (max-width: 480px) { .hm-actions .ht-btn { flex: 1 1 100%; max-width: 340px; } }   /* phones: stacked, full width */
.ht-btn.white { background: #fff; color: #0088d1; }
.ht-btn.big { padding: 13px 24px; font-size: 16px; border-radius: 14px; }
.ht-btn.wide { width: 100%; }

/* ── messages ── */
.ht-msgs { margin: 16px auto 0; }
.ht-msg { padding: 12px 16px; border-radius: 12px; margin-bottom: 8px; background: #e6f6ff; border: 1px solid #bfe6fb; font-weight: 500; }
.ht-msg.error { background: #fdecec; border-color: #f6c4c4; color: #8a1c1c; }
.ht-msg.success { background: #eefbe6; border-color: #cdeeb7; color: #2a6b0c; }
.ht-msg.warning { background: #fff5e0; border-color: #f4dca6; color: #7a4a00; }

/* ── ticker: the running strip (under the hero, and pinned to the bottom of the screen on laptops) ── */
.ht-ticker { background: var(--ht-grad); color: #fff; overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: 600; height: 42px; display: flex; align-items: center; }
.ht-ticker__track { display: inline-flex; gap: 0; animation: ht-ticker 60s linear infinite; will-change: transform; }
.ht-ticker__track span { padding: 0 14px; border-right: 1px solid rgba(255, 255, 255, .5); }
.ht-ticker:hover .ht-ticker__track { animation-play-state: paused; }
@keyframes ht-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ht-ticker--pinned { position: fixed; left: 0; right: 0; bottom: var(--dock-h, 0px); z-index: 45; box-shadow: 0 -4px 14px rgba(0, 120, 190, .18); }
body.has-ticker { padding-bottom: calc(42px + var(--dock-h, 0px)); }
@media (max-width: 960px) { .ht-ticker--pinned { display: none; } body.has-ticker { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .ht-ticker__track, .hm-marquee__track { animation: none; } }

/* ── footer ── */
.ht-foot { background: var(--ht-grad); color: #fff; padding: 46px 0 24px; margin-top: 40px; }
.ht-foot a { color: #fff; }
.ht-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; text-align: center; }
.ht-foot h4 { color: #fff; margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.ht-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.ht-foot p { margin: 10px auto; max-width: 420px; font-size: 13.5px; opacity: .95; }
.ht-foot .ht-logo img { background: #fff; }
.ht-foot-base { border-top: 1px solid rgba(255, 255, 255, .35); margin-top: 28px; padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 10px 22px;
    font-size: 13px; font-weight: 500; }
.ht-foot-base a { font-weight: 700; }
@media (max-width: 760px) { .ht-foot-grid { grid-template-columns: 1fr 1fr; } .ht-foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ht-foot-grid { grid-template-columns: 1fr; gap: 22px; } }   /* phones: one centred column of links */

/* ── home: video hero ── */
.hm-hero { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden;
    background: linear-gradient(135deg, #0a5f8f, #2c8f3f); }
.hm-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the video shows exactly as it is (no dimming anywhere); text stays readable with a soft shadow */
.hm-copy { max-width: 860px; margin: 0 auto 18px; }
.hm-copy h1, .hm-copy p.lead { text-shadow: 0 2px 4px rgba(0, 0, 0, .55), 0 4px 22px rgba(0, 0, 0, .45); }
.hm-hero .container { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 40px; }
.hm-hero h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.04; margin: 0; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.hm-hero .hm-rotate { display: block; min-height: 1.1em; transition: opacity .45s ease, transform .45s ease; }
.hm-hero .hm-rotate.out { opacity: 0; transform: translateY(10px); }
.hm-hero p.lead { font-size: 16px; max-width: 620px; margin: 16px auto 26px; opacity: .95; }
.hm-search { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr auto; gap: 6px; background: #fff; padding: 6px; border-radius: 10px;
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .55); max-width: 820px; margin: 0 auto; }
.hm-search input, .hm-search select { border: 1px solid var(--line); padding: 11px 12px; font: 500 13.5px var(--font); border-radius: 6px; background: #fff; color: var(--ink); min-width: 0; }
.hm-search input:focus, .hm-search select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(0, 168, 255, .18); }
.hm-search button { border: 0; border-radius: 6px; padding: 0 20px; background: var(--ht-btn); color: #fff; font: 700 14px var(--font); cursor: pointer; }
.hm-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; }
.hm-quick a { background: transparent; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .45); padding: 6px 13px; border-radius: 30px; color: #fff; font-weight: 600; font-size: 13px; border-width: 1.5px; border-color: #fff; }
.hm-quick a:hover { background: rgba(255, 255, 255, .3); text-decoration: none; }
@media (max-width: 720px) { .hm-search { grid-template-columns: 1fr; } .hm-search button { padding: 12px; } .hm-hero { min-height: 520px; } }

/* ── home: sections ── */
.hm-section { padding: 54px 0; }
.hm-section.alt { background: #fff; }
.hm-section.tint { background: var(--ht-soft); }
.hm-section h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 6px; font-weight: 600; text-align: center; letter-spacing: -.01em; }
.hm-section .sub { color: var(--soft); margin: 0 auto 28px; text-align: center; max-width: 680px; font-size: 14px; }
.hm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); color: var(--ink); display: block; text-align: center; transition: transform .15s; }
.hm-card:hover { text-decoration: none; transform: translateY(-3px); }
.hm-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--ht-soft); margin: 0 auto 12px; }
.hm-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.hm-card p { margin: 0; color: var(--soft); font-size: 13.5px; }
@media (max-width: 900px) { .hm-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hm-cards { grid-template-columns: 1fr; } }

/* auto-scrolling rows (doctors, hospitals, specialties): the list is rendered twice and slides by half its width */
.hm-marquee { overflow: hidden; position: relative; padding: 6px 0 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hm-marquee__track { display: flex; gap: 16px; width: max-content; animation: ht-ticker var(--dur, 40s) linear infinite; }
.hm-marquee:hover .hm-marquee__track { animation-play-state: paused; }
.hm-spec { flex: none; width: 140px; background: #fff; border-radius: 16px; padding: 18px 10px 16px; text-align: center; color: var(--ink); font-weight: 600; font-size: 14px;
    box-shadow: var(--shadow); border: 1px solid #edf3f8; }
.hm-spec:hover { text-decoration: none; transform: translateY(-2px); }
.hm-spec span { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px; display: grid; place-items: center; background: #f2f9ff; box-shadow: inset 0 0 0 1px #e3f1fb; }
.hm-spec img { width: 40px; height: 40px; }
.hm-doc { flex: none; width: 230px; background: #fff; border: 1px solid #edf3f8; border-radius: 16px; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; color: var(--ink); box-shadow: var(--shadow); }
.hm-doc:hover { text-decoration: none; }
.hm-doc b { display: block; font-weight: 600; }
.hm-doc span { color: var(--soft); font-size: 12.5px; }
.hm-empty { text-align: center; color: var(--soft); font-size: 14px; }
.hm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.hm-step { background: #fff; border-radius: var(--radius); padding: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.hm-step::before { counter-increment: s; content: counter(s); width: 36px; height: 36px; border-radius: 50%; background: var(--ht-btn); color: #fff; font-weight: 700;
    display: grid; place-items: center; margin: 0 auto 10px; }
.hm-step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.hm-step p { margin: 0; color: var(--soft); font-size: 14px; }
@media (max-width: 900px) { .hm-steps { grid-template-columns: 1fr; } }
.hm-band { background: var(--ht-grad); color: #fff; border-radius: 24px; padding: 34px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.hm-band h2 { color: #fff; margin: 0 0 6px; text-align: center; }
.hm-band p { margin: 0 auto; max-width: 620px; }
.hm-band > div:last-child { justify-content: center; }

/* ── auth ── */
.au-wrap { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 36px 16px; background: var(--ht-soft); }
.au-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px; box-shadow: var(--shadow); }
.au-card.wide { max-width: 620px; }
.au-card h1 { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.au-card .sub { color: var(--soft); margin: 0 0 20px; }
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #eef5fb; border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.au-tabs a { text-align: center; padding: 8px; border-radius: 9px; color: var(--soft); font-weight: 600; }
.au-tabs a.on { background: var(--ht-btn); color: #fff; }
.au-tabs a:hover { text-decoration: none; }
.fld { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.fld input, .fld select, .fld textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px;
    font: 400 15px var(--font); background: #fff; color: var(--ink); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(0, 168, 255, .18); }
.fld small { display: block; color: var(--soft); font-weight: 400; margin-top: 4px; }
.fld .err, .errlist { color: var(--bad); font-weight: 600; font-size: 13px; margin: 4px 0 0; padding: 0; list-style: none; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-foot { text-align: center; color: var(--soft); margin: 16px 0 0; }
.au-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--soft); margin: 4px 0 16px; }
.au-check input { margin-top: 4px; }
@media (max-width: 520px) { .fld-row { grid-template-columns: 1fr; } .au-card { padding: 22px; } }

/* ── console (hospital admin) ── */
.cn-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cn-stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.cn-stat b { display: block; font-size: 26px; background: var(--ht-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cn-stat span { color: var(--soft); font-size: 13px; font-weight: 500; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ht-soft); border-radius: 30px; padding: 6px 8px 6px 13px; font-weight: 500; }
.cn-chip button { border: 0; background: #fff; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; color: var(--soft); }

/* ── prose pages (about, terms, privacy) ── */
.prose { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 34px; box-shadow: var(--shadow); }
.prose h1 { margin-top: 0; font-size: 32px; font-weight: 700; }
.prose h2 { margin-top: 28px; font-size: 21px; font-weight: 600; }
.prose p, .prose li { color: #2c3a55; }
@media (max-width: 620px) { .prose { padding: 22px; } }

@media print { .ht-head, .ht-foot, .ht-ticker, .noprint { display: none !important; } body { background: #fff; padding: 0 !important; } }
.hm-marquee.static { -webkit-mask-image: none; mask-image: none; }
.hm-marquee.static .hm-marquee__track { animation: none; margin: 0 auto; flex-wrap: wrap; justify-content: center; width: auto; }
.hm-marquee.static [data-dup] { display: none; }
.hm-hero .hm-rotate { font-size: .82em; }
@media (max-width: 560px) {
    .ht-head .container { gap: 8px; }
    .ht-wide { display: none; }
    .ht-logo img { width: 28px; height: 28px; }
    .ht-burger { width: 40px; height: 40px; }
    .hm-hero h1 { font-size: 40px; }
    .hm-hero .hm-rotate { font-size: 26px; margin-top: 6px; }
}

/* line icons (healthteky/icons.py): white on the header, grey on white menus */
.ht-i { width: 17px; height: 17px; flex: none; vertical-align: -3px; }
.ht-nav a { display: inline-flex; align-items: center; gap: 6px; }
.ht-menu a { display: flex; align-items: center; gap: 10px; }
.ht-menu .ht-i { color: #6b7f93; }
.hm-card .ic .ht-i { width: 26px; height: 26px; color: #0090e0; }

/* the video hero fills the screen between the header (72px) and the pinned ticker (42px) on laptops (same bar heights as Brainmify),
   and between the header and the tab bar on phones; it scrolls away with the page */
.hm-hero { min-height: calc(100vh - 114px); min-height: calc(100svh - 114px); }
@media (max-width: 960px) { .hm-hero { min-height: calc(100vh - 128px); min-height: calc(100svh - 128px); } }

/* notification bell (header) and the notification centre */
.ht-bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .18); }
.ht-bell:hover { background: rgba(255, 255, 255, .3); }
.ht-bell .ht-i { width: 20px; height: 20px; }
.ht-bell b { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #fff; color: #e5484d;
    font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.nt-row { color: inherit; text-decoration: none !important; border-radius: 12px; padding: 12px; }
.nt-row:hover { background: #f5f9fc; }
.nt-unread { background: #f0f8ff; }
.nt-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ht-soft); color: #0088d1; flex: none; }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; background: #0090e0; flex: none; margin-left: auto; }

/* ── front desk / queue (practice/queue.py) ── */
.fd-select { padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--line); font: 500 14px var(--font); background: #fff; }
.fd-now { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; box-shadow: var(--shadow); }
.fd-now-main { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 220px; }
.fd-now-main small { color: var(--soft); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.fd-now-main b { font-size: 46px; line-height: 1; background: var(--ht-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fd-now-main span { font-weight: 600; font-size: 18px; }
.fd-next { padding: 14px 22px; font-size: 16px; }
.fd-stats { display: flex; gap: 16px; flex-wrap: wrap; color: var(--soft); font-size: 14px; }
.fd-stats b { color: var(--ink); }
.fd-tok { display: inline-grid; place-items: center; min-width: 38px; height: 38px; border-radius: 12px; background: var(--ht-soft); font-size: 17px; }
.fd-done td, .fd-skipped td, .fd-cancelled td { opacity: .55; }
.fd-called .fd-tok, .fd-with_doctor .fd-tok { background: var(--ht-btn); color: #fff; }
.fd-also { margin: 6px 0 14px; }
.fd-also summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.pr-token { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--ht-soft); }
.pr-token > b { font-size: 36px; line-height: 1; min-width: 56px; text-align: center; background: var(--ht-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-token strong { display: block; }
.pr-token span { color: var(--soft); font-size: 14px; }
.pr-token-cta { justify-content: space-between; }

/* ── analytics bars ── */
.an-bars { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding-top: 24px; }
.an-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.an-fill { width: 100%; max-width: 46px; min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--ht-btn); }
.an-alt { background: linear-gradient(180deg, #00a8ff, #64dd17); }
.an-bar b { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.an-bar small { color: var(--soft); font-size: 12px; }

/* ── membership ── */
.mb-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.mb-plan h2 { margin-top: 0 !important; }
.mb-price { font-size: 30px; font-weight: 800; margin: 8px 0 12px; }
.mb-price small { font-size: 14px; color: var(--soft); font-weight: 500; }
.mb-perks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.mb-perks li { padding-left: 26px; position: relative; }
.mb-perks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--ht-btn); color: #fff; font-size: 11px; display: grid; place-items: center; font-weight: 800; }
.mb-current { display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: center; background: var(--ht-soft); }
.mb-current small { color: var(--soft); font-weight: 600; text-transform: uppercase; font-size: 12px; }
.mb-current h2 { margin: 2px 0 4px !important; }
@media (max-width: 760px) { .mb-current { grid-template-columns: 1fr; } }

/* ── articles and Ask a doctor ── */
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 18px; }
.cm-card { color: var(--ink); text-decoration: none !important; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cm-card:hover { border-color: #bfe6fb; }
.cm-card h2 { margin: 2px 0 0 !important; font-size: 18px; }
.cm-cover { width: calc(100% + 44px); margin: -22px -22px 6px; height: 160px; object-fit: cover; border-radius: 18px 18px 0 0; }
.cm-cover-lg { width: 100%; max-height: 380px; object-fit: cover; border-radius: 18px; margin: 10px 0; }
.cm-tag { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 30px; background: var(--ht-soft); color: #0077b6; font-weight: 600; font-size: 12px; }
.cm-by { display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: 14px; margin-top: auto; }
.cm-article .cm-by { margin: 10px 0 16px; }
.cm-lede { font-size: 18px; color: var(--ink) !important; }
.cm-note { margin-top: 24px; padding: 14px 16px; border-radius: 14px; background: #fff8e6; border: 1px solid #f4e0a6; font-size: 14px; }
.cm-ask summary { cursor: pointer; }
.cm-qs { gap: 10px; }
.cm-q { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none !important; margin: 0; }
.cm-q:hover { border-color: #bfe6fb; }
.cm-ok { color: var(--ok); }
.cm-qtitle { font-size: 24px !important; }
.cm-answer { border-top: 1px solid var(--line); padding: 16px 0; }
.cm-answer:first-of-type { border-top: 0; }

/* ── health tracker (care/tracker.py) ── */
.tk-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.tk-form .pr-label { margin: 0; }
.tk-pair { display: flex; align-items: center; gap: 6px; }
.tk-pair input { width: 90px; }
.tk-sep { font-size: 20px; color: var(--soft); }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.tk-card { margin: 0; }
.tk-latest { font-size: 15px; color: var(--soft); }
.tk-latest b { font-size: 22px; color: var(--ink); }
.tk-chart { width: 100%; height: auto; display: block; margin: 6px 0; overflow: visible; }
.tk-grid-line { stroke: #e8eef4; stroke-width: 1; }
.tk-axis { fill: #6b7c90; font-size: 13px; font-family: var(--font); }
.tk-line { fill: none; stroke: #0088d1; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tk-dash { stroke: #2e9d0f; stroke-dasharray: 5 4; }
.tk-name { fill: var(--ink); font-size: 13px; font-weight: 600; font-family: var(--font); }
.tk-dot { fill: #0088d1; stroke: #fff; stroke-width: 2; }
.tk-dot-dash { fill: #2e9d0f; }
.tk-hit { fill: transparent; }
.tk-pt:hover .tk-dot { r: 6; }
.tk-flag { display: inline-block; padding: 1px 8px; border-radius: 30px; font-size: 12px; font-weight: 700; }
.tk-high { background: #fdecec; color: #a11d1d; }
.tk-low { background: #fff5e0; color: #7a4a00; }
.tk-table summary { cursor: pointer; color: var(--brand); font-weight: 600; margin-top: 4px; }
@media (max-width: 520px) { .tk-grid { grid-template-columns: 1fr; } }

/* ── waitlist and free follow-up ── */
.wl-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f5f9fc; border: 1px dashed #cfe0ee; font-size: 14px; }
.wl-box .ht-i { color: #0088d1; }
.pr-follow { display: flex; cursor: pointer; margin-bottom: 14px; }
.pr-follow input { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.tk-form [hidden] { display: none !important; }
.au-switch { background: none; border: 0; color: var(--soft); font: inherit; text-decoration: underline; cursor: pointer; }
.ht-langf { margin: 0; display: inline-flex; }
.ht-lang { background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.ht-lang:hover { background: rgba(255,255,255,.3); }
html[lang="hi"] body { font-family: 'Poppins', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', system-ui, sans-serif; }
/* the top bar keeps it short everywhere: the language as its code ("EN") and you as your initial - the full names stay in the
   button labels for screen readers */
.ht-lang-l { display: none; }
.ht-lang-s { display: inline; }
.ht-me > summary b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ht-me > summary { padding: 3px; }
.ht-lang .ht-lang-globe { display: none; }   /* phones: just the code in the circle */
@media (min-width: 561px) {   /* a world map, then the code: "🌏 EN" */
    .ht-lang, a.ht-lang { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; font-size: 13px; letter-spacing: .3px; }
    .ht-lang .ht-lang-globe { display: inline-block; font-size: 15px; }
}
@media (max-width: 600px) {
  .ht-lang { padding: 4px 9px; font-size: 13px; }
  .ht-lang-l { display: none; }
  .ht-lang-s { display: inline; }
}
@media (max-width: 430px) {
  .ht-logo { font-size: 17px; gap: 6px; }
  .ht-right { gap: 5px; }
  .ht-login { padding: 6px 8px; letter-spacing: 0; }
}
a.ht-lang { text-decoration: none; display: inline-flex; align-items: center; }
.ht-langfind { width: 100%; max-width: 420px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; margin-bottom: 14px; }
.ht-langgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 430px) { .ht-langgrid { grid-template-columns: 1fr 1fr; gap: 8px; } .ht-langgrid button { padding: 10px 12px; } .ht-langgrid button b { font-size: 16px; } }
.ht-langgrid button { text-align: start; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; font: inherit; }
.ht-langgrid button b { display: block; font-size: 17px; }
.ht-langgrid button small { color: var(--soft); }
.ht-langgrid button.on { border-color: #0090e0; box-shadow: 0 0 0 2px rgba(0,144,224,.25); }
.ht-langgrid button[hidden] { display: none; }
[dir="rtl"] .ht-right { margin-left: 0; margin-right: auto; }
/* right-to-left pages: the sliding strips keep their own direction so they stay inside their frame */
[dir="rtl"] .hm-marquee, [dir="rtl"] .ht-ticker { direction: ltr; }
[dir="rtl"] .hm-marquee .hm-doc div, [dir="rtl"] .hm-spec, [dir="rtl"] .ht-ticker span { direction: rtl; unicode-bidi: isolate; }
[dir="rtl"] .ht-menu { right: auto; left: 0; }
[dir="rtl"] .ht-menu a, [dir="rtl"] .ht-menu button { text-align: right; }
[dir="rtl"] .ht-menu a i { margin-right: 0; margin-left: 8px; }

/* ── floating buttons, bottom right (templates/_floating.html) ── */
.ht-float { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
body.has-ticker .ht-float { bottom: calc(58px + var(--dock-h, 0px)); }
.ht-fab { width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 60, 120, .28); transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; }
.ht-fab:hover, .ht-fab:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 24px rgba(0, 60, 120, .32); text-decoration: none; }
.ht-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ht-fab svg { width: 30px; height: 30px; }
.ht-fab--wa { background: #25d366; }
.ht-fab--ai { background: var(--ht-btn); }
.ht-fab--ai svg { width: 27px; height: 27px; }
.ht-aichat { width: min(380px, calc(100vw - 32px)); height: min(520px, calc(100vh - 270px)); min-height: 240px; display: flex; flex-direction: column;
    background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 50, 100, .28); }
.ht-aichat[hidden] { display: none; }
.ht-aichat header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--ht-grad); color: #fff; }
.ht-aichat__x { border: 0; background: rgba(255, 255, 255, .22); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.ht-aichat__log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f6f9fc; }
.ht-aichat__msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ht-aichat__msg--user { align-self: flex-end; background: var(--ht-btn); color: #fff; border-end-end-radius: 4px; white-space: pre-wrap; }
.ht-aichat__msg--assistant { align-self: flex-start; background: #fff; color: #1d2433; border: 1px solid #e3ebf3; border-end-start-radius: 4px; }
.ht-aichat__msg.is-wait { color: #6b7a90; }
.ht-aichat__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e3ebf3; background: #fff; }
.ht-aichat__form textarea { flex: 1; resize: none; border: 1px solid #cfdbe7; border-radius: 12px; padding: 9px 11px; font: 14.5px/1.4 var(--font); max-height: 120px; }
.ht-aichat__send { border: 0; width: 42px; border-radius: 12px; background: var(--ht-btn); color: #fff; font-size: 18px; cursor: pointer; }
.ht-aichat__fine { margin: 0; padding: 0 12px 8px; font-size: 12px; color: #6b7a90; background: #fff; }
@media (max-width: 480px) { .ht-fab { width: 52px; height: 52px; } }
@media (max-width: 960px) {   /* phones: stay above the bottom tab bar (static/pwa/app.css) */
    body.has-app-tabbar .ht-float { bottom: calc(var(--app-tabbar-h, 56px) + var(--app-safe-bottom, 0px) + 12px); }
    body.has-app-tabbar .ht-aichat { height: min(520px, calc(100dvh - 310px)); }   /* header + tab bar + both buttons stay visible */
}
@media print { .ht-float { display: none; } }

/* Phones & tablets: the HealthTeky title sits in the centre of the bar (menu button left, login & language right) */
@media (max-width: 960px) {
    .ht-head .container { position: relative; }
    .ht-head .container > .ht-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; }
    .ht-head .container > .ht-logo img { flex: none; }
}
/* its size is set by the script in base.html (as large as fits); the icon scales with it */
@media (max-width: 960px) {
    .ht-head .container > .ht-logo { font-size: 22px; gap: .35em; }
    .ht-head .container > .ht-logo img { width: 1.45em; height: 1.45em; border-radius: .36em; }
}

/* Phones: the bell moves into the sidebar ("Notifications" + count; a dot on the menu button) so the centred title has room */
.ht-burger { position: relative; }
.ht-burger-dot { display: none; position: absolute; top: 9px; right: 8px; width: 9px; height: 9px; border-radius: 50%;
    background: #e53935; box-shadow: 0 0 0 2px #00a8ff; }
.ht-side-bell { display: none !important; }
.ht-side-count { margin-inline-start: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #e53935; color: #fff;
    font-size: 12px; font-weight: 700; text-align: center; }
@media (max-width: 560px) {
    .ht-bell { display: none !important; }
    .ht-burger-dot { display: block; }
    .ht-side-bell { display: flex !important; }
}

/* Login: the full button on wider screens; on phones a round account icon (Login / Signup is in the sidebar too) */
.ht-login .ht-i { display: none; }
@media (max-width: 560px) {
    .ht-login { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0 !important; border-radius: 50%; }
    .ht-login .ht-i { display: block; width: 20px; height: 20px; }
    .ht-login-t { display: none; }
}

/* small phones: a little less side padding, so the centred title can be bigger */
@media (max-width: 400px) {
    .ht-head .container { padding: 0 8px; }
    .ht-burger { margin-inline-end: 0; }
    .ht-right { gap: 4px; }
}

/* phones: language and login are matching 32px circles (the language button's height); the avatar matches them */
@media (max-width: 560px) {
    .ht-lang, a.ht-lang, .ht-login { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px;
        padding: 0 !important; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .18);
        color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1; }
    .ht-lang:hover, .ht-login:hover { background: rgba(255, 255, 255, .3); color: #fff; }
    .ht-login .ht-i { width: 17px; height: 17px; }
    .ht-lang { text-align: center; }
    .ht-lang-s { display: block; width: 100%; text-align: center; }  /* the short label, centred in the circle */
    .ht-me > summary { padding: 0; }
}

/* ── Bottom bar (laptops & desktops, wider than 960px), as on Socialify: the gradient, icons over labels (templates/_dock.html).
      Phones have the app tab bar instead (static/pwa/app.css). ── */
.ht-dock, .htm { display: none; }
@media (min-width: 961px) {
    :root { --dock-h: 60px; }
    body { padding-bottom: var(--dock-h); }
    html { scroll-padding-bottom: calc(var(--dock-h) + 12px); }
    .ht-float { bottom: calc(16px + var(--dock-h)); }
    .ht-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; height: var(--dock-h); display: flex; align-items: stretch; justify-content: center;
        gap: 2px; padding: 0 16px; background: var(--ht-grad); box-shadow: 0 -4px 18px rgba(0, 120, 190, .2); }
    .ht-dock > a, .ht-dock-more { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-width: 60px; padding: 0 9px; border: 0; background: none; cursor: pointer; color: #fff !important; font: 700 12.5px/1.1 var(--font);
        text-decoration: none !important; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); opacity: .94; transition: opacity .15s, transform .15s; }
    .ht-dock .ht-i { width: 22px; height: 22px; font-size: 20px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); transition: transform .15s; }
    .ht-dock > a:hover, .ht-dock-more:hover, .ht-dock-more[aria-expanded="true"] { opacity: 1; transform: translateY(-2px); }
    .ht-dock > a.on { opacity: 1; }
    .ht-dock > a.on::before { content: ''; position: absolute; top: 0; left: 10px; right: 10px; height: 4px; border-radius: 0 0 4px 4px; background: #fff; }
    .ht-dock-more[aria-expanded="true"] .ht-i { transform: rotate(180deg); }
}
@media (min-width: 961px) and (max-width: 1280px) {
    .ht-dock { padding: 0 6px; gap: 0; }
    .ht-dock > a, .ht-dock-more { min-width: 0; padding: 0 6px; font-size: 11px; }
    .ht-dock .ht-i { width: 19px; height: 19px; font-size: 18px; }
}

/* ── Mega menu (laptops & desktops): all of HealthTeky in four coloured columns, as on Socialify (templates/_mega_menu.html,
      static/site/mega.js) ── */
@keyframes htm-down { from { opacity: 0; transform: translate(-50%, -10px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes htm-up { from { opacity: 0; transform: translate(-50%, 10px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (min-width: 961px) {
    .htm { position: fixed; left: 50%; z-index: 1200; width: min(1180px, calc(100vw - 32px)); border-radius: 26px; overflow: hidden; transform: translateX(-50%);
        background: #fff; box-shadow: 0 28px 70px rgba(0, 60, 120, .28), 0 0 0 1px rgba(0, 60, 120, .06); font-family: var(--font); }
    .htm.open { display: flex; flex-direction: column; }
    .htm.down { top: 78px; max-height: calc(100vh - 78px - var(--dock-h) - 18px); animation: htm-down .26s cubic-bezier(.2, .8, .2, 1); }
    .htm.up { bottom: calc(var(--dock-h) + 6px); max-height: calc(100vh - 78px - var(--dock-h) - 18px); flex-direction: column-reverse; animation: htm-up .26s cubic-bezier(.2, .8, .2, 1); }
    .htm-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 18px 22px; color: #fff; background: var(--ht-grad); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
    .htm-head > div { display: flex; flex-direction: column; margin-inline-end: auto; }
    .htm-head b { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
    .htm-head small { font-size: 14px; font-weight: 600; opacity: .95; }
    .htm-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #0086d1 !important;
        font-weight: 700; text-decoration: none !important; text-shadow: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); transition: transform .15s; }
    .htm-cta:hover { transform: translateY(-1px); }
    .htm-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .25); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; }
    .htm-x:hover { background: rgba(255, 255, 255, .4); }
    .htm-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 18px; padding: 18px 20px 20px; overflow-y: auto; min-height: 0; }
    .htm-col { --t1: #00a8ff; --t2: #0086d1; --tint: #eaf6ff; min-width: 0; }
    .htm-c2 { --t1: #ff4f6d; --t2: #ff7b25; --tint: #fff0f2; }
    .htm-c3 { --t1: #12b886; --t2: #64dd17; --tint: #eafbf1; }
    .htm-c4 { --t1: #7b61ff; --t2: #00a8ff; --tint: #f1efff; }
    .htm-col h3 { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; font-size: 16px; font-weight: 800; color: #15263a; }
    .htm-col h3 span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 18px;
        background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
    .htm-col a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; color: #15263a !important; text-decoration: none !important;
        transition: background .15s, transform .15s; }
    .htm-col a:hover, .htm-col a:focus-visible { background: var(--tint); transform: translateX(3px); outline: none; }
    [dir="rtl"] .htm-col a:hover { transform: translateX(-3px); }
    .htm-col a i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 20px; background: var(--tint); transition: background .15s; }
    .htm-col a:hover i { background: linear-gradient(135deg, var(--t1), var(--t2)); }
    .htm-col a span { display: flex; flex-direction: column; min-width: 0; }
    .htm-col a b { font-size: 15px; font-weight: 700; line-height: 1.2; }
    .htm-col a small { font-size: 12.5px; font-weight: 500; color: #6b7a90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media print { .ht-dock, .htm { display: none !important; } }

/* Every input box must read as a box: a clearly visible border, teal ring while typing (owner's rule, 2026-10-24).
   Only the border colour is forced, so fields that are deliberately borderless (border: 0) stay borderless. */
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]), select, textarea) {
  border-color: #9db4ca;
}
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]), select, textarea):hover {
  border-color: #6f93b5;
}
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]), select, textarea):focus {
  border-color: #00a3b8; outline: 0; box-shadow: 0 0 0 4px rgba(0, 163, 184, .15);
}

/* Brand-gradient input boxes (static/site/boxes.js adds .ht-box to fields that show a border):
   soft blue-to-green at rest, the full navbar gradient with a glow while typing. */
html body .ht-box {
  border-color: transparent !important; border-width: 1.5px !important;
  background: var(--ht-arrow, none) no-repeat right 12px center, linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, #8fd3ff, #a8e77a) border-box !important;
}
html body .ht-box:hover {
  background: var(--ht-arrow, none) no-repeat right 12px center, linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, #4fbdf6, #86d957) border-box !important;
}
html body .ht-box:focus {
  outline: 0;
  background: var(--ht-arrow, none) no-repeat right 12px center, linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, #00a8ff, #64dd17) border-box !important;
  box-shadow: 0 0 0 4px rgba(0, 168, 255, .13) !important;
}
html body .ht-box:disabled, html body .ht-box[readonly] {
  background: var(--ht-arrow, none) no-repeat right 12px center, linear-gradient(#f2f5f8, #f2f5f8) padding-box,
              linear-gradient(90deg, #c6e6f7, #d3efc0) border-box !important;
}