/* =============================================================================
   Nouri — base styles (theme tokens via CSS custom properties)
   Light/dark switched via prefers-color-scheme + manual data-theme override
   Palette: zesty yellow primary, lime accent
   ============================================================================= */

:root {
    --nr-yellow:    #FFD23F;
    --nr-lime:      #A8E10C;
    --nr-bg:        #FFFCF2;     /* warm off-white */
    --nr-surface:   #FFFFFF;
    --nr-text:      #1F1F1F;     /* charcoal, not pure black */
    --nr-text-mute: #5A5A5A;
    --nr-border:    #EDE7D6;
    --nr-radius:    14px;
    --nr-font:
        -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --nr-yellow:    #E8B800;   /* muted on dark */
        --nr-lime:      #8FCB0A;
        --nr-bg:        #121212;
        --nr-surface:   #1C1C1C;
        --nr-text:      #ECECEC;
        --nr-text-mute: #9A9A9A;
        --nr-border:    #2A2A2A;
    }
}

[data-theme="light"] {
    --nr-yellow: #FFD23F; --nr-lime: #A8E10C;
    --nr-bg: #FFFCF2; --nr-surface: #FFFFFF; --nr-text: #1F1F1F;
    --nr-text-mute: #5A5A5A; --nr-border: #EDE7D6;
}
[data-theme="dark"] {
    --nr-yellow: #E8B800; --nr-lime: #8FCB0A;
    --nr-bg: #121212; --nr-surface: #1C1C1C; --nr-text: #ECECEC;
    --nr-text-mute: #9A9A9A; --nr-border: #2A2A2A;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--nr-bg);
    color: var(--nr-text);
    font-family: var(--nr-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;   /* prevent page-wide horizontal scroll */
    min-height: 100dvh;   /* short pages fill the viewport (no gap below footer) */
}

.splash {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
}

.logo-img {
    width: clamp(220px, 60vw, 480px);
    height: auto;
    margin: 0 0 0.75rem;
    border-radius: 18px;
    /* In dark mode the logo has a cream background; render it as an intentional
       "plate" with subtle border so it sits cleanly on the dark surface. */
    background: transparent;
}
@media (prefers-color-scheme: dark) {
    .logo-img {
        box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
    }
}
[data-theme="dark"] .logo-img {
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.tagline {
    font-size: 1.15rem;
    color: var(--nr-text-mute);
    margin: 0 0 2rem;
}

.status {
    font-size: 0.9rem;
    color: var(--nr-text-mute);
    border: 1px solid var(--nr-border);
    border-radius: var(--nr-radius);
    padding: 0.6rem 1rem;
    background: var(--nr-surface);
}

.splash-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 0.8rem;
    color: var(--nr-text-mute);
    background: linear-gradient(to top, var(--nr-bg) 60%, transparent);
}
.splash-footer a {
    color: var(--nr-text-mute);
    text-decoration: none;
    margin: 0 0.5rem;
}
.splash-footer a:hover { color: var(--nr-text); }
.splash-footer .dot { opacity: 0.5; }

/* =============================================================================
   Page shell, forms, cookie banner, legal/spec pages
   ============================================================================= */

/* ----- Header ----- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--nr-bg);
    border-bottom: 1px solid var(--nr-border);
    backdrop-filter: saturate(160%) blur(10px);
}
.brand img { height: 30px; width: auto; display: block; border-radius: 6px; }
.site-nav { display: flex; align-items: center; gap: 0.5rem; }
.nav-link {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem; font-weight: 500;
    color: var(--nr-text);
}
.nav-link:hover { background: var(--nr-surface); }
.nav-cta { background: var(--nr-yellow); color: #1F1F1F; }
.nav-cta:hover { background: var(--nr-lime); }

.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--nr-yellow), var(--nr-lime));
    color: #1F1F1F; font-weight: 700; font-size: 0.9rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* ----- Splash ----- */
.splash { min-height: calc(100vh - 60px - 60px); }
.splash-cta { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; margin-top: 1.5rem; }

/* ----- Buttons ----- */
.btn-primary {
    display: inline-block;
    background: var(--nr-yellow); color: #1F1F1F;
    padding: 0.75rem 1.4rem;
    border: 0; border-radius: 12px;
    font-weight: 600; font-size: 1rem;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}
.btn-primary:hover { background: var(--nr-lime); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary.btn-block { width: 100%; }

.btn-secondary {
    background: transparent; color: var(--nr-text);
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--nr-border); border-radius: 12px;
    font-weight: 500; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--nr-text-mute); }

.btn-link {
    background: none; border: 0; color: var(--nr-text-mute);
    text-decoration: none; font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
}
.btn-link:hover { color: var(--nr-text); }

/* ----- Forms (auth) ----- */
.auth-wrap {
    max-width: 440px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem;
}
.auth-title { font-size: 1.6rem; margin: 0.5rem 0 0.25rem; font-weight: 700; }
.auth-sub   { color: var(--nr-text-mute); margin: 0 0 1.5rem; }
.auth-form label {
    display: block; margin-top: 0.9rem; font-size: 0.85rem; color: var(--nr-text-mute);
}
.auth-form input,
.auth-form select {
    display: block; width: 100%; box-sizing: border-box;
    margin-top: 0.3rem;
    padding: 0.65rem 0.85rem; font-size: 1rem;
    background: var(--nr-surface); color: var(--nr-text);
    border: 1px solid var(--nr-border); border-radius: 10px;
}
.auth-form input:focus,
.auth-form select:focus { outline: 2px solid var(--nr-yellow); outline-offset: 1px; }
.auth-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.auth-form .hint { display: block; font-size: 0.75rem; color: var(--nr-text-mute); margin-top: 0.25rem; }
.auth-form .check { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; color: var(--nr-text); }
.auth-form .check input { width: auto; margin-top: 0.2rem; }
.auth-form button { margin-top: 1.5rem; }
.auth-meta { text-align: center; color: var(--nr-text-mute); font-size: 0.9rem; margin-top: 1.25rem; }

.form-error {
    background: #FEE2E2; color: #991B1B;
    padding: 0.7rem 0.9rem; border-radius: 10px;
    font-size: 0.9rem; margin: 0 0 1rem;
}
@media (prefers-color-scheme: dark) {
    .form-error { background: #3B1414; color: #FCA5A5; }
}

/* ----- Legal pages ----- */
.legal-wrap { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }
.legal-wrap h1 { margin: 0.5rem 0 0.25rem; }
.legal-wrap h2 { margin-top: 2rem; font-size: 1.1rem; }
.legal-wrap p, .legal-wrap li { line-height: 1.55; }
.legal-meta { color: var(--nr-text-mute); font-size: 0.85rem; margin-bottom: 1.5rem; }

/* ----- Spec page ----- */
.spec-wrap   { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }
.spec-back   { color: var(--nr-text-mute); text-decoration: none; font-size: 0.85rem; }
.spec-back:hover { color: var(--nr-text); }
.spec-h      { margin: 0.75rem 0 0.25rem; font-size: 1.4rem; }
.spec-meta   { color: var(--nr-text-mute); font-size: 0.85rem; margin-bottom: 1.5rem; }
.spec-md {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: var(--nr-radius);
    padding: 1.25rem 1.5rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem; line-height: 1.55;
    white-space: pre-wrap; word-wrap: break-word;
    color: var(--nr-text); overflow-x: auto;
}

/* ----- Footer (replaces previous splash-only one) ----- */
.site-footer {
    border-top: 1px solid var(--nr-border);
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--nr-bg);
}
.footer-inner {
    max-width: 880px; margin: 0 auto;
    text-align: center;
    font-size: 0.8rem; color: var(--nr-text-mute);
}
.site-footer a { color: var(--nr-text-mute); text-decoration: none; margin: 0 0.5rem; }
.site-footer a:hover { color: var(--nr-text); }
.site-footer .dot { opacity: 0.5; }

