:root {
    --mint: #d9f3ef;
    --aqua: #51b9ad;
    --teal: #17877d;
    --coral: #ff8f7b;
    --rose: #fff3ef;
    --ink: #24403d;
    --muted: #6d817e;
    --line: #dcebea;
    --paper: #ffffff;
    --soft: #f6fbfa;
    --shadow: 0 18px 40px rgba(36, 64, 61, .09);
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: var(--soft); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
input.input-invalid, select.input-invalid, textarea.input-invalid { border-color: #b00020; background: #fff7f7; }
textarea { min-height: 96px; resize: vertical; }
label { display: grid; gap: 6px; font-weight: 700; color: var(--ink); }

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 24px; font-weight: 800; letter-spacing: .2px; }
.brand img { display: block; width: 170px; max-width: 100%; height: auto; }
.brand-label { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: var(--mint); color: var(--teal); font-size: 13px; font-weight: 800; }
.sidebar .brand { display: grid; justify-items: start; gap: 8px; }
.sidebar .brand img { width: 190px; }
.auth-card .brand { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; padding: 12px 18px; background: var(--teal); color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 10px 20px rgba(23,135,125,.18); }
.btn:hover { background: #0d7068; }
.btn.small { padding: 8px 12px; font-size: 14px; }
.btn.ghost { background: #eef8f7; color: var(--teal); box-shadow: none; }
.danger-btn, .btn.danger-btn { background: #dc5757; }
.full { width: 100%; }
.hint, .topbar p { color: var(--muted); font-size: 14px; margin: 0; }

.landing-nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 7vw; background: #fff; border-bottom: 1px solid var(--line); }
.public-nav { display: flex; align-items: center; gap: 18px; font-weight: 800; color: var(--teal); }
.hero { min-height: 76vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 34px; align-items: center; padding: 8vw 7vw; background: linear-gradient(110deg, rgba(217,243,239,.96), rgba(255,243,239,.9)); }
.hero > div:first-child { max-width: 760px; }
.hero h1 { font-size: clamp(38px, 7vw, 76px); line-height: 1.02; margin-bottom: 22px; }
.hero p { font-size: 20px; color: #3d5d59; max-width: 680px; }
.eyebrow { color: var(--teal); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.hero-gallery { position: relative; width: 100%; max-width: 880px; padding: 12px; border: 1px solid rgba(255,255,255,.9); border-radius: 8px; background: rgba(255,255,255,.72); box-shadow: 0 28px 60px rgba(36, 64, 61, .15); overflow: hidden; }
.hero-gallery-track { position: relative; z-index: 1; display: flex; width: 100%; aspect-ratio: 16 / 10; min-height: 390px; border-radius: 8px; overflow: visible; background: #fff; transition: transform .45s ease; will-change: transform; }
.hero-gallery figure { position: relative; flex: 0 0 100%; width: 100%; height: 100%; min-width: 100%; margin: 0; background: #fff; overflow: hidden; }
.hero-gallery figure > img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-gallery figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(36,64,61,0) 52%, rgba(18,45,42,.72) 100%); }
.hero-gallery figcaption { position: absolute; left: 22px; right: 118px; bottom: 20px; z-index: 1; display: grid; gap: 2px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.34); }
.hero-gallery figcaption strong { font-size: 18px; line-height: 1.15; }
.hero-gallery figcaption span { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); }
.hero-gallery-control { position: absolute; top: calc(50% - 42px); z-index: 3; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.86); border-radius: 50%; background: rgba(255,255,255,.9); color: var(--teal); font-size: 0; line-height: 1; cursor: pointer; box-shadow: 0 14px 32px rgba(36,64,61,.16); transform: translateY(-50%); transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.hero-gallery-control::before { content: ""; width: 13px; height: 13px; border-top: 4px solid currentColor; border-left: 4px solid currentColor; }
.hero-gallery-control.prev::before { transform: translateX(2px) rotate(-45deg); }
.hero-gallery-control.next::before { transform: translateX(-2px) rotate(135deg); }
.hero-gallery-control:hover, .hero-gallery-control:focus-visible { background: #fff; box-shadow: 0 16px 36px rgba(36,64,61,.24); transform: translateY(-50%) scale(1.05); outline: 3px solid rgba(81,185,173,.28); }
.hero-gallery-control.prev { left: 26px; }
.hero-gallery-control.next { right: 26px; }
.hero-gallery-thumbs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.hero-gallery-thumbs button { position: relative; height: 78px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; box-shadow: 0 10px 24px rgba(36,64,61,.08); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.hero-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); opacity: .72; transition: filter .16s ease, opacity .16s ease; }
.hero-gallery-thumbs button.active { border-color: var(--teal); box-shadow: 0 12px 28px rgba(23,135,125,.18); }
.hero-gallery-thumbs button.active img, .hero-gallery-thumbs button:hover img, .hero-gallery-thumbs button:focus-visible img { filter: saturate(1); opacity: 1; }
.hero-gallery-thumbs button:hover, .hero-gallery-thumbs button:focus-visible { transform: translateY(-2px); outline: 3px solid rgba(81,185,173,.22); outline-offset: 2px; }
.landing { padding: 64px 7vw 74px; display: grid; gap: 62px; background:
    linear-gradient(180deg, rgba(242,250,249,.95), rgba(255,255,255,.96) 42%, rgba(238,248,247,.92)),
    radial-gradient(circle at 18% 18%, rgba(255,155,67,.12), transparent 28%); }
.landing section { max-width: 1180px; width: 100%; margin: auto; }
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cta { padding: 42px; background: var(--mint); border-radius: 8px; text-align: center; }
.section-kicker { margin: 0 0 10px; color: var(--teal); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.product-overview { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr); gap: 36px; align-items: center; padding: 38px; border: 1px solid rgba(23,135,125,.16); border-radius: 8px; background: rgba(255,255,255,.72); box-shadow: 0 26px 70px rgba(36,64,61,.08); overflow: hidden; }
.product-overview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(23,135,125,.08), transparent 34%, rgba(255,155,67,.12)); opacity: .85; pointer-events: none; }
.overview-copy, .overview-dashboard { position: relative; z-index: 1; }
.overview-copy h2, .section-title-row h2, .workflow-panel h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; color: #213f3b; }
.overview-copy p:last-child { max-width: 590px; margin: 18px 0 0; font-size: 18px; line-height: 1.65; color: #42615d; }
.overview-dashboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px; border: 1px solid rgba(255,255,255,.78); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(238,248,247,.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 22px 50px rgba(36,64,61,.12); }
.dashboard-ring { position: absolute; inset: 10px; border: 1px solid rgba(23,135,125,.18); border-radius: 8px; pointer-events: none; }
.dashboard-ring::before { content: ""; position: absolute; top: -1px; left: 8%; width: 28%; height: 2px; background: linear-gradient(90deg, transparent, var(--teal), transparent); animation: landingScan 4.2s linear infinite; }
.overview-dashboard article { min-height: 190px; padding: 22px; border: 1px solid rgba(23,135,125,.13); border-radius: 8px; background: rgba(255,255,255,.88); transform: translateY(0); animation: landingFloat 6s ease-in-out infinite; }
.overview-dashboard article:nth-of-type(2) { animation-delay: .45s; }
.overview-dashboard article:nth-of-type(3) { animation-delay: .9s; }
.overview-dashboard span { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 50%; background: #213f3b; color: #fff; font-weight: 900; font-size: 13px; }
.overview-dashboard strong { display: block; margin-bottom: 10px; font-size: 22px; color: #213f3b; }
.overview-dashboard p, .feature-card p, .workflow-rail p, .landing-insights p { margin: 0; color: #42615d; line-height: 1.55; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.section-title-row > div { max-width: 760px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-card { position: relative; min-height: 246px; padding: 24px; border: 1px solid rgba(23,135,125,.15); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,253,252,.9)); box-shadow: 0 22px 48px rgba(36,64,61,.08); overflow: hidden; animation: landingRise .58s ease both; animation-delay: var(--delay); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--teal), #ff9b43); transform: scaleX(.22); transform-origin: left; transition: transform .24s ease; }
.feature-card::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 72px; height: 72px; border-right: 1px solid rgba(23,135,125,.16); border-bottom: 1px solid rgba(23,135,125,.16); transform: skew(-8deg); }
.feature-card:hover { transform: translateY(-7px); border-color: rgba(23,135,125,.34); box-shadow: 0 30px 70px rgba(36,64,61,.13); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon { position: relative; display: inline-flex; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 8px; background: #eef8f7; color: var(--teal); box-shadow: inset 0 0 0 1px rgba(23,135,125,.12); }
.feature-icon::before, .feature-icon::after { content: ""; position: absolute; inset: 13px; border: 2px solid currentColor; border-radius: 4px; }
.feature-card.roster .feature-icon::after { inset: 14px 9px auto; height: 2px; border: 0; background: currentColor; box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor; }
.feature-card.room .feature-icon::before { border-radius: 50%; }
.feature-card.room .feature-icon::after { inset: 20px 9px; height: 2px; border: 0; background: currentColor; box-shadow: 14px -10px 0 currentColor, 14px 10px 0 currentColor; }
.feature-card.forms .feature-icon::after { inset: 15px 12px auto; height: 2px; border: 0; background: currentColor; box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor; }
.feature-card.email .feature-icon::before { inset: 14px 10px; transform: skewY(-12deg); }
.feature-card.email .feature-icon::after { inset: 14px 10px; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(-3px, 2px); }
.feature-card.calendar .feature-icon::after { inset: 11px 16px auto; height: 2px; border: 0; background: currentColor; box-shadow: 0 10px 0 currentColor, -7px 20px 0 currentColor, 7px 20px 0 currentColor; }
.feature-card.builder .feature-icon::before { inset: 11px 16px; border-width: 0 2px; border-radius: 0; }
.feature-card.builder .feature-icon::after { inset: 13px 10px; height: 20px; border-width: 2px 0; border-radius: 0; }
.feature-card h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.24; color: #213f3b; }
.workflow-panel { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); gap: 32px; align-items: center; padding: 34px; border-radius: 8px; background: #213f3b; color: #fff; box-shadow: 0 28px 70px rgba(36,64,61,.16); overflow: hidden; }
.workflow-panel .section-kicker, .workflow-panel h2 { color: #fff; }
.workflow-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.workflow-rail::before { content: ""; position: absolute; left: 8%; right: 8%; top: 34px; height: 2px; background: rgba(255,255,255,.22); }
.workflow-rail::after { content: ""; position: absolute; left: 8%; top: 34px; width: 28%; height: 2px; background: #ff9b43; animation: workflowLine 4.8s ease-in-out infinite; }
.workflow-rail article { position: relative; z-index: 1; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.workflow-rail span { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-bottom: 24px; border-radius: 50%; background: #fff; color: #213f3b; font-weight: 900; box-shadow: 0 0 0 6px rgba(255,255,255,.1); }
.workflow-rail h3 { margin: 0 0 10px; color: #fff; font-size: 20px; }
.workflow-rail p { color: rgba(255,255,255,.82); }
.landing-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.landing-insights article { position: relative; padding: 26px 26px 26px 70px; border-left: 4px solid var(--teal); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 18px 42px rgba(36,64,61,.07); }
.landing-insights span { position: absolute; left: 24px; top: 30px; width: 24px; height: 24px; border: 2px solid var(--teal); border-radius: 50%; }
.landing-insights span::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ff9b43; animation: landingPulse 1.9s ease-in-out infinite; }
.landing-insights h2 { margin: 0 0 8px; font-size: 23px; color: #213f3b; }
.landing-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 38px 42px; text-align: left; background: linear-gradient(135deg, #d7f4ef, #fff3ef); box-shadow: 0 22px 54px rgba(36,64,61,.1); overflow: hidden; }
.landing-cta h2 { margin: 0; color: #213f3b; }
@keyframes landingRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landingFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes landingScan { 0% { transform: translateX(-40%); } 100% { transform: translateX(260%); } }
@keyframes workflowLine { 0%, 12% { transform: translateX(0); } 45%, 55% { transform: translateX(112%); } 88%, 100% { transform: translateX(224%); } }
@keyframes landingPulse { 0%, 100% { transform: scale(.72); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .dashboard-ring::before, .overview-dashboard article, .feature-card, .workflow-rail::after, .landing-insights span::after { animation: none; }
    .feature-card, .feature-card:hover { transform: none; }
}

.shell { min-height: 100vh; display: block; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 260px; height: 100vh; overflow-y: auto; background: #fff; border-right: 1px solid var(--line); padding: 28px 20px; }
.sidebar nav { display: grid; gap: 8px; margin-top: 28px; }
.sidebar nav a { padding: 11px 12px; border-radius: 8px; color: var(--muted); font-weight: 700; }
.sidebar nav a:hover { background: var(--mint); color: var(--teal); }
.sidebar nav a.sidebar-developer-link { margin-top: 12px; background: var(--teal); color: #fff; text-align: center; box-shadow: 0 10px 20px rgba(23,135,125,.18); }
.sidebar nav a.sidebar-developer-link:hover { background: #0d7068; color: #fff; }
.sidebar-logout { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sidebar-logout span { color: var(--muted); font-size: 14px; font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.sidebar-logout button { width: 100%; min-height: 45px; border: 0; border-radius: 8px; background: #eef8f7; color: var(--teal); font-weight: 900; cursor: pointer; }
.sidebar-logout button:hover { background: var(--teal); color: #fff; }
.sidebar-toggle { display: none; }
.main { margin-left: 260px; padding: 24px; min-width: 0; max-width: calc(100% - 260px); }
.shell + .site-footer { margin-left: 260px; width: calc(100% - 260px); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-width: 100%; }
.topbar form { display: flex; align-items: center; gap: 12px; }
.mobile-desk-head { display: none; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.panel, .card, .auth-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.panel { padding: 22px; margin-bottom: 22px; }
.card { padding: 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.cards.six { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stats .card strong { display: block; font-size: 34px; margin-top: 8px; color: var(--teal); }
.form-grid, .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: end; }
.filters { margin-bottom: 18px; grid-template-columns: minmax(0, .5fr) auto; }
.filters .btn { width: auto; min-width: 130px; white-space: nowrap; }
.filters > * { min-width: 0; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.check input { width: auto; }
.warning { padding: 12px; background: #fff8df; border-radius: 8px; margin: 16px 0; }
.appointment-card-form { padding: 0; overflow: hidden; }
.appointment-step-flow { display: grid; gap: 22px; padding: 28px 32px 30px; border-bottom: 1px solid var(--line); background: #fff; }
.step-flow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.step-flow-kicker { margin: 0 0 7px; color: var(--teal); font-size: 15px; font-weight: 900; }
.step-flow-head h2 { margin: 0; font-size: 26px; line-height: 1.2; color: var(--ink); }
.step-flow-pill { flex: 0 0 auto; padding: 10px 17px; border: 1px solid #bce6e1; border-radius: 999px; background: #f4fffd; color: var(--teal); font-weight: 900; }
.step-flow-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.step-flow-item { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 14px; align-items: center; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.step-flow-item::after { content: ""; position: absolute; left: 58px; right: 0; top: 28px; height: 2px; background: #e8f1f0; z-index: 0; }
.step-flow-item span { position: relative; z-index: 1; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #bce6e1; background: #fff; color: var(--teal); font-size: 22px; font-weight: 900; }
.step-flow-item strong { position: relative; z-index: 1; align-self: end; font-size: 21px; line-height: 1.15; }
.step-flow-item small { position: relative; z-index: 1; color: var(--muted); font-size: 15px; font-weight: 700; }
.step-flow-item.active span, .step-flow-item.complete span { border-color: var(--teal); background: var(--teal); color: #fff; box-shadow: 0 10px 24px rgba(23,135,125,.18); }
.step-flow-item:disabled { cursor: not-allowed; opacity: .58; }
.step-flow-actions { display: flex; justify-content: flex-end; gap: 12px; }
.step-flow-bottom-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 22px 32px; border-top: 1px solid var(--line); background: #fff; }
.appointment-form { display: grid; gap: 0; }
.form-section { padding: 30px 32px 34px; border-bottom: 1px solid var(--line); background: #fff; }
.form-section:nth-child(even) { background: #fbfefd; }
.staff-form-part-label { display: inline-flex; margin-bottom: 14px; padding: 7px 11px; border-radius: 8px; background: #eef8f7; color: var(--teal); font-size: 13px; font-weight: 900; }
.form-section-title { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.form-section-title span { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 900; }
.form-section-title h2 { margin: 0; font-size: 24px; line-height: 1.2; color: var(--ink); }
.form-section-title p { margin: 5px 0 0; color: var(--muted); font-size: 15px; }
.clean-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; align-items: start; }
.clean-form-grid label { align-self: stretch; font-size: 15px; }
.clean-form-grid input, .clean-form-grid select, .clean-form-grid textarea { min-height: 52px; border-color: #d6e8e6; background: #fff; box-shadow: 0 1px 0 rgba(36,64,61,.02); }
.clean-form-grid textarea { min-height: 124px; line-height: 1.45; }
.clean-form-grid input:focus, .clean-form-grid select:focus, .clean-form-grid textarea:focus { outline: 3px solid rgba(81,185,173,.18); border-color: var(--aqua); }
.clean-form-grid .readonly-field { background: #f4faf9; color: var(--muted); cursor: default; }
.default-intake-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); align-items: start; }
.default-intake-grid .compact-intake-field { align-self: start; }
.default-intake-grid .compact-intake-field select,
.default-intake-grid .compact-intake-field input { min-height: 52px; height: 52px; }
.span-2 { grid-column: span 2; }
.file-field input { padding: 13px; }
.option-stack { display: grid; gap: 10px; padding: 14px; min-height: 52px; border: 1px solid #d6e8e6; border-radius: 8px; background: #fff; }
.option-stack .check { min-height: 24px; color: var(--ink); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 32px 30px; background: #fff; }
.form-actions .hint { max-width: 620px; }
.alert { padding: 13px 16px; border-radius: 8px; margin-bottom: 18px; font-weight: 700; }
.success { background: #e2f8eb; color: #237245; }
.danger { background: #ffe8e8; color: #9e3434; }

.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--mint); color: var(--teal); font-size: 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.status-edit-menu { position: relative; }
.status-edit-menu summary { list-style: none; }
.status-edit-menu summary::-webkit-details-marker { display: none; }
.status-edit-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; min-width: 240px; }
.status-edit-form select { min-height: 38px; padding: 8px 10px; }
.empty { text-align: center; color: var(--muted); }
.badge { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #edf4f3; color: var(--teal); font-size: 12px; font-weight: 800; }
.completed { background: #e2f8eb; color: #237245; }
.cancelled, .no-show { background: #ffe8e8; color: #9e3434; }
.confirmed { background: #e5f0ff; color: #2b62a3; }
.pending { background: #fff6d8; color: #906b00; }
.calendar-grid, .appointment-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 20px; }
.calendar-day { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--coral); border-radius: 8px; padding: 16px; box-shadow: var(--shadow); }
.segmented { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented a { padding: 10px 14px; border-right: 1px solid var(--line); font-weight: 800; color: var(--teal); }
.segmented button { padding: 10px 14px; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--teal); font-weight: 800; cursor: pointer; }
.segmented button:last-child { border-right: 0; }
.segmented button.active { background: var(--teal); color: #fff; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: #f4fbfa; }
.patient-history-head { align-items: flex-start; }
.patient-history-tabs { margin: 0 0 18px; }
.patient-history-section { display: grid; gap: 18px; }
.patient-history-section[hidden] { display: none !important; }
.print-report-header { display: none; }
.history-record { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(36,64,61,.06); }
.history-record-head { margin-bottom: 12px; }
.history-record h3, .history-record h4 { margin-bottom: 6px; }
.history-subsection { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.history-answer-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.history-answer-grid p { margin: 4px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.appointment-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detail-card h2 { margin-bottom: 14px; }
.detail-card dl { display: grid; gap: 10px; margin: 0; }
.detail-card dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.detail-card dt { color: var(--muted); font-weight: 800; }
.detail-card dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.detail-card.wide { grid-column: 1 / -1; }
.doctor-calendar-panel { width: min(100%, 1440px); margin-inline: auto; height: calc(100dvh - 176px); min-height: 560px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #fbfefd; flex: 0 0 auto; }
.calendar-toolbar h1 { margin-bottom: 2px; font-size: 28px; }
.calendar-actions, .calendar-jump { display: flex; align-items: center; gap: 10px; }
.calendar-jump input { min-width: 180px; }
.month-calendar { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(0, 1fr)); min-width: 940px; background: var(--line); gap: 1px; }
.calendar-weekday { padding: 10px; background: #e8f6f4; color: var(--teal); font-weight: 900; text-align: center; }
.month-day { min-height: 0; padding: 8px; background: #fff; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.muted-day { background: #f7fbfa; color: var(--muted); }
.today-day { box-shadow: inset 0 0 0 2px var(--aqua); }
.has-appointments { background: #fcfffe; }
.month-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.month-day-head span { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 900; font-size: 13px; }
.today-day .month-day-head span { background: var(--teal); color: #fff; }
.month-day-head em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 800; }
.calendar-appointments { display: grid; gap: 6px; min-height: 0; }
.calendar-appointment { display: grid; gap: 2px; padding: 7px 8px; border-left: 4px solid var(--teal); border-radius: 8px; background: #eef8f7; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.calendar-appointment:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(36,64,61,.12); }
.calendar-appointment strong { font-size: 12px; color: var(--teal); }
.calendar-appointment span { font-weight: 900; font-size: 13px; line-height: 1.2; }
.calendar-appointment small { color: var(--muted); font-size: 11px; }
.more-appointments { color: var(--teal); font-size: 11px; font-weight: 900; padding: 0 2px; }
.calendar-appointment.completed { border-color: #237245; background: #e2f8eb; }
.calendar-appointment.cancelled, .calendar-appointment.no-show { border-color: #dc5757; background: #ffe8e8; }
.calendar-appointment.confirmed { border-color: #2b62a3; background: #e5f0ff; }
.calendar-appointment.pending { border-color: #d39b00; background: #fff6d8; }
.no-appointment { color: #9badab; font-size: 13px; }
.doctor-dashboard { display: grid; gap: 18px; }
.dashboard-head p, .chart-head p, .list-head p { margin: 6px 0 0; color: var(--muted); }
.dashboard-stats .stat-card { position: relative; overflow: hidden; }
.dashboard-stats .stat-card::after { content: ""; position: absolute; inset: auto -18px -18px auto; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.22); }
.dashboard-stats .stat-card span { display: block; font-weight: 800; color: var(--muted); }
.dashboard-stats .stat-card strong { display: block; font-size: 34px; margin-top: 8px; color: var(--teal); }
.dashboard-stats .stat-total { background: linear-gradient(135deg, #ffffff, #f4fbfa); }
.dashboard-stats .stat-completed { background: linear-gradient(135deg, #eefaf1, #ffffff); }
.dashboard-stats .stat-pending { background: linear-gradient(135deg, #fff9e6, #ffffff); }
.dashboard-stats .stat-confirmed { background: linear-gradient(135deg, #eef4ff, #ffffff); }
.dashboard-charts { display: grid; gap: 20px; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.chart-card { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, #fff, #fbfefd); box-shadow: var(--shadow); }
.chart-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-bottom: 18px; }
.chart-card-head h3 { margin: 0; }
.chart-card-head span { color: var(--muted); font-size: 14px; font-weight: 700; }
.chart-bars { display: grid; gap: 14px; }
.chart-row { display: grid; gap: 8px; }
.chart-row-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 14px; font-weight: 800; }
.chart-track { height: 12px; border-radius: 999px; background: #e8f2f0; overflow: hidden; }
.chart-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--aqua)); }
.chart-fill-pending { background: linear-gradient(90deg, #d39b00, #f0c24e); }
.chart-fill-confirmed { background: linear-gradient(90deg, #2b62a3, #6ea0e7); }
.chart-fill-completed { background: linear-gradient(90deg, #237245, #58b97b); }
.bar-chart-wrap { overflow-x: auto; padding-bottom: 6px; }
.bar-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(56px, 1fr); gap: 12px; align-items: end; min-height: 250px; min-width: 100%; }
.bar-column { display: grid; gap: 10px; justify-items: center; align-items: end; min-height: 100%; }
.bar-value { min-height: 22px; font-size: 14px; font-weight: 800; color: var(--teal); }
.bar-rail { width: 100%; height: 180px; display: flex; align-items: flex-end; border-radius: 999px; background: #eef6f4; overflow: hidden; }
.bar-fill { width: 100%; border-radius: inherit; background: linear-gradient(180deg, var(--aqua), var(--teal)); min-height: 8px; }
.bar-column span { font-size: 12px; color: var(--muted); font-weight: 800; text-align: center; }
.appointment-summary-card { display: grid; gap: 10px; }
.appointment-summary-card h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.segmented a.active { background: var(--teal); color: #fff; }
.appointment-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detail-card h2 { margin-bottom: 16px; }
.detail-card dl { display: grid; gap: 12px; margin: 0; }
.detail-card dl div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.detail-card dt { color: var(--muted); font-weight: 800; }
.detail-card dd { margin: 0; font-weight: 800; }
.detail-card.wide { grid-column: 1 / -1; }
.status-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 14px; align-items: end; margin-top: 22px; }
.doctor-notes-form { display: grid; gap: 14px; margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fbfefd; }
.doctor-notes-form textarea { min-height: 150px; line-height: 1.5; }
.doctor-notes-form .btn { justify-self: start; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 24px; flex-wrap: wrap; }
.page-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-link, .page-status { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 800; color: var(--teal); }
.page-status { color: var(--muted); background: #fbfefd; }
.page-link.disabled { opacity: .45; color: var(--muted); cursor: not-allowed; }
.page-link:not(.disabled):hover { border-color: var(--aqua); background: #eef8f7; }
.submission { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, var(--mint), transparent 36%), var(--rose); }
.auth-card { width: min(430px, 100%); padding: 30px; display: grid; gap: 16px; }
.auth-card h1 { margin-bottom: 0; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 52px; }
.password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: #eef8f7; color: var(--teal); cursor: pointer; }
.password-toggle:hover, .password-toggle.is-visible { background: var(--teal); color: #fff; }
.password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-settings { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.4fr) auto auto; gap: 16px; align-items: end; }
.section-config { grid-column: 1 / -1; display: grid; gap: 18px; margin-top: 10px; }
.section-config-head { margin-bottom: 0; }
.builder-tab-switch { display: inline-flex; align-items: stretch; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 22px rgba(36,64,61,.08); }
.builder-tab-switch button { min-width: 230px; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 18px 20px; background: #fff; color: var(--teal); font: inherit; font-size: 20px; font-weight: 900; cursor: pointer; }
.builder-tab-switch button:last-child { border-right: 0; }
.builder-tab-switch button.active { background: var(--teal); color: #fff; }
.compact-head { margin: 8px 0 12px; }
.section-config-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.section-config-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fbfefd; }
.section-row-card { box-shadow: var(--shadow); }
.section-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.section-card-head .actions { flex-wrap: wrap; justify-content: flex-end; }
.section-meta-grid { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); gap: 14px; }
.section-meta-grid label { font-size: 14px; }
.section-config-card h3 { margin-bottom: 0; color: var(--teal); }
.section-rows-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: auto; background: #fff; }
.section-row-sheet { min-width: 1280px; }
.section-row-card .delete-cell { display: none; }
.section-row-card.delete-mode .delete-cell { display: table-cell; }
.section-row-card.delete-mode .delete-hint { color: var(--warn, #b06a00); }
.preview-form-surface { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-height: 740px; overflow: auto; }
.appointment-form-preview .form-actions { display: none; }
.toggle-line { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.toggle-line input { width: auto; }
.sheet-wrap { max-height: 560px; overflow: auto; border-bottom: 1px solid var(--line); }
.field-sheet { min-width: 1180px; border-collapse: separate; border-spacing: 0; box-shadow: none; }
.field-sheet th { position: sticky; top: 0; z-index: 2; background: #e8f6f4; border-bottom: 1px solid #c9e5e1; white-space: nowrap; }
.field-sheet th, .field-sheet td { padding: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.field-sheet th { padding: 10px 12px; font-size: 13px; }
.field-sheet td input:not([type="checkbox"]), .field-sheet td select { border: 0; border-radius: 0; min-height: 42px; padding: 9px 10px; background: #fff; }
.field-sheet td input:focus, .field-sheet td select:focus { outline: 2px solid var(--aqua); outline-offset: -2px; background: #f7fffd; }
.row-number { width: 52px; text-align: center; background: #f2f8f7; color: var(--muted); font-weight: 800; }
.center-cell { text-align: center; vertical-align: middle; }
.center-cell input { width: auto; }
.small-input { max-width: 82px; text-align: center; }
.empty-sheet-row td { padding: 28px; text-align: center; color: var(--muted); }
.sheet-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; }
.preview-panel { position: sticky; top: 24px; }
.preview-form { display: grid; gap: 14px; margin-top: 16px; }
.preview-form label { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfefd; font-size: 14px; }
.preview-form label span { color: #dc5757; }
.preview-form input, .preview-form select, .preview-form textarea { background: #f5faf9; color: var(--muted); }
.preview-options { display: grid; gap: 6px; padding: 10px 0 0; color: var(--muted); }
.preview-options em { font-style: normal; }

.site-footer { background: #4f6a7e; color: #f4fbff; border-top: 8px solid #ff9b43; }
.footer-main { width: min(1380px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 48px; padding: 42px 0 38px; align-items: center; }
.footer-logo { width: 135px; height: auto; display: block; margin-bottom: 20px; }
.footer-about p { max-width: 640px; font-size: 17px; line-height: 1.45; font-weight: 700; color: #f2f8ff; margin-bottom: 0; }
.footer-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #ff9b43; color: #fff; font-weight: 900; }
.footer-contact-list { display: grid; gap: 14px; justify-self: end; width: min(100%, 520px); }
.footer-contact { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-contact span { display: block; font-size: 16px; font-weight: 700; color: #eef6fb; }
.footer-contact strong { display: block; font-size: 20px; line-height: 1.15; color: #fff; }
.footer-link { color: #ff9b43; font-size: 24px; font-weight: 900; }
.footer-link:hover { color: #ffbf82; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); width: min(1380px, calc(100% - 48px)); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; }
.footer-bottom p { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.powered-by { display: flex; align-items: center; gap: 16px; font-size: 20px; font-weight: 700; color: #fff; }
.powered-by img { width: auto; height: 44px; max-width: 120px; object-fit: contain; object-position: center; mix-blend-mode: screen; }
.hours-page { padding: 54px 7vw 70px; background: var(--soft); }
.hours-hero { max-width: 920px; margin: 0 auto 28px; text-align: center; }
.hours-hero h1 { font-size: clamp(38px, 6vw, 64px); margin-bottom: 10px; }
.hours-card { width: min(760px, 100%); margin: 0 auto; background: #4f6a7e; color: #fff; border-top: 8px solid #ff9b43; border-radius: 8px; padding: 28px 34px; box-shadow: var(--shadow); }
.hours-card div { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px dotted rgba(255,255,255,.22); font-size: 20px; }
.hours-card div:last-child { border-bottom: 0; }
.hours-card strong { color: #fff; }
.hours-card span { color: #f2f8ff; }

.assessment-public { min-height: 100vh; padding: 28px 16px 46px; background: #e9ecef; color: #111; }
.assessment-document { width: min(100%, 920px); margin: 0 auto; display: grid; gap: 18px; color: #111; }
.patient-assessment-document { margin-bottom: 28px; }
.patient-history-section .assessment-document { width: min(100%, 920px); }
.assessment-cover-title, .assessment-page { background: #fff; border: 1px solid #cfcfcf; box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.assessment-cover-title { padding: 26px 34px; text-align: center; }
.assessment-print-brand { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 24px; padding-bottom: 18px; border-bottom: 2px solid #17877d; text-align: left; }
.assessment-print-brand img { width: 210px; max-width: 52%; height: auto; object-fit: contain; }
.assessment-print-brand div { display: grid; gap: 2px; min-width: 0; }
.assessment-print-brand strong { color: #17877d; font-size: 18px; line-height: 1.15; }
.assessment-print-brand span { color: #555; font-size: 13px; font-weight: 700; }
.assessment-cover-title h1 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: 0; color: #111; }
.assessment-cover-title p { margin: 8px 0 0; color: #444; }
.assessment-page { position: relative; min-height: 1120px; padding: 34px 38px; page-break-after: always; }
.assessment-page-mark { position: absolute; top: 10px; right: 14px; color: #777; font-size: 12px; font-weight: 700; }
.assessment-section { margin-bottom: 22px; }
.assessment-section h2 { margin: 0 0 14px; padding-bottom: 7px; border-bottom: 1px solid #999; text-align: center; font-size: 16px; color: #111; }
.assessment-section h2 span { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; }
.assessment-help { margin: -4px 0 12px; color: #555; font-size: 13px; }
.assessment-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.assessment-field { display: grid; gap: 5px; font-size: 13px; color: #111; }
.assessment-label { display: inline; font-weight: 700; }
.assessment-label em { display: block; color: #333; font-style: normal; font-weight: 600; }
.assessment-label strong { color: #a00; }
.assessment-field input:not([type="checkbox"]):not([type="radio"]), .assessment-field select, .assessment-field textarea {
    min-height: 34px; padding: 5px 2px; border: 0; border-bottom: 1px solid #9f9f9f; border-radius: 0; background: #fff; color: #111;
}
.assessment-field textarea { min-height: 70px; border: 1px solid #b8b8b8; padding: 8px; resize: vertical; }
.assessment-field small { color: #555; font-size: 12px; font-weight: 400; }
.field-error { color: #b00020 !important; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.paper-options { display: flex; gap: 18px; flex-wrap: wrap; min-height: 34px; align-items: center; border-bottom: 1px solid #9f9f9f; }
.paper-options span { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.paper-options input { width: auto; }
.signature-pad { display: grid; gap: 8px; }
.signature-pad canvas { width: 100%; height: 120px; border: 1px solid #999; background: #fff; touch-action: none; }
.signature-pad .btn { justify-self: start; }
.image-preview-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.image-preview-list img { width: 82px; height: 82px; object-fit: cover; border: 1px solid #aaa; }
.image-preview-tile { position: relative; display: inline-flex; width: 82px; height: 82px; }
.image-preview-tile img { width: 100%; height: 100%; }
.image-preview-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #dc5757; color: #fff; font-size: 14px; line-height: 1; font-weight: 900; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.16); }
.image-preview-remove:hover { background: #b93c3c; }
.tooth-chart { display: grid; gap: 8px; margin: 12px 0 0; padding: 12px; border: 1px solid #999; }
.tooth-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.tooth-row.permanent { grid-template-columns: repeat(16, minmax(0, 1fr)); }
.tooth-row span { display: grid; place-items: center; min-height: 34px; border: 1px solid #777; border-radius: 50%; font-size: 12px; font-weight: 800; }
.clinical-print-page { padding: 0 2mm; color: #171717; font-family: Arial, Helvetica, sans-serif; }
.clinical-print-page h2 { margin: 0 0 18px; padding: 0; border: 0; text-align: center; color: #111; font-size: 20px; line-height: 1.2; }
.appointment-print-field-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.appointment-print-field { min-height: 42px; border-bottom: 1px solid #aaa; color: #111; }
.appointment-print-field strong { display: block; margin-bottom: 4px; font-size: 13px; line-height: 1.2; }
.appointment-print-field p { margin: 0; color: #111; font-size: 13px; line-height: 1.35; white-space: pre-wrap; }
.appointment-print-field .signature-image { height: 56px; border: 0; }
.appointment-print-field .uploaded-image-grid, .appointment-print-field p figure { margin: 0; }
.appointment-print-treatment-table { margin-top: 18px; }
.print-line-field { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 26px; color: #333; font-size: 19px; line-height: 1.35; }
.print-line-field.compact { margin-bottom: 16px; }
.print-line-field span { flex: 0 0 auto; }
.print-line-field p { flex: 1 1 auto; min-height: 24px; margin: 0; padding: 0 0 2px; border-bottom: 2px dotted #555; white-space: pre-wrap; }
.print-hard-tissue-head { display: grid; gap: 8px; margin: 0 0 16px; }
.print-hard-tissue-label { margin: 0; color: #333; font-size: 19px; font-weight: 700; line-height: 1.35; }
.print-tooth-legend { display: flex; flex-wrap: wrap; gap: 12px; color: #555; font-size: 14px; font-weight: 800; }
.print-tooth-legend span { display: inline-flex; align-items: center; gap: 6px; }
.print-tooth-legend i { width: 14px; height: 14px; border: 1px solid #9db8b5; border-radius: 3px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.print-tooth-legend .watch { background: #fff2a8; }
.print-tooth-legend .treatment { background: #bce6e1; }
.print-tooth-legend .urgent { background: #ffb8ad; }
.print-tooth-chart { --print-tooth-size: 42px; --print-tooth-line: #2f3d3b; display: grid; gap: 0; width: 100%; margin: 0 auto 34px; overflow: visible; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.print-tooth-labels, .print-tooth-row { display: grid; margin: 0 auto; }
.print-primary-labels, .print-primary-row { grid-template-columns: repeat(10, var(--print-tooth-size)); width: calc(10 * var(--print-tooth-size)); }
.print-permanent-labels, .print-permanent-row { grid-template-columns: repeat(16, var(--print-tooth-size)); width: calc(16 * var(--print-tooth-size)); }
.print-tooth-labels span { display: grid; place-items: center; min-height: 30px; color: #333; font-size: 17px; line-height: 1; }
.print-tooth-box { position: relative; display: block; width: var(--print-tooth-size); height: var(--print-tooth-size); border: 1px solid var(--print-tooth-line); background-color: #fff; overflow: hidden; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.print-tooth-box::before, .print-tooth-box::after { content: ""; position: absolute; inset: -1px auto auto 50%; width: 1px; height: calc(141.42% + 2px); background: var(--print-tooth-line); transform-origin: top; pointer-events: none; }
.print-tooth-box::before { transform: rotate(45deg); }
.print-tooth-box::after { transform: rotate(-45deg); }
.print-tooth-box:nth-child(-n+5), .print-tooth-box:nth-last-child(-n+5) { background-image: radial-gradient(circle at center, transparent 0 6px, var(--print-tooth-line) 6px 7px, transparent 7px); }
.print-tooth-box.state-watch { background-color: #fff2a8; box-shadow: inset 0 0 0 4px rgba(255,255,255,.42); }
.print-tooth-box.state-treatment { background-color: #bce6e1; box-shadow: inset 0 0 0 4px rgba(255,255,255,.42); }
.print-tooth-box.state-urgent { background-color: #ffb8ad; box-shadow: inset 0 0 0 4px rgba(255,255,255,.42); }
.print-tooth-box i { position: absolute; inset: 50% auto auto 50%; z-index: 1; width: 10px; height: 10px; border: 2px solid #111; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); font-size: 0; }
.print-tooth-box.state-clear i { display: none; }
.lower-permanent-labels { margin-top: 24px; }
.print-nepali-label { margin: -6px 0 96px; color: #111; font-size: 18px; font-weight: 800; }
.print-consent { margin: 0 0 30px; color: #333; font-size: 18px; line-height: 1.35; }
.print-consent p { margin: 0 0 2px; white-space: pre-wrap; }
.print-consent strong { display: block; color: #111; font-size: 17px; }
.print-signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: end; margin-top: 18px; text-align: center; color: #333; }
.print-signatures div { display: grid; justify-items: center; align-items: end; min-height: 96px; }
.print-signatures img { max-width: 210px; max-height: 52px; object-fit: contain; margin-bottom: 4px; }
.print-signatures span { display: block; width: min(100%, 270px); border-bottom: 2px dotted #333; }
.print-signatures p { margin: 5px 0 0; font-size: 17px; line-height: 1.2; }
.print-signatures strong { display: block; color: #111; font-size: 16px; line-height: 1.25; }
.treatment-table-wrap { overflow-x: auto; }
.treatment-table { min-width: 100%; border-collapse: collapse; color: #111; }
.treatment-table th, .treatment-table td { border: 1px solid #777; padding: 0; height: 42px; background: #fff; color: #111; }
.treatment-table th { padding: 8px; text-align: center; font-size: 13px; }
.treatment-table input { width: 100%; height: 41px; border: 0; border-radius: 0; padding: 6px; }
.assessment-submit-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 12px; padding: 16px; background: rgba(255,255,255,.96); border: 1px solid #ddd; }
.assessment-answer { min-height: 48px; border-bottom: 1px solid #aaa; font-size: 13px; }
.assessment-answer strong { display: block; margin-bottom: 4px; }
.assessment-answer p { margin: 0; white-space: pre-wrap; }
.signature-image { max-width: 100%; height: 86px; object-fit: contain; border: 1px solid #ddd; }
.signature-current { display: inline-flex; align-items: center; min-height: 92px; margin: 8px 0; }
.uploaded-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.uploaded-image-grid figure { margin: 0; display: grid; gap: 8px; }
.uploaded-image-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #999; }
.uploaded-image-grid figcaption { font-size: 12px; color: #444; overflow-wrap: anywhere; }
.assessment-builder-section { display: grid; gap: 16px; }
.assessment-builder-head { display: grid; gap: 14px; }
.assessment-field-editor .field-sheet { min-width: 1680px; }
.staff-assessment-section .hint { font-weight: 600; }
.staff-assessment-section .clean-form-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.staff-assessment-section .clean-form-grid label { align-self: start; }
.staff-assessment-section .clean-form-grid textarea { width: 100%; min-height: 118px; }
.staff-assessment-section .option-stack { min-height: 52px; padding: 12px 14px; gap: 8px; align-content: start; }
.staff-assessment-section .option-stack .check { min-height: 28px; }
.staff-assessment-section .staff-span-3 { grid-column: span 3; }
.staff-assessment-section .staff-span-4 { grid-column: span 4; }
.staff-assessment-section .staff-span-5 { grid-column: span 5; }
.staff-assessment-section .staff-span-6 { grid-column: span 6; }
.staff-assessment-section .staff-span-7 { grid-column: span 7; }
.staff-assessment-section .staff-span-8 { grid-column: span 8; }
.staff-assessment-section .staff-span-9 { grid-column: span 9; }
.staff-assessment-section .staff-span-10 { grid-column: span 10; }
.staff-assessment-section .staff-span-11 { grid-column: span 11; }
.staff-assessment-section .staff-span-12 { grid-column: 1 / -1; }
.staff-signature-pad canvas { border-color: #d6e8e6; border-radius: 8px; }
.staff-tooth-chart { --tooth-line: #2f3d3b; display: grid; gap: 0; margin: 22px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow-x: auto; }
.staff-tooth-title { margin: 0 0 16px; color: var(--ink); font-size: 18px; font-weight: 800; }
.tooth-state-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; color: var(--muted); font-size: 13px; font-weight: 800; }
.tooth-state-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tooth-state-legend i { width: 16px; height: 16px; border: 1px solid #b7cdca; border-radius: 4px; }
.tooth-state-legend .watch { background: #fff2a8; }
.tooth-state-legend .treatment { background: #bce6e1; }
.tooth-state-legend .urgent { background: #ffb8ad; }
.tooth-grid { display: grid; width: min(100%, 940px); min-width: 820px; margin: 0 auto; }
.tooth-grid span { display: grid; place-items: center; min-height: 30px; color: var(--ink); font-size: 16px; font-weight: 500; }
.tooth-grid-primary { grid-template-columns: repeat(10, minmax(0, 1fr)); width: min(100%, 590px); min-width: 510px; }
.tooth-grid-permanent { grid-template-columns: repeat(16, minmax(0, 1fr)); }
.tooth-box-row { align-items: stretch; }
.tooth-box { position: relative; display: block; aspect-ratio: 1 / 1; min-height: 52px; border: 1px solid var(--tooth-line); border-radius: 0; background-color: #fff; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tooth-box::before, .tooth-box::after { content: ""; position: absolute; inset: -1px 50% auto auto; width: 1px; height: calc(141.42% + 2px); background: var(--tooth-line); transform-origin: top; pointer-events: none; }
.tooth-box::before { transform: rotate(45deg); }
.tooth-box::after { transform: rotate(-45deg); }
.tooth-box:hover, .tooth-box:focus-visible { z-index: 1; box-shadow: 0 0 0 3px rgba(81,185,173,.22); outline: 0; transform: translateY(-1px); }
.tooth-box[data-state="watch"] { background-color: #fff2a8; }
.tooth-box[data-state="treatment"] { background-color: #bce6e1; }
.tooth-box[data-state="urgent"] { background-color: #ffb8ad; }
.tooth-box[data-state="watch"], .tooth-box[data-state="treatment"], .tooth-box[data-state="urgent"] { box-shadow: inset 0 0 0 4px rgba(255,255,255,.42); }
.tooth-box:nth-child(-n+5), .tooth-box:nth-last-child(-n+5) { background-image: radial-gradient(circle at center, transparent 0 6px, var(--tooth-line) 6px 7px, transparent 7px); }
.tooth-grid-permanent + .tooth-grid-permanent, .lower-labels { margin-top: 12px; }
.staff-treatment-wrap { margin-top: 22px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.staff-treatment-wrap .treatment-table th { background: var(--mint); color: var(--teal); }
.staff-treatment-wrap .treatment-table th, .staff-treatment-wrap .treatment-table td { border-color: var(--line); }
.field-error { color: #b00020; font-size: 13px; font-weight: 700; }

@media print {
    @page { size: A4; margin: 10mm 10mm 12mm; }
    @page appointment-print {
        size: A4;
        margin: 0;
    }
    @page assessment-print {
        size: A4;
        margin: 0;
    }
    body { background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; line-height: 1.32; padding: 0; }
    .site-footer, .topbar, .sidebar, .assessment-submit-bar, .print-mode .btn, .print-actions, .patient-history-tabs, .patient-history-head, .patient-history-summary, .appointment-detail-head, .print-hidden { display: none !important; }
    .shell { display: block; }
    .main { padding: 0; }
    .assessment-public { padding: 0; background: #fff; }
    .assessment-print-sheet {
        page: assessment-print;
        position: relative;
        padding: 10mm 10mm 14mm;
    }
    .assessment-print-sheet::after {
        content: "Page " counter(page);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 4mm;
        color: #555;
        font-size: 10px;
        text-align: center;
    }
    .assessment-document { width: 100%; gap: 0; }
    .assessment-cover-title, .assessment-page { box-shadow: none; border: 0; }
    .assessment-print-brand { margin-bottom: 8mm; padding-bottom: 5mm; border-bottom: 2px solid #17877d; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .assessment-print-brand img { width: 52mm; max-width: 52mm; }
    .assessment-print-brand strong { font-size: 16px; }
    .assessment-print-brand span { font-size: 11px; }
    .assessment-page { min-height: auto; padding: 10mm 10mm 12mm; }
    .assessment-page::after, .appointment-print-record::after, .appointment-card-form::after {
        content: "";
        display: block;
        height: 4mm;
        clear: both;
    }
    .print-tooth-chart { --print-tooth-size: 34px; max-width: 100%; margin-bottom: 9mm; }
    .print-tooth-labels span { min-height: 22px; font-size: 13px; }
    .print-tooth-box i { width: 8px; height: 8px; border-width: 1px; }
    .lower-permanent-labels { margin-top: 7mm; }
    body[data-print-section="assessments"] [data-print-target="appointments"],
    body[data-print-section="recent-assessment"] [data-print-target="appointments"],
    body[data-print-section="appointments"] [data-print-target="assessments"] { display: none !important; }
    body[data-print-section="all"] [data-history-panel],
    body[data-print-section="assessments"] [data-history-panel="assessments"],
    body[data-print-section="recent-assessment"] [data-history-panel="assessments"],
    body[data-print-section="appointments"] [data-history-panel="appointments"] { display: block !important; }
    body[data-print-section="recent-assessment"] [data-history-panel="assessments"] .history-record:not([data-recent-assessment]),
    body[data-print-section="recent-assessment"] [data-history-panel="assessments"] .submission:not([data-recent-assessment]) { display: none !important; }
    .print-report-header { display: block; margin: 0 0 10mm; padding-bottom: 5mm; border-bottom: 2px solid #17877d; }
    .print-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 5mm; }
    .print-brand-row img { width: 185px; height: auto; object-fit: contain; }
    .print-brand-row div { text-align: right; }
    .print-brand-row h1 { margin: 0; color: #17877d; font-size: 22px; line-height: 1.15; }
    .print-brand-row p { margin: 3px 0 0; color: #444; font-size: 12px; font-weight: 700; }
    .print-patient-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #b8cfcc; }
    .print-patient-meta div { min-height: 42px; padding: 7px 9px; border-right: 1px solid #b8cfcc; }
    .print-patient-meta div:last-child { border-right: 0; }
    .print-patient-meta strong { display: block; color: #17877d; font-size: 10px; text-transform: uppercase; }
    .print-patient-meta span { display: block; margin-top: 2px; color: #111; font-size: 12px; font-weight: 700; }
    .panel { padding: 0; margin: 0 0 8mm; border: 0; box-shadow: none; }
    .patient-history-section { display: block; page-break-before: auto; }
    body[data-print-section="all"] [data-history-panel="appointments"] { page-break-before: always; }
    .patient-history-section > .section-head { margin: 0 0 4mm; padding: 0 0 2mm; border-bottom: 1px solid #777; }
    .patient-history-section h2 { margin: 0; color: #111; font-size: 18px; }
    .patient-history-section .hint { margin: 2px 0 0; color: #555; font-size: 11px; }
    .history-record,
    .patient-history-section .submission { padding: 0; margin: 0 0 6mm; border: 1px solid #b8cfcc; border-radius: 0; box-shadow: none; break-inside: auto; page-break-inside: auto; }
    [data-history-panel="appointments"] .history-record,
    [data-history-panel="appointments"] .submission { break-inside: avoid; page-break-inside: avoid; }
    .history-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 10px; border-bottom: 1px solid #b8cfcc; background: #eef8f7; }
    .history-record h3 { margin: 0 0 2px; color: #111; font-size: 14px; }
    .history-record h4 { margin: 0; color: #17877d; font-size: 12px; }
    .history-subsection { margin: 0; padding: 8px 10px; border-top: 1px solid #d7e6e4; }
    .history-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid #d7e6e4; border-right: 0; border-bottom: 0; }
    .history-answer-grid > div { min-height: 44px; padding: 7px 8px; border-right: 1px solid #d7e6e4; border-bottom: 1px solid #d7e6e4; }
    .history-answer-grid strong { display: block; color: #17877d; font-size: 10px; line-height: 1.2; }
    .history-answer-grid p { margin: 3px 0 0; color: #111; font-size: 11px; line-height: 1.3; }
    .appointment-print-record { display: block; }
    .appointment-print-sheet {
        page: appointment-print;
        position: relative;
        padding: 10mm 10mm 14mm;
    }
    .appointment-print-sheet::after {
        content: "Page " counter(page);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 4mm;
        color: #555;
        font-size: 10px;
        text-align: center;
    }
    .detail-card { padding: 0; margin: 0 0 6mm; border: 1px solid #b8cfcc; border-radius: 0; box-shadow: none; break-inside: avoid; }
    .appointment-card-form { break-before: page; page-break-before: always; }
    .appointment-card-form .section-head { margin-bottom: 5mm; }
    .appointment-card-form .section-head h2 { margin-bottom: 2mm; }
    .appointment-card-form .assessment-page {
        padding: 6mm 6mm 8mm;
        margin: 0 0 5mm;
        page-break-after: auto;
        break-after: auto;
    }
    .appointment-card-form .assessment-page::after { height: 0; }
    .appointment-card-form .clinical-print-page h2 { margin-bottom: 5mm; }
    .detail-card h2 { margin: 0; padding: 8px 10px; border-bottom: 1px solid #b8cfcc; background: #eef8f7; color: #111; font-size: 14px; }
    .detail-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 0; }
    .detail-card dl div { display: block; min-height: 44px; padding: 7px 8px; border-right: 1px solid #d7e6e4; border-bottom: 1px solid #d7e6e4; }
    .detail-card dt { display: block; color: #17877d; font-size: 10px; line-height: 1.2; text-transform: uppercase; }
    .detail-card dd { margin: 3px 0 0; color: #111; font-size: 11px; line-height: 1.3; font-weight: 700; }
    .badge { border: 1px solid #aaa; background: #fff !important; color: #111 !important; }
    [data-history-panel="assessments"] .history-subsection { break-inside: avoid; page-break-inside: avoid; }
    [data-history-panel="assessments"] .history-answer-grid > div { break-inside: avoid; page-break-inside: avoid; }
    [data-history-panel="appointments"] .history-subsection { break-inside: avoid; }
}

@media (max-width: 1024px) {
    .shell { display: grid; grid-template-columns: 1fr; }
    .shell + .site-footer { margin-left: 0; width: 100%; }
    .sidebar-toggle { display: inline-flex; width: 100%; }
    .sidebar {
        position: static;
        height: auto;
        max-height: 0;
        overflow: hidden;
        padding: 0 20px;
        border-right: 0;
        border-bottom: 1px solid transparent;
        opacity: 0;
        transform: translateY(-8px);
        transition: max-height .25s ease, opacity .25s ease, transform .25s ease, padding .25s ease, border-color .25s ease;
    }
    body.sidebar-open .sidebar {
        max-height: 1000px;
        padding: 22px 20px 24px;
        border-bottom-color: var(--line);
        opacity: 1;
        transform: translateY(0);
    }
    .sidebar nav { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .main { margin-left: 0; max-width: 100%; padding: 14px; }
    .topbar, .section-head { align-items: flex-start; flex-direction: column; }
    .topbar { position: sticky; top: 0; z-index: 20; padding: 16px; gap: 16px; }
    .mobile-desk-head { display: grid; gap: 14px; width: 100%; }
    .mobile-desk-head .brand { display: grid; justify-items: center; gap: 8px; width: 100%; }
    .mobile-desk-head .brand img { width: min(220px, 100%); }
    .mobile-desk-head .brand-label { font-size: 14px; }
    .mobile-menu { width: 100%; }
    .mobile-menu summary { min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 8px; background: #eef8f7; color: var(--teal); font-weight: 900; cursor: pointer; list-style: none; }
    .mobile-menu summary::-webkit-details-marker { display: none; }
    .mobile-menu[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--teal); color: #fff; }
    .mobile-menu nav { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fbfefd; }
    .mobile-menu a, .mobile-menu button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 10px 12px; border: 0; border-radius: 8px; background: #fff; color: var(--teal); font-weight: 900; box-shadow: none; cursor: pointer; }
    .mobile-menu form { margin: 0; }
    .mobile-menu button { background: #eef8f7; }
    .sidebar-toggle, .topbar-page, .topbar > .topbar-logout { display: none !important; }
    .cards { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .product-overview, .workflow-panel { grid-template-columns: 1fr; padding: 26px; }
    .overview-dashboard, .feature-grid, .workflow-rail, .landing-insights { grid-template-columns: 1fr; }
    .overview-dashboard article { min-height: auto; }
    .section-title-row, .landing-cta { align-items: stretch; flex-direction: column; }
    .workflow-rail::before, .workflow-rail::after { left: 36px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
    .workflow-rail::after { height: 32%; animation-name: workflowLineMobile; }
    .workflow-rail article { padding-left: 72px; }
    .workflow-rail span { position: absolute; left: 20px; top: 20px; }
    .hero { min-height: 70vh; }
    .hero { grid-template-columns: 1fr; }
    .hero-gallery-track { min-height: 300px; }
    .hero-gallery-control { width: 40px; height: 40px; }
    .hero-gallery-control::before { width: 11px; height: 11px; border-width: 3px; }
    .hero-gallery-control.prev { left: 22px; }
    .hero-gallery-control.next { right: 22px; }
    .hero-gallery figcaption { right: 72px; }
    .hero-gallery-thumbs button { height: 64px; }
    .form-section { padding: 24px 18px; }
    .appointment-step-flow { padding: 24px 18px; }
    .step-flow-head { flex-direction: column; }
    .step-flow-track { grid-template-columns: 1fr; gap: 18px; }
    .step-flow-item::after { left: 27px; right: auto; top: 54px; width: 2px; height: calc(100% + 18px); }
    .step-flow-track .step-flow-item:last-child::after { display: none; }
    .step-flow-actions { justify-content: stretch; }
    .step-flow-actions .btn { flex: 1; }
    .step-flow-bottom-actions { padding: 20px 18px; justify-content: stretch; }
    .step-flow-bottom-actions .btn { flex: 1; }
    .clean-form-grid { grid-template-columns: 1fr; gap: 18px; }
    .span-2 { grid-column: span 1; }
    .form-actions { align-items: stretch; flex-direction: column; padding: 22px 18px 26px; }
    .form-actions .btn { width: 100%; }
    .calendar-toolbar, .calendar-actions { align-items: stretch; flex-direction: column; }
    .calendar-jump { width: 100%; }
    .calendar-jump input, .calendar-jump button, .calendar-actions a { width: 100%; }
    .doctor-calendar-panel { height: auto; min-height: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
    .month-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; width: 100%; }
    .calendar-weekday { display: block; padding: 9px 2px; font-size: 13px; line-height: 1.1; }
    .month-day { min-height: clamp(66px, 17vw, 86px); padding: 7px 3px; gap: 4px; align-items: center; text-align: center; }
    .month-day-head { justify-content: center; min-height: 24px; }
    .month-day-head span { width: 24px; height: 24px; font-size: 14px; }
    .month-day-head em { display: none; }
    .calendar-appointments { width: 100%; justify-items: center; gap: 3px; }
    .calendar-appointment { width: 100%; padding: 3px; border-left: 0; border-top: 3px solid var(--teal); border-radius: 6px; }
    .calendar-appointment strong { font-size: 10px; line-height: 1.1; }
    .calendar-appointment span,
    .calendar-appointment small,
    .no-appointment { display: none; }
    .more-appointments { font-size: 10px; padding: 0; }
    .chart-grid { grid-template-columns: 1fr; }
    .chart-card-head, .chart-row-head { align-items: flex-start; flex-direction: column; }
    .bar-chart { min-width: 680px; }
    .appointment-detail-grid, .status-form { grid-template-columns: 1fr; }
    .doctor-notes-form .btn { justify-self: stretch; }
    .detail-card dl div { grid-template-columns: 1fr; gap: 4px; }
    .form-settings { grid-template-columns: 1fr; }
    .builder-tab-switch { display: grid; grid-template-columns: 1fr; width: 100%; }
    .builder-tab-switch button { min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); text-align: left; }
    .builder-tab-switch button:last-child { border-bottom: 0; }
    .section-config-grid { grid-template-columns: 1fr; }
    .section-card-head, .section-meta-grid { grid-template-columns: 1fr; flex-direction: column; }
    .section-card-head .actions { justify-content: flex-start; }
    .field-sheet { min-width: 1020px; }
    .preview-panel { position: static; }
    .landing-nav { align-items: flex-start; flex-direction: column; gap: 14px; }
    .public-nav { flex-wrap: wrap; }
    .footer-main { grid-template-columns: 1fr; gap: 26px; padding: 38px 0; }
    .footer-logo { margin-bottom: 28px; }
    .footer-about p { font-size: 17px; }
    .footer-contact-list { justify-self: stretch; }
    .hours-card div { grid-template-columns: 1fr; gap: 2px; font-size: 18px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .pagination { justify-content: flex-start; }
    .assessment-page { min-height: auto; padding: 26px 18px; }
    .assessment-grid { grid-template-columns: 1fr; }
    .assessment-grid > [class*="span-"] { grid-column: 1 / -1; }
    .tooth-row, .tooth-row.permanent { grid-template-columns: repeat(5, minmax(42px, 1fr)); }
    .staff-assessment-section .clean-form-grid { grid-template-columns: 1fr; }
    .staff-assessment-section [class*="staff-span-"] { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .landing-nav { align-items: center; gap: 16px; padding: 18px 24px 20px; }
    .landing-nav .brand { justify-content: center; width: 100%; }
    .landing-nav .brand img { width: min(210px, 100%); }
    .public-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 330px); }
    .public-nav a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 8px; background: #eef8f7; text-align: center; line-height: 1.15; }
    .public-nav .btn.small { min-height: 46px; padding: 10px 12px; }
    .main { padding: 12px; }
    .topbar { padding: 14px; gap: 12px; }
    .topbar strong { font-size: 16px; }
    .sidebar nav { grid-template-columns: 1fr; }
    .sidebar nav a { padding: 12px 14px; }
    .panel, .card { padding: 16px; }
    .form-section { padding: 22px 16px 24px; }
    .form-section-title h2 { font-size: 20px; }
    .footer-main { width: min(100%, calc(100% - 28px)); }
    .footer-bottom { padding: 20px 14px; }
    .hero { padding: 44px 24px 54px; }
    .hero-gallery { padding: 8px; }
    .hero-gallery-track { aspect-ratio: 4 / 3; min-height: 240px; }
    .hero-gallery-control { top: calc(50% - 34px); width: 36px; height: 36px; }
    .hero-gallery-control.prev { left: 16px; }
    .hero-gallery-control.next { right: 16px; }
    .hero-gallery figcaption { left: 14px; right: 14px; bottom: 14px; }
    .hero-gallery figcaption strong { font-size: 16px; }
    .hero-gallery figcaption span { display: none; }
    .hero-gallery-thumbs { gap: 7px; margin-top: 8px; }
    .hero-gallery-thumbs button { height: 48px; }
    .landing { padding: 42px 24px 54px; gap: 42px; }
    .product-overview, .workflow-panel, .landing-cta { padding: 22px; }
    .overview-copy h2, .section-title-row h2, .workflow-panel h2 { font-size: 30px; }
    .overview-copy p:last-child { font-size: 16px; }
    .feature-card { min-height: auto; padding: 22px; }
    .landing-insights article { padding: 24px 20px 24px 62px; }
}

@keyframes workflowLineMobile {
    0%, 12% { transform: translateY(0); }
    45%, 55% { transform: translateY(96%); }
    88%, 100% { transform: translateY(192%); }
}