/* Scran's own layer, loaded after the Bonx theme so it wins.
   Kept deliberately small — the theme does the heavy lifting. */

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* The theme's page background is dark, so the default body margin left a pale
   strip at the bottom of short pages. */
body {
    margin-bottom: 0;
}

/* No top padding: the header is transparent and every page opens with the theme's
   breadcrumb banner, which sits underneath it by design. */
main {
    min-height: 60vh;
}

/* Wordmark stands in for the theme's Bonx logo image. */
.scran_wordmark {
    font-family: "Metal Mania", "Exo", cursive;
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #fff;
    text-decoration: none;
}

.scran_wordmark:hover {
    color: #ff004f;
}

/* ---- Rank chip in the header ------------------------------------------------
   Rank name and level are text; the bar is a secondary cue, never the only one. */

.rank_chip_wrap {
    gap: 12px;
}

.rank-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    text-decoration: none;
}

.rank-chip-text {
    font-family: "Exo", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}

.rank-chip-bar {
    display: block;
    width: 100%;
    min-width: 96px;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.rank-chip-fill {
    display: block;
    height: 100%;
    background: #ff004f;
}

.rank-chip-level {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    background: #ff004f;
    color: #fff;
    font-family: "Exo", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    font-style: italic;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

.login_link {
    margin-right: 14px;
    font-family: "Exo", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    text-decoration: none;
}

.login_link:hover {
    color: #ff004f;
}

.logout_form {
    margin: 0;
}

.logout_btn {
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.15rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.65);
}

.logout_btn:hover {
    color: #ff004f;
}

/* ---- Form validation, styled for the dark theme ---------------------------
   The theme has no markup for validation messages, and the stock Bootstrap red on
   a dark purple background is close to unreadable. Errors are prefixed with a
   warning glyph so they don't rely on colour to register as errors. */

.validation_summary ul {
    margin: 0 0 24px;
    padding: 16px 20px;
    list-style: none;
    border-left: 3px solid #ff004f;
    background: rgba(255, 0, 79, 0.12);
}

.validation_summary li,
.field_error {
    font-family: "Exo", sans-serif;
    font-size: 0.85rem;
    color: #ff8fb0;
}

.field_error:not(:empty) {
    display: block;
    margin: -14px 0 18px;
}

.field_error:not(:empty)::before,
.validation_summary li::before {
    content: "\26A0  ";
}

.remember_me label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Exo", sans-serif;
    color: #fff;
    cursor: pointer;
}

/* ---- Home page feature cards ---------------------------------------------- */