/* Suppress the older fixed splash-only footer if it ever renders */
.splash-footer { display: none; }

/* ----- Cookie banner ----- */
.sf-cookie-banner {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 200;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
@media (min-width: 700px) {
    .sf-cookie-banner { left: auto; right: 1rem; bottom: 1rem; max-width: 460px; }
}
.sf-cookie-inner { padding: 1rem 1.1rem 1.1rem; }
.sf-cookie-text strong { display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }
.sf-cookie-text p      { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--nr-text-mute); line-height: 1.5; }
.sf-cookie-detail summary { cursor: pointer; font-size: 0.8rem; color: var(--nr-text-mute); }
.sf-cookie-detail ul { padding-left: 1.2rem; margin: 0.5rem 0 0.6rem; font-size: 0.8rem; color: var(--nr-text-mute); }
.sf-cookie-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin-top: 0.4rem;
}
.sf-cookie-actions .btn-primary,
.sf-cookie-actions .btn-secondary { padding: 0.55rem 1rem; font-size: 0.9rem; }

/* Info / success banner used on auth pages */
.form-info {
    background: rgba(168, 225, 12, 0.18);
    color: #1F1F1F;
    border: 1px solid rgba(168, 225, 12, 0.6);
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
@media (prefers-color-scheme: dark) {
    .form-info { background: rgba(168, 225, 12, 0.10); color: #ECECEC; border-color: rgba(168, 225, 12, 0.35); }
}

/* =============================================================================
   Profile dropdown + preferences page + danger button
   ============================================================================= */

.profile-wrap { position: relative; }

.avatar { border: 0; padding: 0; cursor: pointer; }

.profile-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 240px;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    padding: 0.5rem;
    z-index: 60;
}
.pm-section { padding: 0.4rem 0.5rem; }
.pm-label   { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
              color: var(--nr-text-mute); margin-bottom: 0.35rem; }
.pm-toggle  {
    display: flex; gap: 4px; padding: 4px;
    background: var(--nr-bg);
    border-radius: 10px;
    border: 1px solid var(--nr-border);
    margin: 0;
}
.pm-toggle button {
    flex: 1;
    background: transparent; color: var(--nr-text);
    border: 0; padding: 0.4rem 0.6rem;
    border-radius: 8px; font-size: 0.8rem; cursor: pointer;
    font-weight: 500;
}
.pm-toggle button.is-active { background: var(--nr-yellow); color: #1F1F1F; }
.pm-toggle button:hover:not(.is-active) { background: rgba(0,0,0,0.04); }
@media (prefers-color-scheme: dark) {
    .pm-toggle button:hover:not(.is-active) { background: rgba(255,255,255,0.05); }
}

.pm-divider { height: 1px; background: var(--nr-border); margin: 0.4rem 0.4rem; }

.pm-item {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; cursor: pointer;
    padding: 0.55rem 0.85rem;
    color: var(--nr-text); text-decoration: none; font-size: 0.9rem;
    border-radius: 8px;
}
.pm-item:hover { background: var(--nr-bg); }
.pm-item-danger { color: #B91C1C; }
.pm-item-danger:hover { background: rgba(185, 28, 28, 0.08); }
@media (prefers-color-scheme: dark) {
    .pm-item-danger { color: #F87171; }
    .pm-item-danger:hover { background: rgba(248, 113, 113, 0.10); }
}
.pm-form { margin: 0; }

/* Preferences page */
.pref-h {
    margin: 2.5rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--nr-border);
    font-size: 1.05rem;
}
.pref-h.pref-danger { color: #B91C1C; }
@media (prefers-color-scheme: dark) {
    .pref-h.pref-danger { color: #F87171; }
}
.pref-text { color: var(--nr-text-mute); font-size: 0.9rem; margin: 0.25rem 0 1rem; }

.btn-danger {
    display: inline-block;
    background: #B91C1C; color: #fff;
    padding: 0.7rem 1.2rem;
    border: 0; border-radius: 12px;
    font-weight: 600; cursor: pointer;
    margin-top: 1rem;
}
.btn-danger:hover { background: #991B1B; }

/* Small button variant — used for inline Edit / Abandon actions */
.btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    border-radius: 8px;
    margin-top: 0;
}
.btn-sm.btn-danger { margin-top: 0; }

/* Row of action buttons on a goal card */
.goal-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Header action button (e.g. + Add goal) inside a .dash-greet header.
   Keeps the button on one line and centred against the title block.
   (Inline styles are blocked by our CSP, so this lives here.) */
.dash-greet .btn-sm {
    align-self: center;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Inline form (e.g. abandon-goal form sitting next to the Edit link). */
.goal-abandon-form { display: inline; }

/* Progress fill width is set by JS from data-pct (CSP blocks inline width). */
.goal-progress-fill { display: block; height: 100%; width: 0; }

/* Wider variant of the auth-wrap for forms with more content (e.g. goal builder). */
.auth-wrap--wide { max-width: 560px; }

/* Tight preference heading (no top border / padding) — used at top of a form. */
.pref-h--flush {
    margin-top: 0.5rem;
    border-top: 0;
    padding-top: 0;
}

/* Transient success / info banner after a redirect */
.flash-banner {
    background: var(--nr-yellow);
    color: #1F1F1F;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

/* =============================================================================
   Defeat user-agent default purple on visited links.
   `a` plain rules have lower specificity than UA's `a:visited`, so we restate
   colours for the visited state — class-styled links keep their colour, plain
   inline links inherit from their parent's text colour.
   ============================================================================= */
a:visited                    { color: inherit; }

.brand:visited               { color: inherit; }
.nav-link:visited            { color: var(--nr-text); }
.nav-cta:visited             { color: #1F1F1F; }

.btn-primary:visited         { color: #1F1F1F; }
.btn-secondary:visited       { color: var(--nr-text); }
.btn-link:visited            { color: var(--nr-text-mute); }
.btn-danger:visited          { color: #fff; }

.spec-back:visited           { color: var(--nr-text-mute); }
.site-footer a:visited       { color: var(--nr-text-mute); }
.splash-footer a:visited     { color: var(--nr-text-mute); }

.pm-item:visited             { color: var(--nr-text); }
.pm-item-danger:visited      { color: #B91C1C; }
@media (prefers-color-scheme: dark) {
    .pm-item-danger:visited  { color: #F87171; }
}

/* Inline links in legal copy & message bodies — pick up parent colour */
.legal-wrap a:visited,
.auth-wrap a:visited,
.auth-meta a:visited,
.spec-md a:visited           { color: inherit; }

/* =============================================================================
   Header brand wordmark — yellow→lime gradient text with theme-aware outline
   (light mode: black outline; dark mode: white outline).
   The .webp logo continues to live on the splash + as favicon/PWA icon.
   ============================================================================= */
.brand { display: inline-flex; align-items: center; line-height: 1; text-decoration: none; }
.brand img { height: 30px; width: auto; display: block; border-radius: 6px; }  /* legacy fallback */

.brand-text {
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(120deg, var(--nr-yellow) 0%, var(--nr-lime) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #1F1F1F;       /* light mode default — black outline */
    paint-order: stroke fill;
    user-select: none;
}

/* Dark mode (system) */
@media (prefers-color-scheme: dark) {
    .brand-text { -webkit-text-stroke: 1px #FFFFFF; }
}
/* Manual theme overrides take precedence */
[data-theme="light"] .brand-text { -webkit-text-stroke: 1px #1F1F1F; }
[data-theme="dark"]  .brand-text { -webkit-text-stroke: 1px #FFFFFF; }

/* Two-tone "sch" + "liff" wordmark (overrides the earlier single-tone version) */
.brand-text {
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -0.04em;
    line-height: 1;
    background: none;          /* reset the earlier gradient */
    -webkit-background-clip: initial;
            background-clip: initial;
    color: inherit;
    -webkit-text-fill-color: initial;
    -webkit-text-stroke: 0;
    user-select: none;
    display: inline-flex;
}

/* "sch" — solid theme colour */
.brand-sch {
    color: #1F1F1F;            /* light mode default */
}
@media (prefers-color-scheme: dark) {
    .brand-sch { color: #FFFFFF; }
}
[data-theme="light"] .brand-sch { color: #1F1F1F; }
[data-theme="dark"]  .brand-sch { color: #FFFFFF; }

/* "liff" — yellow → lime gradient */
.brand-liff {
    background: linear-gradient(120deg, var(--nr-yellow) 0%, var(--nr-lime) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Prominent inline field alert (e.g. age violation) shown right under a form field */
.field-alert {
    display: block;
    margin-top: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid rgba(185, 28, 28, 0.35);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}
.field-alert[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
    .field-alert { background: #3B1414; color: #FCA5A5; border-color: rgba(248, 113, 113, 0.4); }
}

/* =============================================================================
   Dashboard — main tabs, sub-tabs, cards, sparkline, summaries
   ============================================================================= */

.main-tabs, .sub-tabs {
    display: flex;
    gap: 4px;
    padding: 0.5rem 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--nr-bg);
    border-bottom: 1px solid var(--nr-border);
}
.main-tabs::-webkit-scrollbar,
.sub-tabs::-webkit-scrollbar { display: none; }

.main-tab, .sub-tab {
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--nr-text-mute);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}
.main-tab:hover, .sub-tab:hover { color: var(--nr-text); }
.main-tab.is-active, .sub-tab.is-active {
    color: #1F1F1F;
    background: var(--nr-yellow);
}
[data-theme="dark"] .main-tab.is-active,
[data-theme="dark"] .sub-tab.is-active { color: #1F1F1F; }

.sub-tabs {
    border-bottom: 0;
    padding-top: 0.5rem;
    padding-bottom: 0;
}
.sub-tab {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    font-size: 0.82rem;
}

.dash {
    max-width: 880px;
    margin: 0 auto;
    padding: 1rem 1rem 5rem;
}

.dash-greet {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: 0.5rem 0 1.25rem;
}
.dash-title { font-size: 1.6rem; margin: 0 0 0.25rem; font-weight: 700; }
.dash-quote { color: var(--nr-text-mute); margin: 0; font-size: 0.95rem; line-height: 1.5; }
.dash-sub   { color: var(--nr-text-mute); margin: 0 0 1.5rem; }

.dash-streak {
    display: flex; flex-direction: column; align-items: center;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    padding: 0.6rem 0.9rem;
    min-width: 72px;
}
.streak-flame { font-size: 1.4rem; line-height: 1; }
.streak-num   { font-size: 1.3rem; font-weight: 700; line-height: 1; margin-top: 0.15rem; }
.streak-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nr-text-mute); }

.dash-card {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.card-h    { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }
.card-sub  { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nr-text-mute); margin-bottom: 0.4rem; }
.card-empty{ color: var(--nr-text-mute); font-size: 0.9rem; margin: 0.25rem 0; }

/* ----- Today snapshot ----- */
.snapshot-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 1rem;
    align-items: center;
}
@media (max-width: 600px) {
    .snapshot-row { grid-template-columns: auto 1fr; gap: 0.75rem; }
    .workout-status { grid-column: 1 / -1; padding-top: 1rem; }
}

.points-ring {
    position: relative;
    width: 80px; height: 80px;
}
.ring-inner {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1;
}
.ring-num    { font-size: 1.2rem; font-weight: 700; }
.ring-target { font-size: 0.7rem; color: var(--nr-text-mute); }
.ring-label  { position: absolute; bottom: -1.1rem; left: 0; right: 0; text-align: center;
               font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nr-text-mute); }

.meal-ticks { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.meal-ticks .card-sub { width: 100%; }
.tick {
    width: 28px; height: 28px;
    border-radius: 999px;
    border: 1px solid var(--nr-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 600;
    color: var(--nr-text-mute);
    background: var(--nr-bg);
}
.tick.is-on { background: var(--nr-lime); color: #1F1F1F; border-color: transparent; }

.workout-line { font-size: 0.95rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--nr-border); margin-right: 0.4rem; vertical-align: middle; }
.dot.dot-on { background: var(--nr-lime); }

/* ----- Quick actions ----- */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
}
@media (max-width: 600px) {
    .qa-grid { grid-template-columns: repeat(2, 1fr); }
}
.qa {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    padding: 0.85rem 0.5rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--nr-text);
    font-size: 0.78rem;
    text-align: center;
}
.qa:hover { background: var(--nr-bg); border-color: var(--nr-yellow); }
.qa-icon { font-size: 1.5rem; line-height: 1; }

/* ----- Sparkline ----- */
.sparkline-wrap { width: 100%; }
.sparkline { width: 100%; height: 120px; display: block; }
.sparkline-meta { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 0.5rem; color: var(--nr-text); }
.sparkline-meta .muted { color: var(--nr-text-mute); font-size: 0.75rem; }

/* ----- Summary cards ----- */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
}
@media (max-width: 600px) {
    .summary-grid { grid-template-columns: 1fr; }
}
.summary-card {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
}
.sc-num { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.sc-lbl { color: var(--nr-text-mute); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.4rem; }

/* ----- Coming soon placeholder ----- */
.coming-soon-card {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--nr-text-mute);
}
.cs-icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.coming-soon-card .dash-title { color: var(--nr-text); }

/* ----- Plan upsell ----- */
.upsell { border-color: var(--nr-yellow); }

/* Password peek toggle — eye button overlaid on right side of password inputs */
.password-wrap {
    position: relative;
    display: block;
}
.password-wrap input[type="password"],
.password-wrap input[type="text"] {
    padding-right: 2.6rem;     /* room for the eye button */
}
.password-peek {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--nr-text-mute);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 8px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.password-peek:hover { color: var(--nr-text); background: rgba(0,0,0,0.05); }
@media (prefers-color-scheme: dark) {
    .password-peek:hover { background: rgba(255,255,255,0.06); }
}

/* Goals tab — list, cards, history */
.empty-goals { text-align: center; padding: 2rem 1rem; }
.empty-goals .cs-icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.empty-goals .card-empty { max-width: 36ch; margin: 0.5rem auto 1.25rem; }

.goal-list { display: flex; flex-direction: column; gap: 0.75rem; }
.goal-card { padding: 1.1rem; }
.goal-meta {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; color: var(--nr-text-mute);
    margin-bottom: 0.4rem;
}
.goal-type-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.72rem;
}
.goal-type-pill.small { font-size: 0.68rem; }
.goal-status { color: var(--nr-text-mute); }
.goal-h     { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 600; }
.goal-dates { margin: 0; color: var(--nr-text-mute); font-size: 0.85rem; }

.goal-history { list-style: none; padding: 0; margin: 0; }
.goal-history li {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--nr-border);
    font-size: 0.9rem;
}
.goal-history li:last-child { border-bottom: 0; }

/* Goals — type picker grid + direction toggle + projection card */
.goal-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}
@media (min-width: 640px) {
    .goal-type-grid { grid-template-columns: repeat(3, 1fr); }
}
.goal-type-card {
    display: block;
    padding: 1.25rem 1rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--nr-text);
    transition: border-color 0.15s, transform 0.05s;
}
.goal-type-card:hover { border-color: var(--nr-yellow); transform: translateY(-1px); }
.goal-type-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.goal-type-card.is-disabled:hover { border-color: var(--nr-border); transform: none; }
.gtc-icon { font-size: 2rem; line-height: 1; display: block; margin-bottom: 0.5rem; }
.gtc-h    { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
.gtc-sub  { margin: 0; color: var(--nr-text-mute); font-size: 0.85rem; line-height: 1.45; }

.dir-toggle {
    display: flex; gap: 0.5rem; align-items: stretch;
    background: var(--nr-bg); border: 1px solid var(--nr-border);
    padding: 4px; border-radius: 12px; margin-bottom: 1rem;
}
/* Use .dir-toggle .dir-opt (specificity 0,2,0) to beat .auth-form label (0,1,1)
   which would otherwise impose display:block and margin-top:0.9rem on these labels. */
.dir-toggle .dir-opt {
    flex: 1; cursor: pointer; padding: 0.55rem 0.6rem;
    border-radius: 9px; font-weight: 600; text-align: center;
    color: var(--nr-text-mute);
    margin: 0;
    display: flex; align-items: center; justify-content: center;
}
.dir-toggle .dir-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dir-toggle .dir-opt:has(input:checked) { background: var(--nr-yellow); color: #1F1F1F; }

.projection {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.95rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    border: 1px solid var(--nr-border);
    background: var(--nr-surface);
    color: var(--nr-text);
}
.projection.is-safe   { border-color: rgba(168, 225, 12, 0.55); background: rgba(168, 225, 12, 0.10); }
.projection.is-unsafe { border-color: rgba(185, 28, 28, 0.45);  background: #FEE2E2; color: #991B1B; }
.projection.is-warn   { border-color: rgba(255, 180, 0, 0.55);  background: rgba(255, 210, 63, 0.15); color: #92620A; }
@media (prefers-color-scheme: dark) {
    .projection.is-unsafe { background: #3B1414; color: #FCA5A5; }
    .projection.is-warn   { background: rgba(255, 210, 63, 0.1); color: #FFD23F; }
}

/* Amber variant of the flash banner (gain-rate warning) */
.flash-banner--warn {
    background: rgba(255, 210, 63, 0.25);
    border: 1px solid rgba(255, 180, 0, 0.4);
    color: var(--nr-text);
}

/* Goals — body-comp progress block */
.goal-progress { margin-top: 0.85rem; }
.goal-progress-bar {
    height: 8px;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.goal-progress-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--nr-yellow), var(--nr-lime));
    transition: width 0.3s ease;
}
.goal-progress-meta {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: var(--nr-text-mute);
}
.goal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
    margin: 0.85rem 0 0;
}
.goal-stats > div {
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}
.goal-stats dt {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--nr-text-mute); margin: 0 0 0.15rem;
}
.goal-stats dd {
    margin: 0; font-size: 1rem; font-weight: 600;
}

/* =============================================================================
   Doc pages (Spec, Roadmap) — pretty markdown rendering
   ============================================================================= */
.doc-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 6rem;
}
.doc-h    { margin: 0.75rem 0 0.25rem; font-size: 1.6rem; font-weight: 700; }
.doc-meta { color: var(--nr-text-mute); font-size: 0.85rem; margin-bottom: 1.5rem; }

.doc-md { color: var(--nr-text); line-height: 1.65; font-size: 0.95rem; }
.doc-md h1 { font-size: 1.6rem; margin: 2rem 0 0.6rem; font-weight: 700; }
.doc-md h2 {
    font-size: 1.2rem; margin: 2rem 0 0.5rem; font-weight: 700;
    padding-top: 1rem; border-top: 1px solid var(--nr-border);
}
.doc-md h3 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; font-weight: 600; }
.doc-md h4 { font-size: 0.95rem; margin: 1.2rem 0 0.3rem; font-weight: 600; color: var(--nr-text-mute); }
.doc-md p  { margin: 0.6rem 0; }
.doc-md ul, .doc-md ol { padding-left: 1.4rem; margin: 0.5rem 0; }
.doc-md li { margin: 0.25rem 0; }
.doc-md li > ul, .doc-md li > ol { margin: 0.25rem 0; }

.doc-md hr { border: 0; border-top: 1px solid var(--nr-border); margin: 2rem 0; }
.doc-md a  { color: var(--nr-text); text-decoration: underline; text-underline-offset: 2px; }
.doc-md a:hover { color: var(--nr-lime); }

.doc-md code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 6px;
    padding: 0.05rem 0.4rem;
}
.doc-md pre {
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
}
.doc-md pre code { background: none; border: 0; padding: 0; }

.doc-md blockquote {
    margin: 0.75rem 0;
    padding: 0.4rem 0.9rem;
    border-left: 3px solid var(--nr-yellow);
    color: var(--nr-text-mute);
    background: var(--nr-bg);
    border-radius: 0 10px 10px 0;
}

.doc-md table {
    border-collapse: collapse;
    margin: 0.75rem 0;
    width: 100%;
    font-size: 0.9rem;
}
.doc-md th, .doc-md td {
    border: 1px solid var(--nr-border);
    padding: 0.5rem 0.7rem;
    text-align: left;
}
.doc-md th { background: var(--nr-bg); font-weight: 600; }

/* GitHub-style task list checkboxes */
.doc-md ul:has(input[type="checkbox"]) {
    list-style: none;
    padding-left: 0.25rem;
}
.doc-md li:has(input[type="checkbox"]) {
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.15rem 0;
}
.doc-md li:has(input[type="checkbox"]:checked) {
    color: var(--nr-text-mute);
}
.doc-md li:has(input[type="checkbox"]:checked) code,
.doc-md li:has(input[type="checkbox"]:checked) a {
    color: inherit;
    text-decoration: line-through;
}
.doc-md input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    margin: 0.3rem 0 0;
    border: 1.5px solid var(--nr-border);
    border-radius: 4px;
    cursor: default;
    flex: 0 0 auto;
    position: relative;
    background: var(--nr-surface);
}
.doc-md input[type="checkbox"]:checked {
    background: var(--nr-lime);
    border-color: var(--nr-lime);
}
.doc-md input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 0px;
    width: 5px; height: 10px;
    border: solid #1F1F1F;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.spec-back {
    display: inline-block;
    color: var(--nr-text-mute);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.spec-back:hover { color: var(--nr-text); }

/* =============================================================================
   Tier badges — Founder / Pro / Basic
   ============================================================================= */

.sf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}
.sf-badge--founder {
    background: linear-gradient(135deg, #FFD23F 0%, #FFAA00 100%);
    color: #3A2800;
    border: 1px solid #E8A800;
}
.sf-badge--pro {
    background: var(--nr-lime);
    color: #1A3300;
    border: 1px solid #8FCB0A;
}
.sf-badge--basic {
    background: var(--nr-surface);
    color: var(--nr-text-mute);
    border: 1px solid var(--nr-border);
}

/* Profile dropdown badge row */
.pm-badge-row {
    padding: 10px 14px 4px;
}

/* =============================================================================
   Admin area
   ============================================================================= */

.admin-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
.admin-header { margin-bottom: 1rem; }
.admin-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
.admin-flash {
    margin-bottom: 1rem;
}

/* Tab nav */
.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--nr-border);
    margin-bottom: 1.5rem;
}
.admin-tab {
    padding: 0.55rem 1.1rem;
    border-radius: 8px 8px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nr-text-mute);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.admin-tab:hover { color: var(--nr-text); }
.admin-tab.is-active {
    color: var(--nr-text);
    border-bottom: 3px solid var(--nr-yellow);
    margin-bottom: -2px;
}
.admin-tab-count {
    background: var(--nr-border);
    color: var(--nr-text-mute);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 700;
}
.admin-tab-count--alert {
    background: #E53935;
    color: #fff;
}

/* Panel */
.admin-panel {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: var(--nr-radius);
    padding: 1.25rem;
    overflow: hidden;
}
.admin-empty {
    color: var(--nr-text-mute);
    text-align: center;
    padding: 2rem 0;
    margin: 0;
}

/* Table */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-table th {
    text-align: left;
    padding: 0.5rem 0.5rem;
    color: var(--nr-text-mute);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--nr-border);
    white-space: nowrap;
}
.admin-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--nr-border);
    vertical-align: top;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-row--suspended td { opacity: 0.55; }
.admin-cell-email { color: var(--nr-text-mute); font-size: 0.82rem; }
.admin-cell-date  { color: var(--nr-text-mute); font-size: 0.82rem; white-space: nowrap; }
.admin-cell-name  { font-weight: 600; white-space: nowrap; }
.admin-cell-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}
/* Primary action row (suspend + founder toggle) */
.admin-action-row {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap;
}
/* Delete sits below everything, visually lighter */
.admin-action-danger {
    margin-top: 1px;
}

/* Status toggle buttons — replace static chips */
.status-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}
.status-toggle:hover { filter: brightness(0.9); }
.status-toggle--active {
    background: #E8F5E9;
    color: #2E7D32;
    border-color: #A5D6A7;
}
.status-toggle--suspended {
    background: #FFEBEE;
    color: #C62828;
    border-color: #EF9A9A;
}
[data-theme="dark"] .status-toggle--active    { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
[data-theme="dark"] .status-toggle--suspended { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }
@media (prefers-color-scheme: dark) {
    .status-toggle--active    { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
    .status-toggle--suspended { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }
}

/* Tier cell */
.admin-cell-tier { min-width: 110px; }

/* Badge as clickable button */
.sf-badge--btn {
    cursor: pointer;
    transition: filter 0.15s;
}
.sf-badge--btn:hover { filter: brightness(0.88); }

/* Basic badge gets a more prominent outline so it reads as interactive */
.sf-badge--basic.sf-badge--btn {
    border: 1.5px dashed var(--nr-text-mute);
}

/* Pro tier wrap: badge stacked above  − date + row */
.tier-pro-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.tier-pro-date-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tier-trial-date {
    font-size: 0.78rem;
    color: var(--nr-text-mute);
    white-space: nowrap;
}
/* .tier-month-btns removed — forms sit inline in .tier-pro-date-row */
.tier-month-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--nr-border);
    background: var(--nr-surface);
    color: var(--nr-text);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.12s;
}
.tier-month-btn:hover:not(:disabled) { background: var(--nr-border); }
.tier-month-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Countdown column */
.admin-countdown {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nr-text-mute);
}
.admin-countdown--warn {
    color: #E53935;
}
.admin-mute {
    color: var(--nr-text-mute);
    font-size: 0.8rem;
}

.admin-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 4px;
}
.admin-chip--admin { background: var(--nr-yellow); color: #3A2800; }

/* Action buttons */
.admin-btn {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: none;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.admin-btn:hover { opacity: 0.8; }
.admin-btn--ok       { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
.admin-btn--warn     { background: #FFF3E0; color: #E65100; border-color: #FFCC80; }
.admin-btn--danger   { background: #FFEBEE; color: #C62828; border-color: #EF9A9A; }
.admin-btn--founder  { background: linear-gradient(135deg, #FFD23F, #FFAA00); color: #3A2800; border-color: #E8A800; }
.admin-btn--muted    { background: var(--nr-surface); color: var(--nr-text-mute); border-color: var(--nr-border); }
[data-theme="dark"] .admin-btn--ok     { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
[data-theme="dark"] .admin-btn--warn   { background: #3B2300; color: #FFB74D; border-color: #E65100; }
[data-theme="dark"] .admin-btn--danger { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }

/* Delete confirmation expander — mirrors trial picker style */
.admin-delete-details { display: block; }
.admin-delete-details summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
}
.admin-delete-details summary::-webkit-details-marker { display: none; }
.admin-delete-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 5px;
    padding: 6px 8px;
    background: var(--nr-bg);
    border: 1px solid #EF9A9A;
    border-radius: 6px;
}
.admin-delete-input {
    font-size: 0.82rem;
    padding: 3px 7px;
    border: 1px solid var(--nr-border);
    border-radius: 5px;
    background: var(--nr-surface);
    color: var(--nr-text);
    width: 110px;
    font-family: monospace;
    letter-spacing: 0.05em;
}

.admin-action-form { display: contents; }

/* Small size modifier for secondary/danger actions */
.admin-btn--sm {
    padding: 3px 8px;
    font-size: 0.72rem;
}

/* Trial date picker */
.admin-trial-details { display: block; }
.admin-trial-details summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-trial-details summary::-webkit-details-marker { display: none; }
.admin-trial-until {
    font-size: 0.68rem;
    opacity: 0.7;
    font-weight: 400;
}
.admin-trial-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 5px;
    padding: 6px 8px;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 6px;
}
.admin-trial-input {
    font-size: 0.82rem;
    padding: 3px 7px;
    border: 1px solid var(--nr-border);
    border-radius: 5px;
    background: var(--nr-surface);
    color: var(--nr-text);
    flex: 1;
    min-width: 0;
}

/* Concerns severity */
.concern-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--nr-border);
}
.concern-dot--amber { background: #FFA726; }
.concern-dot--red   { background: #E53935; }
.concern-dot--black { background: #212121; }
[data-theme="dark"] .concern-dot--black { background: #9E9E9E; }

.concern-row--amber td { border-left: 3px solid #FFA726; }
.concern-row--red   td { border-left: 3px solid #E53935; }
.concern-row--black td { border-left: 3px solid #212121; opacity: 0.75; }
.concern-row--amber td:not(:first-child) { border-left: none; }
.concern-row--red   td:not(:first-child) { border-left: none; }
.concern-row--black td:not(:first-child) { border-left: none; }

.admin-concerns-key {
    font-size: 0.82rem;
    color: var(--nr-text-mute);
    margin: 0 0 1rem;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Analytics stub */
.admin-analytics-stub {
    text-align: center;
    padding: 3rem 2rem;
}
.admin-stub-icon  { font-size: 2.5rem; margin-bottom: 0.75rem; }
.admin-stub-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.admin-stub-sub   { font-size: 1rem; color: var(--nr-text-mute); margin: 0 0 1rem; }
.admin-stub-body  {
    font-size: 0.875rem;
    color: var(--nr-text-mute);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================================
   Admin — suspend modal dialog + suspension note button
   ============================================================ */

/* Native <dialog> backdrop */
.sf-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.sf-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(420px, 92vw);
    padding: 24px 28px 20px;
    border: 1px solid var(--nr-border);
    border-radius: 14px;
    background: var(--nr-surface);
    color: var(--nr-text);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    font-family: inherit;
}

.sf-dialog h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
}

.sf-dialog p {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    line-height: 1.45;
}

.sf-dialog textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    padding: 8px 10px;
    border: 1px solid var(--nr-border);
    border-radius: 7px;
    background: var(--nr-bg);
    color: var(--nr-text);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 14px;
}

.sf-dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.sf-dialog-cancel,
.sf-dialog-submit {
    flex: 1;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: filter 0.15s;
    border: 1px solid transparent;
}

.sf-dialog-cancel {
    border-color: var(--nr-border);
    background: var(--nr-surface);
    color: var(--nr-text-mute);
}
.sf-dialog-cancel:hover { filter: brightness(0.95); }

.sf-dialog-submit {
    border-color: #EF9A9A;
    background: #FFEBEE;
    color: #C62828;
}
.sf-dialog-submit:hover { filter: brightness(0.93); }

.sf-dialog-submit--save {
    border-color: #A5D6A7;
    background: #E8F5E9;
    color: #2E7D32;
}
.sf-dialog-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: none;
}

[data-theme="dark"] .sf-dialog-submit         { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }
[data-theme="dark"] .sf-dialog-submit--save   { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
[data-theme="dark"] .sf-dialog-cancel         { background: var(--nr-surface); color: var(--nr-text-mute); }

/* Speech-bubble icon button beside "Suspended" */
.suspension-note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #EF9A9A;
    background: #FFEBEE;
    color: #C62828;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    transition: filter 0.15s;
    flex-shrink: 0;
}
.suspension-note-btn:hover { filter: brightness(0.9); }
[data-theme="dark"] .suspension-note-btn { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }

/* Wrap suspended status + note button side-by-side */
.suspension-status-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   Dashboard — weigh-in flash + modal inputs
   ============================================================ */

.dash-flash {
    margin: 0.5rem 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.dash-flash--ok  { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
.dash-flash--err { background: #FFEBEE; color: #C62828; border-color: #EF9A9A; }
.dash-flash--info{ background: var(--nr-surface); color: var(--nr-text-mute); border-color: var(--nr-border); }
[data-theme="dark"] .dash-flash--ok  { background: #1B3B1E; color: #81C784; border-color: #388E3C; }
[data-theme="dark"] .dash-flash--err { background: #3B1B1B; color: #EF9A9A; border-color: #C62828; }

/* Make button.qa look identical to a.qa */
button.qa {
    cursor: pointer;
    font-family: inherit;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
}
button.qa:hover { background: var(--nr-bg); border-color: var(--nr-yellow); }

.qa-weight-logged {
    font-weight: 700;
    font-size: 0.85rem;
    color: #2E7D32;
}
[data-theme="dark"] .qa-weight-logged { color: #81C784; }

/* Weigh-in modal inputs */
.weighin-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nr-text-mute);
    margin-bottom: 8px;
}
.weighin-last {
    font-size: 0.8rem;
    color: var(--nr-text-mute);
    margin: -4px 0 12px;
}
/* Wrap input + unit as a single pill so the unit sits inside the border */
.weighin-input-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--nr-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--nr-bg);
    transition: border-color 0.15s;
}
.weighin-input-group:focus-within { border-color: var(--nr-yellow); }

.weighin-input {
    flex: 1;
    padding: 14px 12px;
    font-size: 1.3rem;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--nr-text);
    text-align: center;
    -moz-appearance: textfield;
    outline: none;
    min-width: 0;
}
.weighin-input::-webkit-outer-spin-button,
.weighin-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Stones layout: two narrow inputs side by side inside the same pill */
.weighin-input--stones { max-width: 80px; text-align: right; padding-right: 4px; }
.weighin-input--lbs    { max-width: 90px; text-align: left;  padding-left:  4px; }
.weighin-unit {
    display: flex;
    align-items: center;
    padding: 0 14px 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nr-text-mute);
    flex-shrink: 0;
    background: transparent;
}
/* Stones: unit labels sit between inputs */
.weighin-unit--mid {
    padding: 0 4px;
}

/* ============================================================
   Weigh-in — warning state styles
   ============================================================ */

.dash-flash--warn {
    background: #FFF8E1;
    color: #795548;
    border-color: #FFE082;
}
[data-theme="dark"] .dash-flash--warn { background: #3B2E00; color: #FFD54F; border-color: #F9A825; }

.weighin-warn-banner {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCC80;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 10px;
}
[data-theme="dark"] .weighin-warn-banner { background: #3B2300; color: #FFB74D; border-color: #E65100; }

.weighin-warn-body {
    font-size: 0.85rem;
    color: var(--nr-text);
    margin: 0 0 6px;
    line-height: 1.45;
}

.weighin-warn-edit {
    font-size: 0.8rem;
    color: var(--nr-text-mute);
    margin: 0 0 12px;
}

.weighin-confirm-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.83rem;
    color: var(--nr-text);
    line-height: 1.4;
    cursor: pointer;
}

.weighin-confirm-check {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #E65100;
    cursor: pointer;
}
/* =============================================================================
   Food tab — meal cards, search dialog, configure panel
   ============================================================================= */

/* ── Page header ──────────────────────────────────────────────────────────── */
.food-page { padding-top: 0.5rem; }

.food-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0 1rem;
}
.food-date-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.btn--yellow {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.btn--yellow:hover { filter: brightness(0.93); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.food-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--nr-text-mute);
}
.food-empty-icon  { font-size: 2.5rem; margin-bottom: 0.5rem; }
.food-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--nr-text); margin: 0 0 0.35rem; }
.food-empty-body  { margin: 0; font-size: 0.9rem; }

/* ── Meal card ────────────────────────────────────────────────────────────── */
.meal-card {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.meal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.meal-label-badge {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 20px;
    padding: 0.25rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: capitalize;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nr-text-mute);
    font-size: 1.1rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    line-height: 1;
}
.icon-btn:hover { color: var(--nr-text); background: var(--nr-border); }

/* ── Meal items list ──────────────────────────────────────────────────────── */
.meal-items-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}
.meal-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--nr-border);
}
.meal-item-row:last-child { border-bottom: none; }

.meal-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.meal-item-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meal-item-meta {
    font-size: 0.75rem;
    color: var(--nr-text-mute);
}
.meal-item-kcal {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--nr-text-mute);
}
.item-delete-btn { font-size: 1.2rem; }

/* ── Add item button ─────────────────────────────────────────────────────── */
.add-item-btn {
    width: 100%;
    border: 1.5px dashed var(--nr-border);
    background: none;
    color: var(--nr-text-mute);
    border-radius: 10px;
    padding: 0.55rem;
    cursor: pointer;
    font-size: 0.88rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s, color 0.15s;
}
.add-item-btn:hover {
    border-color: var(--nr-yellow);
    color: var(--nr-text);
}

/* ── Meal totals ──────────────────────────────────────────────────────────── */
.meal-totals { margin-top: 0.25rem; }

.meal-macros-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.macro-pill {
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
}
.macro-val  { font-size: 0.9rem; font-weight: 700; line-height: 1.2; }
.macro-lbl  { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nr-text-mute); }

.meal-vitamins {
    font-size: 0.75rem;
    color: var(--nr-text-mute);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.vit-sep  { margin: 0 0.2rem; }

.meal-points-row { display: flex; }
.meal-points-badge {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ── Food select (Add Meal dialog) ───────────────────────────────────────── */
.food-select {
    width: 100%;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    background: var(--nr-bg);
    color: var(--nr-text);
    margin: 0.5rem 0 1rem;
}

/* ── Food search dialog ───────────────────────────────────────────────────── */
dialog:not([open]) { display: none; }
.food-search-dialog {
    width: min(580px, 96vw);
    height: min(680px, 88vh);
    border-radius: 20px;
    padding: 0;
    border: 1px solid var(--nr-border);
    background: var(--nr-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.food-search-dialog::backdrop { background: rgba(0,0,0,0.5); }

.fsd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--nr-border);
    flex-shrink: 0;
}
.fsd-header h3 { margin: 0; font-size: 1rem; }
.fsd-close { font-size: 1.4rem; }

/* Panels fill remaining dialog height and scroll internally.
   Use :not([hidden]) so CSS display doesn't override the hidden attribute. */
.fsd-panel[hidden] { display: none; }
.fsd-panel:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fsd-body  { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem 1.25rem 1.5rem; }

/* ── Category chips ───────────────────────────────────────────────────────── */
.food-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.cat-chip {
    border: 1px solid var(--nr-border);
    background: var(--nr-bg);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--nr-text);
    transition: background 0.12s, border-color 0.12s;
}
.cat-chip:hover   { border-color: var(--nr-yellow); }
.cat-chip.is-active {
    background: var(--nr-yellow);
    border-color: var(--nr-yellow);
    color: #1F1F1F;
    font-weight: 600;
}

/* ── Search input ─────────────────────────────────────────────────────────── */
.food-search-input-wrap { margin-bottom: 0.75rem; }
.food-search-input {
    width: 100%;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    background: var(--nr-bg);
    color: var(--nr-text);
}
.food-search-input:focus { outline: 2px solid var(--nr-yellow); border-color: transparent; }

.food-search-status {
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    margin-bottom: 0.5rem;
    min-height: 1.2em;
}

/* ── Result list ─────────────────────────────────────────────────────────── */
.food-result-list { list-style: none; margin: 0; padding: 0; }
.food-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--nr-border);
    cursor: pointer;
    border-radius: 8px;
}
.food-result-item:hover { background: var(--nr-bg); padding-left: 0.4rem; }

.food-result-img {
    width: 48px; height: 48px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--nr-border);
    flex-shrink: 0;
    background: var(--nr-bg);
}
.food-result-img-placeholder {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: var(--nr-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.food-result-info { flex: 1; min-width: 0; }
.food-result-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.food-result-brand { font-size: 0.75rem; color: var(--nr-text-mute); }
.food-result-kcal  { font-size: 0.8rem; font-weight: 600; color: var(--nr-text-mute); white-space: nowrap; flex-shrink: 0; }

/* ── Configure panel ─────────────────────────────────────────────────────── */
.fsd-back-btn {
    background: none;
    border: none;
    color: var(--nr-yellow);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
}

.food-configure { padding-top: 0.25rem; }
.food-cfg-name  { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.15rem; }
.food-cfg-brand { font-size: 0.8rem; color: var(--nr-text-mute); margin-bottom: 1rem; }

.food-configure-field { margin-bottom: 0.85rem; }
.food-configure-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nr-text-mute);
    margin-bottom: 0.3rem;
}
.food-configure-input,
.food-configure-select {
    width: 100%;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    background: var(--nr-bg);
    color: var(--nr-text);
}
.food-configure-input:focus,
.food-configure-select:focus { outline: 2px solid var(--nr-yellow); border-color: transparent; }

.food-weight-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.food-weight-input { max-width: 120px; }
.food-weight-unit  { font-weight: 600; color: var(--nr-text-mute); }

/* ── Nutrition preview ───────────────────────────────────────────────────── */
.food-nutrition-preview {
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0 1rem;
}
.fnp-item { display: flex; flex-direction: column; align-items: center; }
.fnp-val  { font-size: 1.05rem; font-weight: 700; }
.fnp-lbl  { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--nr-text-mute); }

/* =============================================================================
   Food search dialog — tabs + scan panel
   ============================================================================= */

/* ── Dialog tab bar ───────────────────────────────────────────────────────── */
.fsd-tabs {
    display: flex;
    border-bottom: 1px solid var(--nr-border);
    flex-shrink: 0;
}
.fsd-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 0.65rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nr-text-mute);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.fsd-tab.is-active {
    color: var(--nr-text);
    border-bottom-color: var(--nr-yellow);
    font-weight: 700;
}
.fsd-tab:hover:not(.is-active) { color: var(--nr-text); }

/* ── Generics panel ───────────────────────────────────────────────────────── */
.generics-body { padding: 1rem 1rem 1.5rem; }

#generics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
@media (max-width: 340px) {
    #generics-grid { grid-template-columns: repeat(2, 1fr); }
}

.generics-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: var(--nr-surface);
    border: 1.5px solid var(--nr-border);
    border-radius: 14px;
    padding: 0.75rem 0.4rem;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s,
                max-height 0.2s ease, min-height 0.2s ease,
                padding 0.2s ease, margin 0.2s ease;
    min-height: 76px;
    max-height: 200px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.generics-tile:hover,
.generics-tile:focus-visible {
    border-color: var(--nr-yellow);
    outline: none;
}
.generics-tile:active { transform: scale(0.95); }

.generics-tile-emoji { font-size: 1.6rem; line-height: 1; }
.generics-tile-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--nr-text);
    text-align: center;
    line-height: 1.2;
}

/* Collapse other tiles when one is chosen */
.generics-tile--fading {
    opacity: 0;
    transform: scale(0.85);
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    pointer-events: none;
    border-color: transparent;
}

/* Drilldown section */
#generics-drilldown { padding-top: 0.25rem; }

.generics-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--nr-surface);
    border: 1.5px solid var(--nr-yellow);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nr-text);
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}
.generics-breadcrumb:hover { background: var(--nr-bg); }
#generics-breadcrumb-emoji { font-size: 1.2rem; }
.generics-breadcrumb-back {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--nr-text-mute);
}