.scran_feature {
    height: 100%;
    padding: 34px 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.scran_feature h3 {
    margin-bottom: 14px;
    font-family: "Exo", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.scran_feature p {
    margin: 0;
}

/* ---- Footer badge tiles ----------------------------------------------------
   Stand in for the template's team-logo images. Tier is carried by the glyph and
   the hover title, so it reads without depending on colour. */

.footer_badge_tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 62px;
    min-height: 62px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.5rem;
    line-height: 1;
    cursor: help;
}

.footer_badge_tile.tier-bronze { color: #d08b4f; }
.footer_badge_tile.tier-silver { color: #c9ced4; }
.footer_badge_tile.tier-gold { color: #ffc93c; }
.footer_badge_tile.tier-platinum { color: #7fdbe8; }

.footer_logo .scran_wordmark {
    font-size: 2.4rem;
}

/* ---- Badge icons -----------------------------------------------------------
   Icons resolve by filename from wwwroot/img/badges; the tier glyph is the
   fallback when a code has no image. */

.badge-glyph img,
.footer_badge_tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* With a real icon the circular chip behind it is just noise. */
.badge-glyph:has(img) {
    background: none;
    border-radius: 0;
}

.footer_badge_tile:has(img) {
    padding: 3px;
}

/* Locked badges are already dashed and faded; desaturating the icon reinforces
   it without relying on colour to carry the state. */
.badge-card.locked .badge-glyph img {
    filter: grayscale(1);
    opacity: 0.65;
}

/* The theme leaves these images at their intrinsic size. The replacements are
   1024x1024, so cap them and keep the aspect ratio rather than letting the
   width/height attributes stretch them. */
.gaming_world_thumb img {
    width: 225px;
    height: 225px;
    max-width: 100%;
    object-fit: contain;
}

/* Equal-height cards. The theme sizes each card to its own content, so the one
   with the shortest description ends up visibly stubbier than its neighbours.
   Stretching the columns and letting the text block absorb the slack keeps all
   three the same height whatever the copy does. */
.gaming_world_inner .row > [class*="col-"] {
    display: flex;
}

.single_gaming_world {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.single_gaming_world .gaming_world_text {
    flex: 1 1 auto;
}

/* ==== My Account =========================================================== */

.scran-xp {
    margin: 26px 0 6px;
}

.scran-xp-bar {
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.scran-xp-fill {
    height: 100%;
    background: #ff004f;
    transition: width .4s ease;
}

.scran-xp-caption {
    margin: 10px 0 0;
    font-size: .85rem;
}

.scran-dev-panel {
    margin-top: 26px;
    padding: 16px 18px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    font-size: .85rem;
}

.scran-dev-panel form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.scran-dev-panel button {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: none;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.scran-dev-panel button:hover {
    border-color: #ff004f;
    color: #ff004f;
}

.scran-category {
    margin: 44px 0 18px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ff004f;
}

.scran-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

/* State is carried by border style and opacity as well as colour, so locked vs
   unlocked reads without depending on hue. */
.scran-badge {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
}

.scran-badge--locked {
    border-style: dashed;
    opacity: .68;
}

.scran-badge--unlocked {
    border-width: 2px;
    border-color: #ff004f;
    background: rgba(255, 0, 79, .07);
}

.scran-badge-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .6);
}

.scran-badge-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.scran-badge--locked .scran-badge-icon img {
    filter: grayscale(1);
    opacity: .7;
}

.scran-badge-body {
    min-width: 0;
}

.scran-badge-body h4 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 1rem;
}

.scran-tier {
    padding: 2px 7px;
    border: 1px solid currentColor;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .8;
}

.scran-badge-body p {
    margin: 0;
    font-size: .85rem;
}

.scran-badge-status {
    margin-top: 8px !important;
    font-size: .78rem !important;
    opacity: .75;
}

.scran-mini-bar {
    height: 6px;
    margin-top: 10px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.scran-mini-fill {
    height: 100%;
    background: #ff004f;
}

.scran-xp-feed {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.scran-xp-feed li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.scran-xp-amount {
    flex: 0 0 auto;
    min-width: 3.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ff004f;
}

.scran-xp-desc {
    flex: 1 1 auto;
}

.scran-xp-when {
    flex: 0 0 auto;
    font-size: .8rem;
    opacity: .6;
}

@media (max-width: 575.98px) {
    .scran-badge-grid {
        grid-template-columns: 1fr;
    }
}

/* ==== Diary ================================================================ */

.scran-notice {
    padding: 12px 16px;
    margin-bottom: 24px;
    border-left: 3px solid #ff004f;
    background: rgba(255, 0, 79, .1);
    font-size: .9rem;
}

.scran-day-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}

.scran-day-nav h2 {
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
}

.scran-day-nav a {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.scran-totals {
    padding: 24px;
    margin-bottom: 36px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .03);
}

.scran-total-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.scran-total-value {
    font-size: 2.6rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    color: #fff;
}

.scran-total-label {
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
}

.scran-goal {
    margin-top: 16px;
}

.scran-goal-bar {
    height: 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.scran-goal-fill {
    height: 100%;
    background: #ff004f;
}

/* Over-target is stated in words next to the bar; the stripes are a second
   non-colour cue rather than the only one. */
.scran-goal-bar.is-over .scran-goal-fill {
    background: repeating-linear-gradient(45deg, #ff004f, #ff004f 6px, #8d0029 6px, #8d0029 12px);
}

.scran-goal p {
    margin: 8px 0 0;
    font-size: .88rem;
}

.scran-macros {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 18px;
    font-size: .88rem;
}

.scran-meal {
    margin-bottom: 26px;
}

.scran-meal h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.scran-meal h3 span {
    font-size: .85rem;
    opacity: .7;
}

.scran-meal-empty {
    margin: 0;
    font-size: .85rem;
    opacity: .5;
}

.scran-entries {
    padding: 0;
    margin: 0;
    list-style: none;
}

.scran-entries li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.scran-entry-name { flex: 1 1 auto; min-width: 0; }
.scran-entry-portion { flex: 0 0 auto; font-size: .82rem; opacity: .6; }
.scran-entry-kcal { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.scran-entries form { margin: 0; }

.scran-entries button {
    padding: 0 8px;
    border: 0;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    color: rgba(255, 255, 255, .45);
}

.scran-entries button:hover { color: #ff004f; }

.scran-add {
    padding: 24px;
    margin-top: 40px;
    border: 1px solid rgba(255, 255, 255, .14);
}

.scran-add h3 {
    margin: 0 0 18px;
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.scran-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.scran-search input[type="search"] {
    flex: 1 1 260px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-results {
    padding: 0;
    margin: 22px 0 0;
    list-style: none;
}

.scran-add-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.scran-add-name {
    flex: 1 1 220px;
    min-width: 0;
}

.scran-add-name em {
    display: block;
    font-size: .78rem;
    font-style: normal;
    opacity: .6;
}

.scran-add-row input[type="number"],
.scran-add-row select {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-add-row input[type="number"] { width: 92px; }

@media (max-width: 575.98px) {
    .scran-day-nav { flex-direction: column; }
    .scran-day-nav h2 { order: -1; }
}

/* ---- nice-select, themed for dark -----------------------------------------
   main.js runs niceSelect() over every <select> on the page, which hides the
   native control and renders its own widget. The plugin ships light-themed
   (white box, dark text), so on Scran's background it read as an empty white
   box. Styling the widget rather than fighting the plugin. */

.nice-select {
    float: none;
    display: inline-block;
    height: 42px;
    line-height: 40px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    background-color: rgba(0, 0, 0, .35);
    color: #fff;
    font-family: "Exo", sans-serif;
}

.nice-select:hover,
.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: #ff004f;
}

.nice-select:after {
    border-bottom-color: #fff;
    border-right-color: #fff;
}

.nice-select .list {
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    background-color: #1b1430;
    color: #fff;
}

.nice-select .option {
    color: #fff;
    line-height: 38px;
    min-height: 38px;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: rgba(255, 0, 79, .25);
    color: #fff;
}

.nice-select .option.selected {
    font-weight: 700;
}

/* The widget floats by default, which broke the add-food row's alignment. */
.scran-add-row .nice-select {
    flex: 0 0 auto;
    min-width: 130px;
}

/* ==== Leaderboard ========================================================== */

.scran-leaderboard {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.scran-lb-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
}

/* Top three get a heavier border and a larger position number, so the podium
   reads structurally rather than by colour alone. */
.scran-lb-row.is-podium {
    border-color: #ff004f;
    background: rgba(255, 0, 79, .07);
}

.scran-lb-pos {
    flex: 0 0 auto;
    min-width: 34px;
    font-family: "Exo", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    font-style: italic;
    text-align: center;
    color: rgba(255, 255, 255, .55);
}

.scran-lb-row.is-podium .scran-lb-pos {
    font-size: 1.9rem;
    color: #ff004f;
}

.scran-lb-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
}

.scran-lb-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    letter-spacing: .03em;
    /* Ellipsis, never per-letter wrapping — a squeezed row must not turn names
       into a vertical column of characters. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scran-lb-name em {
    display: block;
    font-size: .74rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .6;
}

.scran-lb-level,
.scran-lb-xp,
.scran-lb-streak {
    flex: 0 0 auto;
    min-width: 68px;
    text-align: center;
}

.scran-lb-level strong,
.scran-lb-xp strong,
.scran-lb-streak strong {
    display: block;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.scran-lb-level small,
.scran-lb-xp small,
.scran-lb-streak small {
    font-size: .62rem;
    letter-spacing: .12em;
    opacity: .55;
}

@media (max-width: 575.98px) {
    .scran-lb-streak { display: none; }
    .scran-lb-row { gap: 12px; padding: 12px; }
}

/* ==== Setup ================================================================ */

.scran-setup-heading {
    margin: 44px 0 18px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ff004f;
}

.scran-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.scran-avatar-option {
    position: relative;
    cursor: pointer;
    text-align: center;
}

/* Visually hidden but still focusable, so the picker works by keyboard. */
.scran-avatar-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.scran-avatar-option img {
    display: block;
    border: 3px solid transparent;
    border-radius: 50%;
    opacity: .55;
    transition: opacity .15s ease, border-color .15s ease;
}

.scran-avatar-option span {
    display: block;
    margin-top: 4px;
    font-size: .7rem;
    opacity: 0;
}

/* Selection is shown by a border, full opacity and a visible number — three
   cues, none of which is colour on its own. */
.scran-avatar-option input:checked + img {
    border-color: #ff004f;
    opacity: 1;
}

.scran-avatar-option input:checked ~ span {
    opacity: .9;
    font-weight: 700;
}

.scran-avatar-option input:focus-visible + img {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.scran-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.scran-field label {
    display: block;
    margin-bottom: 8px;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.scran-field input[type="number"],
.scran-field select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-split {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scran-split input[type="number"] { width: 90px; }

.scran-split span {
    font-size: .85rem;
    opacity: .7;
}

/* ==== Scanner ============================================================== */

/* The scan button is hidden by default and only revealed on touch devices.
   `pointer: coarse` and `hover: none` together mean a finger, not a mouse — a
   better test than screen width, which a narrow desktop window would fail. */
.scran-scan-cta {
    display: none;
    margin-bottom: 22px;
}

@media (hover: none) and (pointer: coarse) {
    .scran-scan-cta {
        display: block;
    }
}

/* Belt and braces: scanner.js removes it outright if there's no camera API. */
.scran-scan-cta.is-unsupported {
    display: none !important;
}

.scran-scanner-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    background: #000;
}

#scanner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A guide box, so people know where to hold the packet. */
.scran-scanner-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74%;
    height: 32%;
    transform: translate(-50%, -50%);
    border: 2px solid #ff004f;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.scran-scanner-status {
    margin: 20px 0;
    text-align: center;
    font-size: .92rem;
}

.scran-scanner-status.is-error {
    padding: 12px 16px;
    border-left: 3px solid #ff004f;
    background: rgba(255, 0, 79, .12);
    text-align: left;
}

/* ==== Profile head (My Account and public profiles) ======================== */

.scran-profile-head {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    flex-wrap: wrap;
}

.scran-profile-avatar {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid #ff004f;
}

.scran-profile-id {
    flex: 1 1 340px;
    min-width: 0;
}

.scran-profile-id h2 {
    margin: 0 0 6px;
    overflow-wrap: anywhere;
}

.scran-profile-rank {
    margin: 0 0 18px;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .75;
}

.scran-profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 20px 0 0;
    font-size: .85rem;
}

.scran-pending {
    color: #ff004f;
    font-weight: 700;
}

/* ==== Showcase strip ======================================================= */

.scran-showcase-strip {
    margin-top: 26px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .03);
}

.scran-showcase-strip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.scran-showcase-strip-head h3 {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ff004f;
}

.scran-showcase-empty {
    margin: 0;
    font-size: .85rem;
    opacity: .6;
}

.scran-showcase-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.scran-showcase-row li {
    width: 84px;
    text-align: center;
}

.scran-showcase-row img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.scran-showcase-glyph {
    display: block;
    font-size: 1.9rem;
    line-height: 64px;
}

.scran-showcase-caption {
    display: block;
    margin-top: 5px;
    font-size: .66rem;
    line-height: 1.25;
    letter-spacing: .04em;
    opacity: .75;
    overflow-wrap: anywhere;
}

.scran-showcase-picker {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .14);
}

.scran-showcase-picker summary {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.scran-picker-hint {
    margin: 16px 0;
    font-size: .84rem;
    opacity: .7;
}

.scran-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.scran-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    cursor: pointer;
    font-size: .78rem;
}

.scran-picker-item img { width: 40px; height: 40px; object-fit: contain; }

.scran-picker-item:has(input:checked) {
    border-color: #ff004f;
    background: rgba(255, 0, 79, .1);
}

/* ==== People lists ========================================================= */

.scran-user-list { margin-bottom: 34px; }

.scran-user-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
}

.scran-user-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
}

.scran-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    text-decoration: none;
}

.scran-user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.scran-user-main img,
.scran-user-card img { border-radius: 50%; flex: 0 0 auto; }

.scran-user-name {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.scran-user-name em {
    display: block;
    font-size: .72rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
}

.scran-user-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.scran-user-actions form { margin: 0; }

.scran-user-xp {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    opacity: .7;
}

.scran-mini-btn {
    padding: 7px 14px;
    border: 1px solid #ff004f;
    background: none;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-mini-btn:hover { background: rgba(255, 0, 79, .2); }

.scran-link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .6);
    font-size: .78rem;
    text-decoration: underline;
}

.scran-link-btn:hover { color: #ff004f; }

.scran-friend-action {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.scran-friend-action form {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.scran-friend-badge {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-friend-badge.is-pending { opacity: .65; }

/* ==== Leaderboard rows are links ========================================== */

.scran-lb-row { position: relative; }

/* Covers the row so the whole thing is clickable, while the text above it stays
   selectable and the markup keeps a real <a> for keyboard and middle-click. */
.scran-lb-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}

.scran-lb-row:hover { border-color: rgba(255, 255, 255, .35); }
.scran-lb-row:focus-within { outline: 2px solid #ff004f; outline-offset: 2px; }

.scran-category span {
    margin-left: 10px;
    font-weight: 400;
    opacity: .55;
}

/* ==== Fix: the meal dropdown opening behind the Add button ================= */

/* nice-select renders its list as an absolutely positioned sibling. Without a
   stacking context of its own it fell behind the Add button and the rows below,
   which on a phone made the meal list unusable. */
.scran-add-row { position: relative; }

.scran-add-row .nice-select { position: relative; z-index: 2; }
.scran-add-row .nice-select.open { z-index: 40; }
.nice-select .list { z-index: 41; }

/* Raise the whole row while a dropdown inside it is open, so the list clears
   the rows beneath it too. */
.scran-add-row:has(.nice-select.open) { z-index: 30; }

@media (max-width: 575.98px) {
    /* Stack the controls so the button can't sit on top of the dropdown at all. */
    .scran-add-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .scran-add-name { grid-column: 1 / -1; }
    .scran-add-row .nice-select { width: 100%; }
    .scran-add-row .btn { grid-column: 1 / -1; }

    .scran-profile-head { gap: 22px; }
    .scran-profile-avatar { width: 96px; height: 96px; }
    .scran-user-row { flex-wrap: wrap; }
}

/* ==== Username dropdown in the header ====================================== */

/* The chip is now a button, so it needs the anchor styling stripped back off. */
.rank-chip {
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.rank-chip:hover .rank-chip-text,
.rank-chip[aria-expanded="true"] .rank-chip-text {
    color: #ff004f;
}

.rank-chip-text i {
    margin-left: 5px;
    font-size: .7em;
    transition: transform .15s ease;
    display: inline-block;
}

.rank-chip[aria-expanded="true"] .rank-chip-text i {
    transform: rotate(180deg);
}

/* Bootstrap's dropdown ships light; this is the dark version. */
.scran-usermenu {
    min-width: 210px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    background: #16102a;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    /* Above the sticky header and anything the theme raises. */
    z-index: 1100;
}

.scran-usermenu-head {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.scran-usermenu-name {
    display: block;
    font-family: "Exo", sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    overflow-wrap: anywhere;
}

.scran-usermenu-rank {
    display: block;
    margin-top: 3px;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.scran-usermenu .dropdown-item {
    padding: 12px 18px;
    font-family: "Exo", sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    background: none;
}

.scran-usermenu .dropdown-item + .dropdown-item {
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.scran-usermenu .dropdown-item:hover,
.scran-usermenu .dropdown-item:focus {
    background: rgba(255, 0, 79, .18);
    color: #fff;
}

/* The header clips its children on small screens, which would cut the menu off. */
.header_right_sidebar,
.main_header {
    overflow: visible;
}

/* ==== Friend request notification ========================================== */

.rank-chip-text {
    position: relative;
}

/* The number is the signal, not the colour — a plain coloured dot would be
   invisible to anyone who can't pick the hue out against the header. */
.scran-notif-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: #ff004f;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    animation: scran-notif-pop .35s ease-out;
}

@keyframes scran-notif-pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .scran-notif-dot { animation: none; }
}

.scran-usermenu-alert {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #fff !important;
}

.scran-notif-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ff004f;
    font-size: .68rem;
    font-weight: 800;
}

/* Bootstrap ships this, but the theme's stylesheet loads after it in places. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==== Identity "Manage" (Settings) pages ====================================
   These come from the Identity UI package, so the markup is Bootstrap's and
   can't be edited without scaffolding out every page. Restyling it here is far
   less code and survives package updates. Scoped to the settings body so the
   rest of the site's Bootstrap usage is untouched. */

.scran-settings {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 46px;
    align-items: start;
}

.scran-settings-links {
    padding: 0;
    margin: 0 0 26px;
    list-style: none;
}

.scran-settings-links li + li { margin-top: 2px; }

.scran-settings-links a {
    display: block;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .85);
    font-family: "Exo", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.scran-settings-links a:hover {
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

/* Active page marked by a left bar and a filled background, not colour alone. */
.scran-settings-links a.is-active {
    border-color: #ff004f;
    border-left-width: 4px;
    background: rgba(255, 0, 79, .14);
    color: #fff;
}

.scran-settings-links--secondary a {
    border-style: dashed;
    font-size: .74rem;
    opacity: .75;
}

.scran-settings-body h1,
.scran-settings-body h2,
.scran-settings-body h3,
.scran-settings-body h4 {
    font-size: 1.4rem;
    margin-bottom: 22px;
}

.scran-settings-body hr {
    border-color: rgba(255, 255, 255, .12);
    margin: 26px 0;
}

/* ---- Bootstrap form controls, darkened ---- */

.scran-settings-body .form-floating { margin-bottom: 18px; }

.scran-settings-body .form-control,
.scran-settings-body .form-select {
    padding: 1rem .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 0;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    box-shadow: none;
}

.scran-settings-body .form-control:focus,
.scran-settings-body .form-select:focus {
    border-color: #ff004f;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    box-shadow: none;
}

.scran-settings-body .form-control:disabled,
.scran-settings-body .form-control[readonly] {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .6);
}

.scran-settings-body .form-floating > label {
    color: rgba(255, 255, 255, .55);
    padding: 1rem .9rem;
}

/* Bootstrap paints a white pill behind the floated label; on a dark field that
   leaves a bright block sitting over the border. */
.scran-settings-body .form-floating > .form-control:focus ~ label::after,
.scran-settings-body .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background: transparent !important;
}

.scran-settings-body .form-floating > .form-control:focus ~ label,
.scran-settings-body .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: rgba(255, 255, 255, .75);
}

.scran-settings-body .form-check-input {
    background-color: rgba(0, 0, 0, .35);
    border-color: rgba(255, 255, 255, .35);
}

.scran-settings-body .form-check-input:checked {
    background-color: #ff004f;
    border-color: #ff004f;
}

/* ---- Buttons ---- */

.scran-settings-body .btn-primary,
.scran-settings-body .btn-danger,
.scran-settings-body .btn-secondary {
    padding: 13px 30px;
    border-radius: 0;
    border: 1px solid #ff004f;
    background: transparent;
    color: #fff;
    font-family: "Exo", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: none;
}

.scran-settings-body .btn-primary:hover,
.scran-settings-body .btn-danger:hover,
.scran-settings-body .btn-secondary:hover {
    background: rgba(255, 0, 79, .22);
    color: #fff;
    border-color: #ff004f;
}

.scran-settings-body .btn-danger {
    border-color: #ff8fb0;
}

/* ---- Status messages and lists ---- */

.scran-settings-body .alert,
.scran-settings-body .list-group-item {
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
    color: #fff;
}

.scran-settings-body .alert-success {
    border-left: 3px solid #4ade80;
}

.scran-settings-body .alert-danger {
    border-left: 3px solid #ff004f;
}

.scran-settings-body .text-danger { color: #ff8fb0 !important; }
.scran-settings-body a { color: #ff7fa5; }

@media (max-width: 991.98px) {
    .scran-settings {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .scran-settings-links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 6px;
        margin-bottom: 14px;
    }

    .scran-settings-links li + li { margin-top: 0; }
    .scran-settings-links a { text-align: center; padding: 11px 12px; }
}

/* ---- Settings: stacked labels instead of Bootstrap's floating ones ----------
   form-floating overlays an absolutely positioned label on the input and relies
   on a white pill to punch through the border. Against the theme's own label
   rules that collided — the "New email" caption rendered twice, on top of
   itself. Flipping to a plain label-above-input avoids the whole fight and is
   easier to read anyway. The input comes first in Bootstrap's markup, so the
   label is reordered rather than moved. */

.scran-settings-body .form-floating {
    display: flex;
    flex-direction: column;
}

.scran-settings-body .form-floating > label {
    order: -1;
    position: static;
    height: auto;
    padding: 0 0 8px;
    transform: none !important;
    border: 0;
    background: none !important;
    font-family: "Exo", sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    opacity: 1 !important;
    pointer-events: auto;
}

.scran-settings-body .form-floating > label::after {
    display: none !important;
}

.scran-settings-body .form-floating > .form-control {
    height: auto;
    padding: 12px 14px;
    line-height: 1.5;
}

/* ---- Settings: the theme's glowing btn-link is far too loud here -----------
   Identity's "Send verification" uses btn btn-link, which the theme renders as
   its big neon call-to-action. Inside settings it should be a quiet secondary
   action, matching the buttons around it. */

.scran-settings-body .btn-link {
    display: block;
    width: 100%;
    padding: 13px 30px;
    margin: 0 0 18px;
    border: 1px solid #ff004f;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .85);
    font-family: "Exo", sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}

.scran-settings-body .btn-link::before,
.scran-settings-body .btn-link::after {
    display: none !important;
}

.scran-settings-body .btn-link:hover {
    background: rgba(255, 0, 79, .22) !important;
    border-color: #ff004f;
    color: #fff;
}

/* Full-width primary actions read as the main thing to do on each page. */
.scran-settings-body .btn-primary,
.scran-settings-body .btn-danger {
    width: 100%;
    margin-top: 6px;
}

/* ==== Barcode scanner ======================================================
   The button is revealed by diary-scanner.js only on a touch device with a
   camera on a secure origin, so it starts hidden rather than being shown and
   then failing. */

.scran-fab {
    position: fixed;
    left: 20px;
    /* Clear of iOS Safari's bottom bar. */
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 68px;
    height: 68px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ff004f;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}

.scran-fab i { font-size: 1.5rem; line-height: 1; }

.scran-fab span {
    font-family: "Exo", sans-serif;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.scran-fab:active { transform: scale(.94); }

.scran-noscroll { overflow: hidden; }

/* ---- Camera overlay ---- */

.scran-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: #0b0716;
}

.scran-scan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px calc(16px + env(safe-area-inset-top, 0px));
}

.scran-scan-title {
    font-family: "Exo", sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.scran-scan-close,
.scran-modal-close {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    background: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
}

.scran-scan-stage {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: #000;
}

.scran-scan-stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scran-scanner-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78%;
    height: 26%;
    transform: translate(-50%, -50%);
    border: 2px solid #ff004f;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.scran-scan-status {
    margin: 0;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    font-size: .9rem;
    color: #fff;
}

.scran-scan-status.is-error { color: #ff8fb0; }

/* ---- Result popup ---- */

.scran-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .7);
}

.scran-modal-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 26px 22px calc(26px + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(255, 255, 255, .18);
    border-bottom: 0;
    background: #16102a;
}

.scran-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
}

.scran-modal-product {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding-right: 48px;
}

.scran-modal-product img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: rgba(255, 255, 255, .08);
}

.scran-modal-names h3 {
    margin: 0 0 4px;
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

.scran-modal-names p {
    margin: 0;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
}

.scran-modal-label {
    display: block;
    margin-bottom: 8px;
    font-family: "Exo", sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

#scan-qty {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.scran-modal-hint {
    margin: 8px 0 0;
    font-size: .76rem;
    opacity: .55;
}

.scran-modal-kcal {
    margin: 6px 0 22px;
    font-family: "Exo", sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    color: #ff004f;
}

/* Meal as chips rather than a dropdown: one tap instead of three, and it
   sidesteps the nice-select widget entirely. */
.scran-meal-choice {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.scran-meal-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.scran-meal-option span {
    display: block;
    padding: 14px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    text-align: center;
    font-family: "Exo", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Selected state uses a thicker border and a fill as well as colour. */
.scran-meal-option input:checked + span {
    border-color: #ff004f;
    border-width: 2px;
    background: rgba(255, 0, 79, .2);
    color: #fff;
}

.scran-meal-option input:focus-visible + span {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.scran-modal-add {
    display: block;
    width: 100%;
    padding: 16px;
    border: 0;
    background: #ff004f;
    color: #fff;
    font-family: "Exo", sans-serif;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.scran-modal-add:active { transform: scale(.99); }

@media (min-width: 576px) {
    .scran-modal { align-items: center; }
    .scran-modal-card { border-bottom: 1px solid rgba(255, 255, 255, .18); }
}

.scran-modal-heading {
    margin: 0 0 10px;
    padding-right: 48px;
    font-size: 1.2rem;
}

.scran-modal-card input[type="text"],
.scran-modal-card input[type="number"] {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 4px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 1.05rem;
}

.scran-meal-choice--two { grid-template-columns: repeat(2, 1fr); }

.scran-modal-secondary {
    display: block;
    width: 100%;
    padding: 13px;
    margin-top: 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: none;
    color: rgba(255, 255, 255, .8);
    font-family: "Exo", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ==== Mobile chrome fixes ================================================== */

/* The FAB restyled to match the theme's neon buttons: purple gradient with the
   gold outline the template uses on its calls-to-action. Same selector later in
   the file, so these override the earlier flat-pink rules. */
.scran-fab {
    background: linear-gradient(150deg, #b154f0 0%, #7a1fd0 55%, #5b0aa8 100%);
    border: 2px solid #f3b944;
    box-shadow:
        0 0 0 3px rgba(122, 31, 208, .35),
        0 0 18px rgba(177, 84, 240, .55),
        0 10px 26px rgba(0, 0, 0, .55);
}

.scran-fab:active {
    transform: scale(.94);
    box-shadow: 0 0 10px rgba(177, 84, 240, .5), 0 6px 16px rgba(0, 0, 0, .5);
}

@media (max-width: 991.98px) {

    /* The theme's scroll handler adds .sticky at every width, and its own mobile
       "off switch" is position:inherit — which drops the absolutely-positioned
       header into the flow and shoves the whole page down by its height. Keep it
       exactly where it normally sits instead. */
    .header_section.header_transparent.sticky-header.sticky {
        position: absolute !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: none !important;
    }

    .sticky-header.sticky .main_header {
        padding: inherit;
    }

    /* The hamburger floats top-right so the menu is reachable mid-scroll — the
       header itself (logo etc.) scrolls away as normal. */
    .canvas_open {
        position: fixed;
        top: calc(14px + env(safe-area-inset-top, 0px));
        right: 14px;
        z-index: 1090;
    }

    .canvas_open button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 50%;
        background: rgba(22, 16, 42, .92);
        color: #fff;
        font-size: 1.3rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    }

    /* Keep the header row from reserving space for the button that just left it. */
    .header_right_sidebar {
        padding-right: 0;
    }

    /* The auth pages' artwork column is wasted space on a phone — the form is
       the whole point of the page. */
    .scran-auth-art {
        display: none;
    }
}

/* ---- Product photos in the diary entries ---- */

.scran-entry-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: rgba(255, 255, 255, .07);
    border-radius: 6px;
}

/* Invisible spacer, so rows without a photo keep their names aligned. */
.scran-entry-thumb--empty {
    display: inline-block;
    background: none;
}

/* ==== Weigh-in card on the diary =========================================== */

.scran-weigh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 36px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .03);
}

.scran-weigh h3 {
    margin: 0 0 4px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ff004f;
}

.scran-weigh-info p { margin: 0; font-size: .9rem; }

.scran-weigh-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.scran-weigh-form input[type="number"] {
    width: 74px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-weigh-form span { font-size: .8rem; opacity: .7; }

.scran-weigh-form button {
    padding: 11px 18px;
    border: 1px solid #ff004f;
    background: none;
    color: #fff;
    font-family: "Exo", sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-weigh-form button:hover { background: rgba(255, 0, 79, .2); }

/* ==== Invite card ========================================================== */

.scran-invite-card {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 18px;
    border: 1px dashed rgba(255, 255, 255, .3);
}

.scran-invite-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .65;
}

.scran-invite-code {
    font-family: "Exo", monospace;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .22em;
    color: #ffc93c;
    user-select: all;
}

.scran-invite-hint {
    flex-basis: 100%;
    font-size: .76rem;
    opacity: .6;
}

/* ==== Notifications ======================================================== */

.scran-toasts {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
}

.scran-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ff004f;
    border-left-width: 4px;
    background: #16102a;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
    animation: scran-toast-in .3s ease-out;
}

@keyframes scran-toast-in {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .scran-toast { animation: none; }
}

.scran-toast img { flex: 0 0 auto; object-fit: contain; }

.scran-toast-glyph {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    font-size: 1.1rem;
    color: #ffc93c;
}

.scran-toast-body { flex: 1 1 auto; min-width: 0; }

.scran-toast-body strong {
    display: block;
    font-family: "Exo", sans-serif;
    font-size: .85rem;
    letter-spacing: .04em;
}

.scran-toast-body span {
    display: block;
    font-size: .78rem;
    opacity: .75;
}

.scran-toast [data-notif-dismiss] {
    flex: 0 0 auto;
    padding: 0 6px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .5);
    font-size: 1.2rem;
    line-height: 1;
}

/* ---- Rank-up takeover ---- */

.scran-rankup {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 3, 14, .92);
}

.scran-rankup-card {
    max-width: 460px;
    width: 100%;
    padding: 44px 30px;
    border: 2px solid #ffc93c;
    background: linear-gradient(160deg, #2a1040, #16102a 70%);
    text-align: center;
    box-shadow: 0 0 60px rgba(177, 84, 240, .5);
}

.scran-rankup-kicker {
    display: block;
    margin-bottom: 12px;
    font-family: "Exo", sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: #ffc93c;
}

.scran-rankup-card h2 {
    margin: 0 0 14px;
    font-size: 2.2rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    color: #fff;
}

.scran-rankup-card p {
    margin: 0 0 28px;
    font-size: .92rem;
    opacity: .8;
}

/* Weigh day: the card asks for attention with a border and explicit words, not
   a colour shift alone. */
.scran-weigh.is-due {
    border-color: #ffc93c;
    border-width: 2px;
}

.scran-weigh-due {
    margin: 0 0 6px !important;
    color: #ffc93c;
}

/* ==== Banner height ========================================================
   The theme's breadcrumb banner is a fixed 502px — the full height of its
   background image — with the title floating in the middle. That left a big
   dead band between every page title and its content. Trimmed here, plus the
   140px margin the theme stacks underneath it. */

.breadcrumbs_bg {
    height: 340px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .breadcrumbs_bg { height: 320px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .breadcrumbs_bg { height: 290px; }
}

@media only screen and (max-width: 767px) {
    .breadcrumbs_bg { height: 250px; }
}

@media only screen and (max-width: 575px) {
    /* The theme pushes the title down 162px here to clear the header; with the
       shorter banner that would shove it out the bottom. */
    .breadcrumbs_text { padding-top: 100px; }
}

.breadcrumbs_aree.mb-140 {
    margin-bottom: 70px;
}

.scran-invite-link {
    display: block;
    margin-top: 4px;
    font-family: monospace;
    font-size: .74rem;
    letter-spacing: .02em;
    color: #ffc93c;
    user-select: all;
    overflow-wrap: anywhere;
}

/* Picker items locked out by the showcase limit: dimmed and dashed, so the
   state is structural rather than colour-only. */
.scran-picker-item.is-maxed {
    opacity: .4;
    border-style: dashed;
    cursor: not-allowed;
}

/* The theme's glowing button carries a large halo, so it needs more clearance
   than the utility margin gives it inside the picker. */
.scran-showcase-picker .form_input_btn {
    margin-top: 48px;
}

/* ==== Recipes ============================================================== */

.scran-recipe-new {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.scran-recipe-new input[type="text"],
.scran-recipe-new input:not([type]) {
    flex: 1 1 240px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-recipe-servings {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .85rem;
}

.scran-recipe-servings input {
    width: 80px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-recipe-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    font-size: 1.3rem;
}

/* ==== Recipe likes, steps and edit form ==================================== */

.scran-like-form { margin: 0 0 0 auto; }

.scran-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: none;
    color: #fff;
    font-family: "Exo", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-like-btn span { font-size: 1.1rem; line-height: 1; }

/* Liked reads through the filled heart, the label and the border weight. */
.scran-like-btn.is-liked {
    border-color: #ff004f;
    border-width: 2px;
    background: rgba(255, 0, 79, .15);
}

.scran-like-count {
    margin-left: auto;
    font-size: .95rem;
    opacity: .75;
}

.scran-steps {
    margin: 0;
    padding-left: 26px;
}

.scran-steps li {
    padding: 6px 0;
    line-height: 1.55;
}

.scran-steps li::marker {
    color: #ff004f;
    font-weight: 700;
}

.scran-recipe-edit label { display: block; }

.scran-recipe-edit input[type="text"],
.scran-recipe-edit textarea {
    width: 100%;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-recipe-edit textarea { resize: vertical; line-height: 1.6; }
.scran-recipe-edit .scran-recipe-servings { margin-bottom: 18px; }

/* ==== Home: players and recipes side by side ============================== */

.scran-boards {
    display: grid;
    /* Two boards side by side; anything narrower and the leaderboard rows
       collapse into vertical letter soup. The season board goes full width
       underneath instead of forcing a third column. */
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.scran-board--wide { grid-column: 1 / -1; }

.scran-board--wide .scran-leaderboard {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

.scran-boards .scran-leaderboard { max-width: none; }

.scran-board-title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .scran-boards { grid-template-columns: 1fr; }
}

/* ==== Privacy policy ======================================================= */

.scran-policy h3 {
    margin: 34px 0 12px;
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ff004f;
}

.scran-policy p, .scran-policy li { line-height: 1.7; }
.scran-policy ul { padding-left: 22px; }
.scran-policy li { margin-bottom: 8px; }

.scran-policy-updated {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
}

/* ==== Recipe photos ======================================================== */

.scran-recipe-photo {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, .16);
}

.scran-recipe-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
}

.scran-photo-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.scran-photo-form input[type="file"] {
    flex: 1 1 240px;
    padding: 9px 12px;
    border: 1px dashed rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .25);
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
}

.scran-photo-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: none;
    color: #fff;
    font-family: "Exo", sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

/* ==== Diary: macro rings, water, quests, copy tools ======================= */

.scran-macro-rings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.scran-macro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
}

.scran-macro-label {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .65;
}

.scran-macro-value { font-size: .85rem; }
.scran-macro-value strong { font-size: 1rem; }

.scran-mini-bar {
    height: 5px;
    margin-top: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.scran-mini-fill {
    height: 100%;
    border-radius: 3px;
    background: #ff004f;
}

.scran-water {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.scran-water-label {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .65;
}

.scran-water form { display: inline-flex; }

.scran-water button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    transition: border-color .2s;
}

.scran-water button:hover { border-color: #ff004f; }

.scran-water-count { font-size: 1rem; font-weight: 700; }
.scran-water-count small { font-weight: 400; opacity: .6; }

.scran-quests {
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.scran-quests h3 {
    margin: 0 0 12px;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-quests ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scran-quests li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
}

/* Done state is the tick mark plus "earned" plus strike-through: three cues,
   none of them colour. */
.scran-quests li.is-done .scran-quest-title {
    text-decoration: line-through;
    opacity: .55;
}

.scran-quest-mark {
    width: 22px;
    text-align: center;
    font-size: 1rem;
}

.scran-quests li.is-done .scran-quest-mark { color: #ff004f; }

.scran-quest-title { flex: 1; }

.scran-quest-xp {
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .7;
}

.scran-copy-row {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 22px;
}

.scran-mini-btn {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: .8rem;
    letter-spacing: .04em;
    transition: border-color .2s;
}

.scran-mini-btn:hover { border-color: #ff004f; }

.scran-meal-tools {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
}

.scran-meal-tools form { display: inline-flex; }

.scran-link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: .78rem;
    opacity: .6;
    text-decoration: underline;
    transition: opacity .2s;
}

.scran-link-btn:hover { opacity: 1; color: #ff004f; }

/* ==== Diary: your usuals ================================================== */

.scran-usuals-label {
    margin: 0 0 8px;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .65;
}

.scran-usuals { margin-bottom: 22px; }

.scran-usuals .scran-add-name em {
    display: block;
    font-size: .72rem;
    font-style: normal;
    opacity: .55;
}

/* ==== Trends ============================================================== */

.scran-recap {
    margin-bottom: 40px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.scran-recap h3 {
    margin: 0 0 14px;
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-recap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.scran-recap li {
    display: flex;
    flex-direction: column;
}

.scran-recap li strong { font-size: 1.4rem; color: #ff004f; }
.scran-recap li span { font-size: .8rem; opacity: .7; }

.scran-trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.scran-trend-card {
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.scran-trend-card h3 {
    margin: 0 0 16px;
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-trend-empty { margin: 0; font-size: .88rem; opacity: .6; }

.scran-weight-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.scran-chart-line { stroke: #ff004f; stroke-width: 2.5; }
.scran-chart-dot { fill: #fff; stroke: #ff004f; stroke-width: 2; }
.scran-chart-target { stroke: rgba(255, 255, 255, .6); stroke-width: 1.5; }

.scran-chart-caption {
    margin: 12px 0 0;
    font-size: .78rem;
    opacity: .65;
    line-height: 1.6;
}

.scran-week-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 170px;
}

.scran-week-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.scran-week-value {
    font-size: .68rem;
    margin-bottom: 4px;
    white-space: nowrap;
}

.scran-week-fill {
    width: 100%;
    max-width: 44px;
    border-radius: 4px 4px 0 0;
    background: #ff004f;
}

/* Over-target weeks get stripes as well as the triangle marker in the value. */
.scran-week-bar.is-over .scran-week-fill {
    background: repeating-linear-gradient(45deg, #ff004f, #ff004f 5px, #8d0029 5px, #8d0029 10px);
}

.scran-week-bar.is-empty .scran-week-value { opacity: .4; }

.scran-week-label {
    margin-top: 6px;
    font-size: .66rem;
    opacity: .6;
    white-space: nowrap;
}

.scran-streak-card { max-width: 560px; }

.scran-streak-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.scran-cal-head {
    text-align: center;
    font-size: .7rem;
    letter-spacing: .08em;
    opacity: .55;
}

.scran-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    font-size: .78rem;
}

/* Logged = filled tile AND a tick after the number; today = thicker border. */
.scran-cal-day.is-logged {
    background: #ff004f;
    border-color: #ff004f;
    color: #fff;
    font-weight: 700;
}

.scran-cal-day.is-today { border-width: 2px; border-color: #fff; }
.scran-cal-day.is-future { opacity: .35; }

/* ==== Home: friend activity feed ========================================== */

.scran-feed { margin-top: 50px; }

.scran-feed-list {
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scran-feed-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.scran-feed-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
}

.scran-feed-icon--recipe {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.scran-feed-text { flex: 1; font-size: .9rem; }
.scran-feed-text a { color: #ff004f; font-weight: 700; }
.scran-feed-text a:hover { text-decoration: underline; }

.scran-feed-when {
    flex-shrink: 0;
    font-size: .74rem;
    opacity: .55;
    white-space: nowrap;
}

/* ==== Desktop nav: eight items now, so the template's 57px gaps overflow ===== */

.main_menu { padding: 0 16px; }
.main_menu nav > ul > li { margin-right: 30px; }
.main_menu nav > ul > li > a { white-space: nowrap; }

/* ==== Setup: the template button is a fixed 230px pill, and "Work out my
   target" plus its arrow overflows that, dropping the arrow underneath.
   Let the button grow and stretch the pill artwork with it. ============== */

.form_input_btn .btn.btn-link {
    width: auto;
    min-width: 230px;
    padding: 0 36px;
    white-space: nowrap;
    background-size: 100% 100%;
}

/* ==== Challenges ========================================================== */

.scran-challenge-heading {
    margin: 40px 0 16px;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-challenge-empty { font-size: .9rem; opacity: .65; }

.scran-challenge-invites {
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 2px solid #ff004f;
    border-radius: 10px;
    background: rgba(255, 0, 79, .07);
}

.scran-challenge-invites h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-challenge-invite {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.scran-challenge-invite-text { flex: 1 1 260px; font-size: .92rem; }
.scran-challenge-invite form { display: inline-flex; }

.scran-challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.scran-challenge-card {
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.scran-challenge-card.is-finished { opacity: .8; }

.scran-challenge-card h4 {
    margin: 0 0 6px;
    font-size: 1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.scran-challenge-meta {
    margin: 0 0 14px;
    font-size: .8rem;
    opacity: .7;
}

.scran-standings {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scran-standings li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    font-size: .9rem;
}

/* Your own row: heavier border AND a written "you" tag — not colour alone. */
.scran-standings li.is-you {
    border: 2px solid #ff004f;
    background: rgba(255, 0, 79, .08);
}

.scran-standings li em {
    font-style: normal;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid #ff004f;
    border-radius: 10px;
    color: #ff004f;
}

.scran-standing-pos {
    min-width: 22px;
    text-align: center;
    font-family: "Exo", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.scran-standings img { border-radius: 50%; flex-shrink: 0; }

.scran-standings a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
}

.scran-standings a:hover { color: #ff004f; }

.scran-standings strong { white-space: nowrap; font-size: .85rem; }

.scran-challenge-create {
    margin: 40px 0;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.scran-challenge-create h3 {
    margin: 0 0 16px;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-challenge-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 18px;
}

.scran-challenge-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scran-challenge-field label {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}

.scran-challenge-pick {
    margin: 0 0 10px;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .65;
}

.scran-challenge-friends {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.scran-challenge-friend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    cursor: pointer;
    font-size: .9rem;
    transition: border-color .2s;
}

.scran-challenge-friend img { border-radius: 50%; }

/* Ticked friends: the checkbox stays visible as the state marker, and the
   pill border thickens with it. */
.scran-challenge-friend:has(input:checked) {
    border: 2px solid #ff004f;
    background: rgba(255, 0, 79, .08);
}

.scran-challenge-friend input { accent-color: #ff004f; }

/* ==== Reminders settings ================================================== */

.scran-reminder-list {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: .92rem;
    line-height: 1.8;
}

.scran-reminder-note { font-size: .85rem; opacity: .7; }

#push-status {
    margin: 18px 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    font-weight: 700;
    font-size: .92rem;
}

.scran-reminder-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ==== Settings: manage email ============================================== */

.scran-email-label {
    display: block;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 6px;
}

.scran-email-value {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
}

.scran-email-state {
    margin: 0 0 14px;
    font-size: .85rem;
    opacity: .75;
}

/* Verified state carries the tick character; colour only reinforces it. */
.scran-email-state.is-verified {
    font-weight: 700;
    color: #7ee2a8;
    opacity: 1;
}

.scran-email-note {
    margin: 10px 0 18px;
    font-size: .82rem;
    opacity: .6;
}

/* ==== Nav highlight pill: size to the label ==============================
   The template centres a fixed 94x44 pill image behind every link, so it
   swallows short labels' neighbours (FAQ's pill slid under the username
   widget) and sits too fat on the 30px line. Stretch the artwork to the
   text instead. ========================================================== */

.main_menu nav > ul > li > a::before {
    width: calc(100% + 26px);
    height: 38px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* ==== Confirm modal (replaces window.confirm on data-confirm forms) ======= */

.scran-confirm {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 3, 14, .92);
}

.scran-confirm-card {
    max-width: 440px;
    width: 100%;
    padding: 30px 34px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-top: 3px solid #ff004f;
    border-radius: 12px;
    background: #161628;
    text-align: center;
}

.scran-confirm-kicker {
    display: block;
    margin-bottom: 10px;
    font-family: "Exo", sans-serif;
    font-size: .72rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .18em;
    color: #ff004f;
}

.scran-confirm-text {
    margin: 0 0 22px;
    font-size: .98rem;
    line-height: 1.6;
}

.scran-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* The destructive choice is the loud one; Cancel stays quiet. */
.scran-confirm-yes {
    padding: 8px 22px;
    border: 0;
    border-radius: 6px;
    background: #ff004f;
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    transition: opacity .2s;
}

.scran-confirm-yes:hover { opacity: .85; }

/* ==== Diary: inline entry editing ========================================= */

.scran-entry-edit { position: relative; }

.scran-entry-edit summary {
    list-style: none;
    cursor: pointer;
    padding: 2px 8px;
    font-size: .9rem;
    opacity: .55;
    transition: opacity .2s;
}

.scran-entry-edit summary::-webkit-details-marker { display: none; }
.scran-entry-edit summary:hover { opacity: 1; }

.scran-entry-edit[open] > form {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: #161628;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    white-space: nowrap;
}

.scran-entry-edit input[type="number"] {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

/* ==== Settings: danger zone =============================================== */

.scran-danger-title {
    margin: 0 0 10px;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ff8fb0;
}

/* ==== Admin panel ========================================================= */

.scran-admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 30px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.scran-admin-stats div { display: flex; flex-direction: column; }
.scran-admin-stats strong { font-size: 1.4rem; color: #ff004f; }
.scran-admin-stats span { font-size: .78rem; opacity: .65; }

.scran-admin-table-wrap {
    overflow-x: auto;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
}

.scran-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.scran-admin-table th,
.scran-admin-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    white-space: nowrap;
}

.scran-admin-table th {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .6;
    background: rgba(0, 0, 0, .3);
}

.scran-admin-table tr:last-child td { border-bottom: 0; }
.scran-admin-table a { color: #fff; font-weight: 700; }
.scran-admin-table a:hover { color: #ff004f; }
.scran-admin-email { opacity: .7; }

.scran-admin-role select {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-usermenu-admin { font-weight: 700; }

/* ==== Community challenge ================================================= */

.scran-community {
    padding: 26px 28px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-top: 3px solid #ff004f;
    border-radius: 12px;
    background: rgba(0, 0, 0, .3);
}

.scran-community-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.scran-community-kicker {
    margin: 0 0 4px;
    font-size: .7rem;
    letter-spacing: .16em;
    color: #ff004f;
    font-weight: 700;
}

.scran-community-head h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-style: italic;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.scran-community-desc { margin: 0; font-size: .9rem; opacity: .75; }

.scran-community-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    flex-shrink: 0;
}

.scran-community-clock strong { font-size: 1.6rem; color: #ff004f; line-height: 1; }
.scran-community-clock span { font-size: .7rem; letter-spacing: .08em; opacity: .7; }

.scran-community-bar {
    height: 16px;
    margin: 18px 0 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.scran-community-fill {
    height: 100%;
    border-radius: 8px;
    background: #ff004f;
    transition: width .6s ease;
}

/* Cleared: stripes plus the ✓ in the caption, so it reads without colour. */
.scran-community-bar.is-complete .scran-community-fill {
    background: repeating-linear-gradient(45deg, #ff004f, #ff004f 8px, #7ee2a8 8px, #7ee2a8 16px);
}

.scran-community-progress { margin: 0 0 20px; font-size: .92rem; }

.scran-community-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 26px;
}

.scran-community-subhead {
    margin: 0 0 10px;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .6;
}

.scran-community-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scran-community-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    font-size: .9rem;
}

/* Your own row: thicker border and "(you)" spelled out in the name. */
.scran-community-list li.is-you {
    border: 2px solid #ff004f;
    background: rgba(255, 0, 79, .08);
}

.scran-community-pos {
    min-width: 20px;
    font-family: "Exo", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.scran-community-list img { border-radius: 50%; flex-shrink: 0; }

.scran-community-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.scran-community-score { font-weight: 700; font-size: .85rem; }
.scran-community-empty, .scran-community-yours { font-size: .85rem; opacity: .7; }
.scran-community-yours { margin: 10px 0 0; }

.scran-community-rewards ul {
    padding: 0;
    margin: 0 0 12px;
    list-style: none;
    font-size: .85rem;
}

.scran-community-rewards li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.scran-community-rewards li span { opacity: .7; }
.scran-community-rewards li strong { color: #ff004f; }
.scran-community-note { margin: 0; font-size: .76rem; opacity: .6; line-height: 1.6; }

@media (max-width: 767.98px) {
    .scran-community { padding: 20px 18px; }
    .scran-community-body { grid-template-columns: 1fr; gap: 20px; }
}

/* ==== Diary: target suggestion, saved meals =============================== */

.scran-target-suggest {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0;
    padding: 16px 20px;
    border: 2px solid #ff004f;
    border-radius: 10px;
    background: rgba(255, 0, 79, .07);
}

.scran-target-suggest p { margin: 4px 0 0; font-size: .88rem; }
.scran-target-actions { display: flex; align-items: center; gap: 12px; }

.scran-saved-meals {
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.scran-saved-meals h3 {
    margin: 0 0 12px;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scran-saved-meals ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scran-saved-meals li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.scran-saved-name { flex: 1 1 180px; font-size: .92rem; font-weight: 700; }

.scran-saved-name em {
    display: block;
    font-size: .74rem;
    font-style: normal;
    font-weight: 400;
    opacity: .6;
}

.scran-save-meal { display: inline-block; }

.scran-save-meal summary {
    list-style: none;
    cursor: pointer;
    font-size: .78rem;
    opacity: .6;
}

.scran-save-meal summary::-webkit-details-marker { display: none; }
.scran-save-meal summary:hover { opacity: 1; color: #ff004f; }

.scran-save-meal[open] > form {
    position: absolute;
    z-index: 40;
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: #161628;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.scran-save-meal input[type="text"] {
    width: 210px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-meal-tools { position: relative; }

/* ==== Challenges: add players, rematch ==================================== */

.scran-add-players { margin-top: 12px; }

.scran-add-players summary {
    list-style: none;
    cursor: pointer;
    font-size: .8rem;
    color: #ff004f;
    font-weight: 700;
}

.scran-add-players summary::-webkit-details-marker { display: none; }
.scran-add-players form { margin-top: 12px; }
.scran-rematch { margin: 0 0 12px; }

/* ==== Avatars: locked states and the picker modal ========================= */

.scran-avatar-option.is-locked img { filter: grayscale(1); opacity: .45; }
.scran-avatar-option.is-locked { cursor: not-allowed; }

.scran-avatar-lock {
    display: block;
    font-size: .62rem;
    line-height: 1.3;
    opacity: .8;
}

.scran-avatar-change {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.scran-avatar-change-hint {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(13, 10, 28, .88);
    border: 1px solid #ff004f;
    font-size: .7rem;
    white-space: nowrap;
}

.scran-avatar-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 3, 14, .92);
}

.scran-avatar-modal-card {
    width: 100%;
    max-width: 620px;
    max-height: 86vh;
    overflow-y: auto;
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-top: 3px solid #ff004f;
    border-radius: 12px;
    background: #161628;
}

.scran-avatar-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.scran-avatar-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.scran-avatar-close {
    border: 0;
    background: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    opacity: .7;
}

.scran-avatar-close:hover { opacity: 1; }

.scran-avatar-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
}

.scran-avatar-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(0, 0, 0, .28);
    color: #fff;
    text-align: center;
}

.scran-avatar-pick:hover { border-color: rgba(255, 255, 255, .3); }
.scran-avatar-pick.is-current { border-color: #ff004f; background: rgba(255, 0, 79, .1); }

.scran-avatar-current-tag {
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ff004f;
    font-weight: 700;
}

.scran-avatar-pick.is-locked { cursor: not-allowed; }
.scran-avatar-pick.is-locked img { filter: grayscale(1); opacity: .4; }

/* ==== Mobile: user chip lives in the menu, and the menu goes dark ========= */

@media (max-width: 991.98px) {
    /* Too cramped beside the logo — the same information sits at the top of
       the offcanvas menu instead. */
    .rank_chip_wrap { display: none !important; }
}

.offcanvas {
    background: #16102a;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.offcanvas .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .8;
}

.offcanvas_main_menu li { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.offcanvas_main_menu a {
    color: #fff !important;
    font-family: "Exo", sans-serif;
    font-weight: 700;
}

.offcanvas_main_menu a:hover,
.offcanvas_main_menu .active > a { color: #ff004f !important; }

.scran-offcanvas-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 2px solid #ff004f;
}

.scran-offcanvas-avatar { border-radius: 50%; flex-shrink: 0; }
.scran-offcanvas-id { flex: 1; min-width: 0; }

.scran-offcanvas-name {
    display: block;
    font-family: "Exo", sans-serif;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.scran-offcanvas-rank { display: block; font-size: .74rem; opacity: .7; }

.scran-offcanvas-bar {
    display: block;
    height: 6px;
    margin: 6px 0 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.scran-offcanvas-fill { display: block; height: 100%; background: #ff004f; }
.scran-offcanvas-xp { display: block; font-size: .68rem; opacity: .55; }

.scran-offcanvas-logout button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    color: #fff;
}

.scran-offcanvas-logout button:hover { border-color: #ff004f; color: #ff004f; }

/* ==== Leaderboard rows on small phones ===================================
   Three stat columns plus an avatar can't fit 375px, and the overflow pushed
   the whole page sideways. Streak drops off first — it's the least useful of
   the three at a glance — and the rest tighten up. ======================== */

@media (max-width: 575.98px) {
    .scran-lb-row { gap: 10px; padding: 12px 14px; }
    .scran-lb-avatar { width: 40px; height: 40px; }
    .scran-lb-pos { min-width: 20px; font-size: 1.1rem; }
    .scran-lb-streak { display: none; }
    .scran-lb-name { font-size: .9rem; }
    .scran-lb-name em { font-size: .68rem; }
    .scran-lb-level, .scran-lb-xp { min-width: 44px; }
    .scran-lb-level strong, .scran-lb-xp strong { font-size: .95rem; }
    .scran-lb-level small, .scran-lb-xp small { font-size: .58rem; }
    .scran-recipe-thumb, .scran-recipe-icon { width: 38px; height: 38px; }
}