.generics-status {
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    text-align: center;
    padding: 0.5rem 0;
    min-height: 1.5rem;
}

.generics-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.generics-item-btn {
    width: 100%;
    text-align: left;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--nr-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.generics-item-btn:hover,
.generics-item-btn:focus-visible {
    background: var(--nr-bg);
    border-color: var(--nr-yellow);
    outline: none;
}
.generics-item-btn:active { opacity: 0.75; }

/* Slide-in animation for drilldown */
@keyframes generics-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#generics-drilldown:not([hidden]) {
    animation: generics-slide-in 0.2s ease both;
}

/* ── Scan panel ───────────────────────────────────────────────────────────── */
.scan-body { display: flex; flex-direction: column; align-items: center; padding: 1rem 1.25rem; }
.scan-hint { font-size: 0.9rem; color: var(--nr-text-mute); text-align: center; margin: 0 0 1rem; }

.scan-viewfinder {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    margin-bottom: 1rem;
}
.scan-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scan-frame-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scan-frame-box {
    width: 65%;
    aspect-ratio: 3 / 2;
    border: 2px solid var(--nr-yellow);
    border-radius: 8px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.45);
}

.scan-fallback { text-align: center; margin-top: 0.5rem; }
.scan-file-label {
    display: inline-block;
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 12px;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
#scan-file-input { display: none; }
.scan-status {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    text-align: center;
    min-height: 1.4em;
}
.scan-manual { margin-top: 1rem; border-top: 1px solid var(--nr-border); padding-top: 1rem; }
.scan-manual-row { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.scan-manual-row .food-search-input { flex: 1; font-size: 1.05rem; letter-spacing: 0.08em; }
.scan-manual-row .btn-sm { white-space: nowrap; }

/* ── AI Photo panel ─────────────────────────────────────────────────────────── */
.photo-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    gap: 1rem;
    min-height: 200px;
}

/* "Take / choose photo" — styled like a big camera button */
.photo-capture-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--nr-yellow, #f5c518);
    color: #000;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.15s;
    text-align: center;
}
.photo-capture-label:hover { opacity: 0.88; }

/* "Pick row" — Take photo + Choose from library side by side */
.photo-pick-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.photo-capture-label--alt {
    background: var(--nr-bg-subtle, #2a2a2a);
    color: var(--nr-text, #fff);
    border: 1px solid var(--nr-border, #444);
}

/* Hide the raw file input but keep it accessible */
#photo-file-input { display: none; }

/* Thumbnail preview */
.photo-thumb-wrap {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--nr-bg-subtle, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-thumb {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.photo-preview-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: flex-end;
}
.photo-retake-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Spinner (CSS-only) */
.photo-spinner-wrap {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0.5rem;
}
.photo-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid var(--nr-border, #ddd);
    border-top-color: var(--nr-yellow, #f5c518);
    border-radius: 50%;
    animation: photo-spin 0.75s linear infinite;
}
@keyframes photo-spin { to { transform: rotate(360deg); } }

/* Edit-hint text above the review list */
.photo-edit-hint {
    font-size: 0.82rem;
    color: var(--nr-muted, #888);
    margin: 0 0 0.5rem;
    text-align: center;
}

/* Review items list */
.photo-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.photo-item-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    background: var(--nr-card-bg, #fff);
    border: 1px solid var(--nr-border, #e5e5e5);
    border-radius: 8px;
}
.photo-item-name {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nr-text, #1a1a1a);
    padding: 0.2rem 0;
}
.photo-item-name:focus { outline: 1px solid var(--nr-yellow, #f5c518); border-radius: 4px; }
.photo-item-weight {
    width: 52px;
    border: 1px solid var(--nr-border, #ddd);
    border-radius: 6px;
    padding: 0.2rem 0.35rem;
    font-size: 0.85rem;
    text-align: right;
    background: var(--nr-bg-subtle, #f8f8f8);
    color: var(--nr-text, #1a1a1a);
}
.photo-item-g {
    font-size: 0.8rem;
    color: var(--nr-muted, #888);
}
.photo-item-kcal {
    font-size: 0.82rem;
    color: var(--nr-muted, #888);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}
.photo-item-remove {
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.25rem;
    color: var(--nr-muted, #aaa);
    flex-shrink: 0;
}
.photo-item-remove:hover { color: var(--nr-danger, #e33); }

/* Footer actions (re-analyse + add-all) */
.photo-results-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Error state */
.photo-err-msg {
    text-align: center;
    color: var(--nr-danger, #e33);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}