/* =====================================================================
   Duobot shared control panel.

   Liquid Glass belongs to the BACKGROUND ONLY: .db-root is the single
   translucent, blurred, refractive layer. Everything on top of it (cards,
   sections, buttons, chips, inputs) is opaque, the way Apple's material
   works: one glass pane, solid content above it.

   The popup and the in-page panel render from this exact same stylesheet
   with the exact same variant, so they are the same surface.
   Scoped under .db-root so nothing leaks into duolingo.com.
   ===================================================================== */

/*
   Duolingo's own "din-round" is served by the page, so the in-page dock
   picks it up for free. The extension popup has no page to borrow it from,
   which is why its text used to fall back to a plain system font and read
   as "the wrong font". Nunito is the closest open (SIL OFL) match to
   Duolingo's rounded DIN and it is bundled here, so wherever din-round is
   missing the panel still lands on the same rounded look, popup and dock
   alike. One variable file covers every weight the panel uses.
*/
@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/nunito-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                   U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                   U+2C60-2C7F, U+A720-A7FF;
}

.db-root {
    --db-text:   #f2f6f8;
    --db-muted:  #9fb0b9;

    /* opaque content surfaces */
    --db-surface:   #232f36;
    --db-surface-2: #2c3941;
    --db-input:     #141d22;
    --db-line:      rgba(255, 255, 255, 0.08);

    /* Duolingo's own switch colours */
    --db-switch-off: #37464f;
    --db-knob:       var(--db-surface);

    --db-green:  #58cc02;
    --db-blue:   #1cb0f6;
    --db-gold:   #ffc800;
    --db-red:    #ff4b4b;

    --db-radius: 22px;
    --db-chip-w: 116px;
    --db-thumb: 20px;

    box-sizing: border-box;
    width: 380px;
    max-width: 100%;
    color: var(--db-text);
    font-family: "din-round", "Nunito", ui-rounded, "SF Pro Rounded",
                 system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;

    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--db-radius);

    /* ---------------- the glass pane ----------------
       A dark tint at high opacity rather than a white wash: it keeps the
       panel solid and readable, and it resolves to the same colour whether
       there is a page behind it to blur or not. */
    background: rgba(26, 36, 43, 0.84);
    -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06);
    backdrop-filter: blur(32px) saturate(185%) brightness(1.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    /* stacked inset rims read as refraction at the edges: bright specular
       top, softer bottom bounce, lit side walls */
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.52),
        0 8px 20px rgba(0, 0, 0, 0.34),
        inset 0  1px 0.5px rgba(255, 255, 255, 0.5),
        inset 0 -1px 0.5px rgba(255, 255, 255, 0.14),
        inset  1px 0 0.5px rgba(255, 255, 255, 0.18),
        inset -1px 0 0.5px rgba(255, 255, 255, 0.18),
        inset 0 0 30px rgba(255, 255, 255, 0.045);
}

.db-root *,
.db-root *::before,
.db-root *::after { box-sizing: border-box; }

.db-root svg { display: block; width: 100%; height: 100%; }

/* ------------------------------- header ------------------------------ */

.db-head {
    display: flex;
    align-items: center;
    gap: 10px;
    /* same 12px inset as the body, actions and footer */
    padding: 15px 12px 13px;
    border-bottom: 1px solid var(--db-line);
}

.db-wordmark {
    height: 21px;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    object-fit: contain;
    object-position: left center;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.db-max {
    flex: none;
    height: 23px;
    width: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    cursor: help;
    border-radius: 5px;
}

.db-max { margin-right: auto; }
.db-max.is-locked { opacity: 0.32; filter: grayscale(1); }

/* -------------------------------- body ------------------------------- */

.db-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    /* the panel never shows scrollbar chrome, it just scrolls */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/*
   The body is a column flex container, so its children would shrink to fit
   once it hits its max height, and .db-section, which clips its own
   overflow for the collapse animation, silently cut the last sliders off.
   Locking the children to their natural height makes the body scroll
   instead of squeezing them.
*/
.db-body > * { flex: 0 0 auto; }

.db-body::-webkit-scrollbar,
.db-account-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* opaque card sitting on the glass */
.db-card,
.db-section {
    border-radius: 15px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.db-card { padding: 12px; }

/* ------------------- rows: cards and the speed head ------------------ */

.db-toggle-row,
.db-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db-toggle-row .db-label,
.db-section-head .db-label { flex: 1 1 auto; min-width: 0; }

/* the speed head carries the card's padding itself so all three rows end
   up exactly the same height */
.db-section-head {
    padding: 12px;
    cursor: pointer;
    user-select: none;
}

.db-section-head:focus-visible {
    outline: 2px solid var(--db-blue);
    outline-offset: -2px;
    border-radius: 15px;
}

.db-label-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 14px;
}

.db-label-state {
    font-size: 11px;
    font-weight: 700;
    color: var(--db-muted);
    margin-top: 2px;
}

.db-card.is-on {
    border-color: rgba(88, 204, 2, 0.55);
    box-shadow: 0 0 9px -2px rgba(88, 204, 2, 0.55);
}
.db-card.is-on .db-label-state { color: var(--db-green); }

.db-card.is-titan.is-on {
    border-color: rgba(255, 200, 0, 0.55);
    box-shadow: 0 0 9px -2px rgba(255, 200, 0, 0.5);
}
.db-card.is-titan.is-on .db-label-state { color: var(--db-gold); }

/* Speed section customized from defaults: lights up blue */
.db-section.is-on {
    border-color: rgba(28, 176, 246, 0.55);
    box-shadow: 0 0 9px -2px rgba(28, 176, 246, 0.55);
}
.db-section.is-on .db-label-state { color: var(--db-blue); }

/* natural errors: neutral while the rate is zero, red once it is armed */
.db-card.is-errors { display: flex; flex-direction: column; gap: 6px; }

.db-card.is-errors.is-on {
    border-color: rgba(255, 75, 75, 0.55);
    box-shadow: 0 0 9px -2px rgba(255, 75, 75, 0.5);
}
.db-card.is-errors.is-on .db-label-state { color: var(--db-red); }
.db-card.is-errors.is-on .db-range-fill { background: var(--db-red); }
.db-card.is-errors.is-on .db-range::-webkit-slider-thumb { border-color: var(--db-red); }
.db-card.is-errors.is-on .db-range::-moz-range-thumb { border-color: var(--db-red); }
.db-card.is-errors.is-on .db-danger { opacity: 1; pointer-events: auto; }

.db-card.is-errors:not(.is-on) .db-range-fill { background: var(--db-switch-off); }

.db-card.is-errors:not(.is-on) .db-range::-webkit-slider-thumb {
    border-color: var(--db-switch-off);
}
.db-card.is-errors:not(.is-on) .db-range::-moz-range-thumb {
    border-color: var(--db-switch-off);
}

/* the warning that sits with the natural-errors rate */
.db-danger {
    flex: none;
    width: 17px;
    height: 17px;
    margin-right: 2px;
    color: var(--db-red);
    cursor: help;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(255, 75, 75, 0.45));
    transition: transform 0.16s ease, opacity 0.3s ease;
}

.db-danger:hover { transform: scale(1.18); opacity: 1; }

.db-chevron {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: 0.6;
    transition: transform 0.26s ease;
}

.db-section.is-open .db-chevron { transform: rotate(180deg); }

/* ---------------------------- the switch -----------------------------
   Duolingo's own shape: a pill track with a rounded-square knob whose
   interior is the surface behind it, outlined in the track colour.
   -------------------------------------------------------------------- */

.db-switch {
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    --db-switch-on: var(--db-green);
}

.db-switch.is-titan { --db-switch-on: var(--db-gold); }
.db-section .db-switch { --db-switch-on: var(--db-blue); }

.db-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.db-switch .db-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 19px;
    margin-top: -9.5px;
    border-radius: 999px;
    background: var(--db-switch-off);
    transition: background 0.22s ease;
}

.db-switch .db-track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 9px;
    background: var(--db-knob);
    border: 2.5px solid var(--db-switch-off);
    transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.22s ease;
}

.db-switch input:checked + .db-track { background: var(--db-switch-on); }

.db-switch input:checked + .db-track::before {
    border-color: var(--db-switch-on);
    transform: translateX(20px);
}

.db-switch input:focus-visible + .db-track::before {
    box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.45);
}

/* --------------------------- help bubbles ---------------------------- */

.db-help {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.4px solid #5c6d77;
    background: var(--db-surface-2);
    color: #b3c2ca;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    user-select: none;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.db-help::after { content: "?"; transform: translateY(0.5px); }

.db-help:hover,
.db-help.is-open {
    border-color: var(--db-blue);
    color: #fff;
    background: #17506e;
}

.db-tip {
    position: absolute;
    z-index: 60;
    max-width: 236px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #101a1f;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.42;
    color: var(--db-text);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.db-tip.is-visible { opacity: 1; transform: translateY(0); }

/* ------------------------------ sections ----------------------------- */

.db-section { overflow: hidden; }

.db-section-body {
    display: grid;
    grid-template-rows: 0fr;
    /* closing cadence — kept in lockstep with the cards below (.db-top-cards) */
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-section.is-open .db-section-body {
    grid-template-rows: 1fr;
    /* opening is a touch quicker */
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-section-inner { overflow: hidden; min-height: 0; }

/* The sliders' real layout lives here and is NEVER toggled, so nothing
   reflows when the collapse begins. The clipper above simply reveals more or
   less of it. Rows hold their natural height (they are clipped, not squeezed)
   as the box folds. */
.db-section-content {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 2px 12px 12px;
}

.db-section-content > * { flex: 0 0 auto; }

/* --------------------------- slider rows ----------------------------- */

.db-field { display: flex; flex-direction: column; gap: 4px; }

.db-field.is-disabled { opacity: 0.4; pointer-events: none; }

.db-field-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
}

.db-field-label { flex: 0 1 auto; min-width: 0; }

.db-field-value {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.db-num {
    width: 54px;
    height: 26px;
    padding: 0 6px;
    text-align: right;
    border-radius: 8px;
    border: 1px solid var(--db-line);
    background: var(--db-input);
    color: var(--db-text);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    -moz-appearance: textfield;
}

.db-num::-webkit-outer-spin-button,
.db-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.db-num:focus {
    outline: none;
    border-color: var(--db-blue);
    box-shadow: 0 0 0 2px rgba(28, 176, 246, 0.3);
}

.db-unit { font-size: 10px; font-weight: 700; color: var(--db-muted); }

/* rail, filled part and the input stacked, so the fill is a flat colour
   and the thumb can be the same rounded square as the switch knob */
.db-range-wrap {
    position: relative;
    height: var(--db-thumb);
    display: flex;
    align-items: center;
}

.db-range-rail,
.db-range-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    margin-top: -3px;
    border-radius: 999px;
    pointer-events: none;
}

.db-range-rail {
    right: 0;
    background: var(--db-switch-off);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.db-range-fill { background: var(--db-blue); }

.db-range {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--db-thumb);
    margin: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.db-range::-webkit-slider-runnable-track {
    height: var(--db-thumb);
    background: transparent;
    border: none;
}

.db-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--db-thumb);
    height: var(--db-thumb);
    border-radius: 7px;
    background: var(--db-knob);
    border: 2.5px solid var(--db-blue);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.12s ease;
}

.db-range::-webkit-slider-thumb:hover { transform: scale(1.12); }

.db-range::-moz-range-track { height: var(--db-thumb); background: transparent; }

.db-range::-moz-range-thumb {
    width: var(--db-thumb);
    height: var(--db-thumb);
    border-radius: 7px;
    background: var(--db-knob);
    border: 2.5px solid var(--db-blue);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* inline switch inside the speed section */
.db-inline-toggle { display: flex; align-items: center; gap: 8px; }

.db-inline-toggle .db-label-title { flex: 1 1 auto; min-width: 0; font-size: 12px; }

.db-inline-toggle .db-switch { width: 40px; height: 24px; }
.db-inline-toggle .db-switch .db-track { height: 16px; margin-top: -8px; }
.db-inline-toggle .db-switch .db-track::before {
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border-radius: 8px;
    border-width: 2px;
}
.db-inline-toggle .db-switch input:checked + .db-track::before {
    transform: translateX(16px);
}

/* ------------------------------ actions ------------------------------ */

.db-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 12px 12px;
}


.db-action { display: flex; align-items: center; gap: 8px; }

/* flex-basis 0 makes both buttons resolve to exactly the same width,
   since every sibling in the row has a fixed size */
.db-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: none;
    border-radius: 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 0 var(--db-btn-edge), 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.07s ease, box-shadow 0.07s ease, filter 0.16s ease, background 0.35s ease, color 0.35s ease;
}

.db-btn-icon { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.db-btn-icon svg { display: block; width: 100%; height: 100%; }
.db-btn-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.db-btn:hover { filter: brightness(1.08); }

.db-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--db-btn-edge), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* a disabled button stays fully opaque, it just goes grey */
.db-btn:disabled {
    background: #46545c;
    --db-btn-edge: #333e45;
    color: #8a99a2;
    cursor: not-allowed;
}

.db-btn.db-btn-solve {
    background: var(--db-green);
    --db-btn-edge: #46a302;
    color: #0d2600;
}

.db-btn.db-btn-skip {
    background: var(--db-blue);
    --db-btn-edge: #0d7fb3;
    color: #04222f;
}

/* Auto-Solve: finishes the whole lesson, full width under the pair */
.db-action-auto { width: 100%; }
.db-action-auto .db-btn { flex: 1 1 auto; }

.db-btn.db-btn-auto {
    background: #ce82ff;
    --db-btn-edge: #9b4dd6;
    color: #2a0a45;
}
.db-btn.db-btn-auto.is-titan-mode {
    background: var(--db-gold);
    --db-btn-edge: #c99b00;
    color: #3d2c00;
}

/*
   While a chain is walking the path the auto button sinks in and greys out,
   the way a pressed key looks, but stays fully live: a second press stops the
   run. Each mode keeps its own hue, just darker and duller.
*/
.db-btn.db-btn-auto.is-running {
    background: #6b566f;
    --db-btn-edge: #4a3a4d;
    color: #d8c9de;
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--db-btn-edge), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.db-btn.db-btn-auto.is-running.is-titan-mode {
    background: #7a6526;
    --db-btn-edge: #57481b;
    color: #f1e3b5;
}
.db-btn.db-btn-auto.is-running:hover { filter: none; }

/* fixed width so both rows line up and both buttons match */
.db-hotkey {
    flex: none;
    width: var(--db-chip-w);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 8px;
    border-radius: 13px;
    border: 1px solid var(--db-line);
    background: var(--db-surface-2);
    color: #b3c2ca;
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.db-hotkey-icon { width: 14px; height: 14px; flex: none; opacity: 0.75; }

.db-hotkey-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-hotkey:hover {
    color: #fff;
    border-color: rgba(28, 176, 246, 0.6);
    background: #17506e;
}

.db-hotkey.is-capturing {
    color: #ffdf6b;
    border-color: rgba(255, 200, 0, 0.8);
    background: #4a3c0b;
}

/* ------------------------------- footer ------------------------------ */

.db-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 9px 12px;
    border-top: 1px solid var(--db-line);
}

.db-reset {
    border: none;
    background: transparent;
    color: var(--db-muted);
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 8px;
    transition: color 0.16s ease, background 0.16s ease;
}

.db-reset:hover { color: #fff; background: #7a2323; }

/* report a bug: sits on the left of a footer, its trailing sibling on the
   right, thanks to the auto margin here */
.db-report {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    border: none;
    background: transparent;
    color: var(--db-muted);
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.16s ease, background 0.16s ease;
}

.db-report-icon { width: 14px; height: 14px; flex: none; }
.db-report-icon svg { display: block; width: 100%; height: 100%; }

.db-report:hover { color: #fff; background: rgba(28, 176, 246, 0.16); }

/* the owner's dev tools sit right after it, so the auto margin moves over */
.db-report[hidden] { display: none; }
.db-report:has(+ .db-dev-foot:not([hidden])) { margin-right: 0; }

/* ---------------------------- host sizing ---------------------------- */

/*
   On the page the panel shares the screen with the floating button, so its
   height has to leave room for everything the dock stacks up: the button,
   the gap, this panel's own header and footer, and the offset from the
   bottom of the window. Without that budget the panel simply ran off the
   top of the viewport on a short window and got clipped.
   48 button + 12 gap + 20 bottom + 62 header + 92 actions + 40 footer
   + 24 breathing
*/
/* the account and reminder panes always scroll rather than stretch */
.db-account-inner {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/*
   The viewport budget belongs to the floating panel on the page and to
   nothing else. Scoped to the variant, it also applied inside the
   extension popup, where vh is measured against a window Chrome is still
   sizing to this very document: the circular measurement collapsed the
   account pane and the popup opened clipped a few lines in. The popup
   sets its own budget in px, in popup.css.
*/
#duobot-dock .db-root .db-body {
    max-height: min(80vh, calc(100vh - 298px));
}

#duobot-dock .db-root .db-account-inner {
    max-height: min(80vh, calc(100vh - 214px));
}

@media (prefers-reduced-motion: reduce) {
    .db-root *, .db-root *::before { transition: none !important; animation: none !important; }
}


/* =====================================================================
   ACCOUNT: header control, the sliding stage, sign in and profile
   ===================================================================== */

.db-account {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 12px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
    color: var(--db-muted);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.db-account-icon { width: 100%; height: 100%; }

.db-account:hover,
.db-account.is-open {
    color: #fff;
    border-color: rgba(28, 176, 246, 0.55);
    background: #17506e;
}

/* ------------------------------- stage ------------------------------- */

/*
   The panel height eases on one gentle curve that is smooth at both ends.
   The old curve snapped most of the way instantly, which is what read as a
   brusque jump when a screen was much shorter than the one before it.
*/
.db-stage {
    position: relative;
    overflow: hidden;
    height: 0;
    transition: height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
   Screens cross-fade in place, with NO sideways motion at all. Sliding a view
   horizontally while the stage was also changing height made the panel look
   like it arrived on a diagonal, and the effect was worst on the Developer
   screen, whose height differs most from the main screen (which is exactly the
   change the user still saw). With nothing moving sideways there is no diagonal
   to see: every screen change is the same clean fade plus a smooth height ease.
*/
.db-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-stage > .db-view.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* --------------------------- account view ---------------------------- */

.db-account-head { padding: 12px 12px 0; }
.db-account-inner { padding-left: 12px; padding-right: 12px; }

.db-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px 6px 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--db-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease;
}

.db-back-icon { width: 15px; height: 15px; flex: none; }

.db-back:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.db-dev-view .db-back:hover { color: var(--db-green); background: rgba(88, 204, 2, 0.12); }

.db-account-inner { padding: 8px 12px 14px; }

.db-pane { display: flex; flex-direction: column; gap: 10px; }

.db-pane.is-hidden,
.db-stats.is-hidden,
.db-empty.is-hidden { display: none; }

.db-pane-title { font-size: 17px; font-weight: 800; }

.db-pane-blurb {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--db-muted);
}

/* ------------------------- provider buttons -------------------------- */

.db-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 13px;
    border: 1px solid var(--db-line);
    background: #fff;
    color: #14181b;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.07s ease, filter 0.16s ease;
}

.db-provider-icon { width: 19px; height: 19px; flex: none; }

.db-provider:hover { filter: brightness(0.94); }
.db-provider:active { transform: translateY(2px); }

.db-provider.is-x {
    background: #000;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

/* ------------------------------ profile ------------------------------ */

.db-identity {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 12px 12px 11px;
    border-radius: 15px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
}

.db-identity-main {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* the two compact Duolingo numbers, sitting inside the identity card */
.db-identity-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 11px;
    border-top: 1px solid var(--db-line);
}

.db-mini-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 11px;
    background: var(--db-surface-2);
}

.db-mini-stat-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.db-mini-stat-icon svg { display: block; width: 20px; height: 20px; }

.db-mini-stat-box { min-width: 0; line-height: 1.1; }

.db-mini-stat-value {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-mini-stat-label {
    margin-top: 1px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--db-muted);
    white-space: nowrap;
}

.db-avatar {
    flex: none;
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 50%;
    background: #17506e;
    color: #8ed4ff;
}

.db-identity-text { min-width: 0; }

.db-identity-name {
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-identity-meta {
    font-size: 11px;
    font-weight: 700;
    color: var(--db-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.db-stat {
    padding: 10px 11px;
    border-radius: 13px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
}

.db-stat-value {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #ffffff;
}

.db-stat-label {
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--db-muted);
}

.db-signout {
    align-self: flex-end;
    border: none;
    background: transparent;
    color: var(--db-muted);
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 8px;
    margin-top: 2px;
    transition: color 0.16s ease, background 0.16s ease;
}

.db-signout:hover {
    color: #fff;
    background: #7a2323;
}

/*
   The profile's bottom row reuses the home footer look: a hairline divider
   with report on the left and sign out on the right. Inside that flex row
   the sign-out button drops its own flex-end alignment.
*/
.db-profile-foot,
.db-pane-foot {
    margin: 6px -12px -14px;
    padding: 9px 12px;
}

.db-profile-foot .db-signout {
    align-self: center;
    margin-top: 0;
}

/* --------------------- profile: sections and tiles -------------------- */

.db-profile .db-section-label {
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #ffffff;
}

.db-live-note {
    margin-top: -4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--db-muted);
    opacity: 0.75;
}

.db-stat-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 24px;
    margin-bottom: 6px;
}

.db-stat-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.db-stats.is-duo .db-stat-value { color: #ffffff; }
.db-stats.is-duo .db-stat-value { font-size: 16px; }

/* the week, drawn like Duolingo's own profile chart */
.db-xp-chart {
    padding: 12px 12px 10px;
    border-radius: 13px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
}
.db-xp-chart.is-hidden,
.db-section-label.is-hidden { display: none; }
.db-xp-title {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--db-muted);
}
.db-xp-plot { position: relative; margin-top: 8px; }
.db-xp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.db-xp-grid { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1.5; }
.db-xp-axis { fill: var(--db-muted); font: 800 11px Nunito, sans-serif; }
.db-xp-line {
    fill: none;
    stroke: #49c0f8;
    stroke-opacity: 0.55;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.db-xp-dot {
    fill: #49c0f8;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.12s ease;
    pointer-events: none;
}
.db-xp-dot.is-active { transform: scale(1.5); }
.db-xp-hit { fill: transparent; }
.db-xp-tip {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #131f24;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, calc(-100% - 12px));
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.db-xp-tip.is-shown { opacity: 1; }
.db-xp-tip-day { font-size: 10.5px; font-weight: 700; color: var(--db-muted); }
.db-xp-tip-xp { font-size: 14px; font-weight: 800; color: #49c0f8; }
.db-xp-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--db-text);
}
.db-xp-legend-dot { width: 12px; height: 12px; border-radius: 50%; background: #49c0f8; }
.db-xp-legend-total { margin-left: auto; color: var(--db-muted); }

/* dictionary: title row with the import icon, three equal export buttons */
.db-dict-head { display: flex; align-items: center; gap: 8px; }
.db-dict-head .db-label-title { flex: 1 1 auto; min-width: 0; }
/* the header's icon button, a size down to sit on the title line */
.db-dict-refresh { width: 30px; height: 30px; padding: 6px; border-radius: 10px; }
.db-dict-refresh:disabled { cursor: default; }
.db-dict-refresh.is-spinning .db-icon-btn-mark { animation: db-pull 0.9s ease-in-out infinite; }
@keyframes db-pull { 50% { transform: translateY(3px); opacity: 0.55; } }
.db-card .db-action > .db-btn { flex: 1 1 0; }
.db-stats.is-bot .db-stat-value { color: #ffffff; }
.db-stats.is-bot .db-stat-label { color: #ffffff; font-weight: 700; }

.db-avatar.has-photo {
    background-size: cover;
    background-position: center;
    color: transparent;
}

.db-avatar.has-photo svg { display: none; }

/* a soft edge stands in for the hidden scrollbar, only when it can scroll */
.db-account-inner.has-more,
.db-body.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

/* =====================================================================
   PAYWALL
   ===================================================================== */

.db-body.is-hidden,
.db-foot.is-hidden { display: none; }
.db-actions.is-hidden,
.db-locked.is-hidden { display: none; }

/* ------------------------ locked main view ---------------------------- */

.db-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 26px 20px 22px;
}

.db-locked-lock {
    width: 34px;
    height: 34px;
    color: var(--db-muted);
    opacity: 0.7;
}

.db-locked-title { font-size: 16px; font-weight: 800; }

.db-locked-blurb {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--db-muted);
    max-width: 250px;
}

.db-locked .db-subscribe { margin-top: 6px; width: auto; padding: 0 26px; }

/* --------------------------- paywall pane ----------------------------- */

.db-paywall-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.db-paywall-lock {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-paywall-lock svg { display: block; width: 100%; height: 100%; }

.db-price {
    font-size: 12px;
    font-weight: 800;
    color: var(--db-blue);
    margin-top: 1px;
}

.db-perks {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.db-perks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.db-perk-check {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: var(--db-green);
}

.db-subscribe {
    width: 100%;
    height: 46px;
    margin-top: 4px;
    border: none;
    border-radius: 13px;
    background: var(--db-blue);
    color: #04222f;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 0 #0d7fb3, 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.07s ease, box-shadow 0.07s ease, filter 0.16s ease;
}

.db-subscribe:hover { filter: brightness(1.08); }

.db-subscribe:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #0d7fb3, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.db-recheck {
    align-self: center;
    border: none;
    background: transparent;
    color: var(--db-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.16s ease, background 0.16s ease;
}

.db-recheck:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

/* a failure or a setup hint, shown in place instead of only in the console */
.db-note {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--db-muted);
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
}

.db-note.is-hidden { display: none; }

.db-note.is-error {
    color: #ffb4b4;
    border-color: rgba(255, 75, 75, 0.4);
    background: #3a1a1a;
}

.db-provider:disabled,
.db-subscribe:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

/* the currency note under the headline price */
.db-price-note { margin-top: -4px; font-size: 11.5px; }

/* =====================================================================
   FREE PLAN

   Everything below only shows up once the panel carries .is-free, so a
   paid install never renders a padlock or a counter at all.
   ===================================================================== */

/* the bell shares the account button's shape, so the two read as a pair */
.db-icon-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 12px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
    color: var(--db-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.db-icon-btn-mark { width: 100%; height: 100%; }

.db-icon-btn:hover,
.db-icon-btn.is-open {
    color: #fff;
    border-color: rgba(88, 204, 2, 0.55);
    background: #1f5915;
}


.db-remind.is-armed { color: var(--db-gold); }

.db-remind-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--db-gold);
    border: 1.5px solid var(--db-surface);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.db-remind-dot.is-visible { opacity: 1; transform: none; }

/* the header face carries the Duolingo photo once we know it */
.db-account-face {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
}

.db-account-face.has-photo {
    background-size: cover;
    background-position: center;
    /* the photo needs the whole button, not the icon's inset */
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    margin: -7px;
    border-radius: 11px;
}

.db-account-face.has-photo svg { display: none; }

/* ------------------------------ padlocks ----------------------------- */

.db-lock-chip { display: none; }

.db-root.is-free .db-lock-chip {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    padding: 4px;
    border: none;
    border-radius: 7px;
    background: rgba(255, 200, 0, 0.14);
    color: var(--db-gold);
    cursor: pointer;
    transition: background 0.16s ease, transform 0.12s ease;
}

.db-root.is-free .db-lock-chip:hover {
    background: rgba(255, 200, 0, 0.26);
    transform: translateY(-1px);
}

.db-root.is-free .db-lock-chip svg { width: 100%; height: 100%; }

/* a locked card stays readable, it just stops looking available */
.db-root.is-free .db-card.is-feature-locked .db-switch,
.db-root.is-free .db-section.is-feature-locked .db-chevron {
    opacity: 0.4;
    pointer-events: none;
}

.db-root.is-free .db-card.is-feature-locked .db-range-wrap,
.db-root.is-free .db-card.is-feature-locked .db-num,
.db-root.is-free .db-card.is-feature-locked .db-unit {
    opacity: 0.4;
    pointer-events: none;
}

/* the danger triangle only belongs on screen once natural errors is turned
   on. The lock must not force it visible: at 0% it stays hidden even while
   the card is locked, and only dims to the locked look once the rate is set. */
.db-root.is-free .db-card.is-feature-locked.is-on .db-danger {
    opacity: 0.4;
    pointer-events: none;
}

.db-root.is-free .db-card.is-feature-locked .db-label-state,
.db-root.is-free .db-section.is-feature-locked .db-label-state {
    color: var(--db-gold);
}

.db-root.is-free .db-section.is-feature-locked .db-section-head { cursor: pointer; }

/*
   Open, readable, and inert. The padlock in the header is the only live
   control in here while the free plan is on.
*/
.db-root.is-free .db-section.is-feature-locked .db-section-inner {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

/* --------------------------- free daily use -------------------------- */

.db-daily { display: none; }

.db-root.is-free .db-card.is-free-daily .db-switch { display: none; }

.db-root.is-free .db-card.is-free-daily .db-daily {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 32px;
    padding: 0 13px;
    border: none;
    border-radius: 11px;
    background: var(--db-green);
    color: #10240a;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 0 #43a002;
    transition: filter 0.16s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.db-root.is-free .db-card.is-free-daily .db-daily:hover { filter: brightness(1.08); }

.db-root.is-free .db-card.is-free-daily .db-daily:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #43a002;
}

.db-root.is-free .db-card.is-free-daily .db-daily.is-active {
    background: var(--db-gold);
    color: #2a2000;
    box-shadow: 0 3px 0 #c99b00;
    cursor: default;
}

.db-root.is-free .db-card.is-free-daily .db-daily.is-spent {
    background: var(--db-switch-off);
    color: var(--db-muted);
    box-shadow: none;
    cursor: default;
}

/* the automation card keeps its own padlock hidden until the day is spent */
.db-root.is-free .db-card.is-free-daily .db-lock-chip { display: none; }

/* ------------------------- solve / skip counter ---------------------- */

.db-uses {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 2px 1px 0;
    cursor: help;
}

.db-uses.is-hidden { display: none; }

.db-uses-text {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--db-muted);
    font-variant-numeric: tabular-nums;
}

.db-uses-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--db-switch-off);
    overflow: hidden;
}

.db-uses-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--db-blue);
    transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.db-uses.is-empty .db-uses-text { color: var(--db-gold); }
.db-uses.is-empty .db-uses-fill { background: var(--db-gold); }

/* ------------------------ free strip on the profile ------------------ */

.db-free-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 200, 0, 0.28);
    background: rgba(255, 200, 0, 0.08);
}

.db-free-strip.is-hidden { display: none; }

.db-free-strip-head { display: flex; align-items: center; gap: 7px; }

.db-free-strip-lock { width: 15px; height: 15px; color: var(--db-gold); }

.db-free-strip-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--db-gold);
}

.db-free-strip-state {
    font-size: 12px;
    font-weight: 700;
    color: var(--db-muted);
}

.db-free-strip .db-subscribe { margin-top: 2px; }

/* the paywall pair: unlock in green on top, the free plan in the usual blue below */
.db-subscribe.is-unlock { background: var(--db-green); color: #0b2a00; box-shadow: 0 4px 0 #46a302, 0 6px 16px rgba(0, 0, 0, 0.35); }
.db-subscribe.is-unlock:active { box-shadow: 0 0 0 #46a302, 0 2px 6px rgba(0, 0, 0, 0.3); }
.db-free-cta { margin-top: 10px; }

/* =====================================================================
   REMINDERS
   ===================================================================== */

.db-remind-list { display: flex; flex-direction: column; gap: 8px; }

/*
   Two lines rather than one. A time input renders as "07:30 PM" plus its
   own picker button in a 12 hour locale, which left the note field about
   ten characters wide, so the note gets the second line to itself.
*/
.db-remind-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 13px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
}

/* the time field, drawn by us so the mark is white and the list is ours */
.db-time {
    flex: none;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 9px;
    border: 1px solid var(--db-line);
    background: var(--db-input);
    color: var(--db-text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.db-time:hover { border-color: rgba(28, 176, 246, 0.5); }

.db-time.is-open {
    border-color: var(--db-blue);
    background: #12303f;
}

.db-time-icon { width: 15px; height: 15px; flex: none; opacity: 0.8; }

.db-time-pop {
    position: absolute;
    z-index: 65;
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: 13px;
    background: #101a1f;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.db-time-pop.is-visible { opacity: 1; pointer-events: auto; transform: none; }

.db-time-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 52px;
    max-height: 152px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.db-time-col::-webkit-scrollbar { width: 0; height: 0; }

.db-time-opt {
    flex: none;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--db-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.db-time-opt:hover { background: rgba(255, 255, 255, 0.08); color: var(--db-text); }

.db-time-opt.is-on {
    background: var(--db-blue);
    color: #04222f;
}

.db-remind-label {
    flex: 1 1 100%;
    order: 4;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid var(--db-line);
    background: var(--db-input);
    color: var(--db-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.db-remind-label:focus { outline: none; border-color: var(--db-blue); }

/*
   The same small switch the speed section uses. The earlier override
   resized the knob but left the base rule's -14px offset, which is what
   had it sitting high and hanging off the end of the track.
*/
.db-remind-row .db-switch { flex: none; width: 40px; height: 24px; }
.db-remind-row .db-switch .db-track { height: 16px; margin-top: -8px; }

.db-remind-row .db-switch .db-track::before {
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border-radius: 8px;
    border-width: 2px;
}

.db-remind-row .db-switch input:checked + .db-track::before {
    transform: translateX(16px);
}

.db-remind-remove {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 5px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--db-muted);
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease;
}

.db-remind-remove:hover { color: #fff; background: rgba(255, 75, 75, 0.24); }
.db-remind-remove svg { width: 100%; height: 100%; }

.db-remind-empty,
.db-remind-note {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--db-muted);
}

.db-remind-empty.is-hidden,
.db-remind-note.is-hidden { display: none; }

.db-remind-note { color: var(--db-gold); opacity: 0.85; }

.db-remind-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    background: transparent;
    color: var(--db-text);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.db-remind-add:hover {
    border-color: rgba(28, 176, 246, 0.6);
    background: rgba(28, 176, 246, 0.1);
}

.db-remind-add:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: solid;
}

.db-remind-add-icon { width: 15px; height: 15px; flex: none; }

.db-card.is-emergency { margin-top: 4px; }
.db-card.is-emergency.is-on .db-label-state { color: var(--db-red); }
.db-card.is-emergency .db-switch { --db-switch-on: var(--db-red); }

/*
   .db-btn.db-btn-solve and .db-btn:disabled both weigh 0,2,0, and the
   coloured rule is written later, so a disabled Solve button kept its gold
   and looked pressable. Naming both parts settles it.
*/
.db-btn.db-btn-solve:disabled,
.db-btn.db-btn-skip:disabled,
.db-btn.db-btn-auto:disabled {
    background: #46545c;
    --db-btn-edge: #333e45;
    color: #8a99a2;
    cursor: not-allowed;
}

.db-card.is-emergency.is-on { border-color: rgba(255, 75, 75, 0.5); }

/* =====================================================================
   DEVELOPER (owner only)
   ===================================================================== */

/* .db-icon-btn sets display:grid, which would otherwise beat [hidden] */
.db-icon-btn[hidden] { display: none !important; }

/*
   Read right to left the cluster is profile, bell, mods, automation, so the
   automation button sits beside Max. The auto margin lives on Max.
*/

/* the four developer views reuse the account view's sliding + scrolling */
.db-dev-view .db-pane-title { font-size: 17px; font-weight: 800; }

.db-dev-list { display: flex; flex-direction: column; gap: 8px; }

.db-dev-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: var(--db-surface);
    color: var(--db-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.1s ease;
}

.db-dev-row:hover {
    border-color: rgba(88, 204, 2, 0.5);
    background: var(--db-surface-2);
    transform: translateY(-1px);
}

.db-dev-row-icon { width: 22px; height: 22px; flex: none; color: var(--db-green); }
.db-dev-row-text { flex: 1 1 auto; min-width: 0; }
.db-dev-row-title { font-size: 14px; font-weight: 800; }
.db-dev-row-sub { font-size: 11.5px; font-weight: 600; color: var(--db-muted); margin-top: 1px; }
.db-dev-row-chev { width: 18px; height: 18px; flex: none; color: var(--db-muted); }

/* status: a key/value list */
.db-kv {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--db-line);
    border-radius: 13px;
    overflow: hidden;
}

.db-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--db-line);
}

.db-kv-row:last-child { border-bottom: none; }
.db-kv-k { font-size: 12px; font-weight: 700; color: var(--db-muted); }
.db-kv-v {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--db-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    word-break: break-word;
}
.db-kv-v.is-good { color: var(--db-green); }
.db-kv-v.is-warn { color: var(--db-gold); }
.db-kv-v.is-bad { color: var(--db-red); }

/* state: a read-only code dump */
.db-code {
    margin: 0;
    padding: 11px;
    border-radius: 12px;
    background: var(--db-input);
    border: 1px solid var(--db-line);
    color: #b9c7cf;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.db-code::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* the plain action buttons the developer views share. Sized and spaced to
   match the Automation and Titan cards on the main view: the same card
   height and radius, and the pane's own gap between them (no per button
   margin) so the spacing stays consistent with the rest of the panel. */
.db-dev-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--db-line);
    border-radius: 15px;
    background: var(--db-surface);
    color: var(--db-text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.db-dev-action:hover { border-color: rgba(88, 204, 2, 0.5); background: var(--db-surface-2); }
.db-dev-action svg { color: var(--db-green); }

/* Logs view (owner only, dock only). Taller than the state dump and shown
   newest at the bottom, with the two actions sharing one row under it. */
.db-code.db-logs {
    max-height: 380px;
    font-size: 10.5px;
}

.db-dev-actions-row {
    display: flex;
    gap: 8px;
}

.db-dev-actions-row .db-dev-action {
    flex: 1 1 auto;
}

/* Console view (owner only, dock only): the pasted-command box, then the
   Run/View-logs row, then the ready-made probes. */
.db-console-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 66px;
    max-height: 200px;
    resize: vertical;
    margin: 4px 0 10px;
}
.db-console-input::placeholder { color: var(--db-muted); }

.db-dev-view .db-section-label {
    margin: 12px 0 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--db-green);
}

.db-probe-row { flex-wrap: wrap; }
.db-probe-row .db-dev-action { flex: 1 1 45%; min-height: 40px; font-size: 11.5px; }


/* Speed presets row (Fast / Recommended / Slow), above the typing toggle. */
.db-preset-row {
    display: flex;
    gap: 8px;
    margin-bottom: 2px;
}
.db-preset-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: none;
    border-radius: 11px;
    background: var(--db-blue);
    --db-btn-edge: #0d7fb3;
    color: #04222f;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--db-btn-edge), 0 5px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.25s ease, color 0.25s ease;
}
.db-preset-btn:hover { filter: brightness(1.08); }
.db-preset-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--db-btn-edge); }
/* the current preset stays the same shape but deflates and greys out */
.db-preset-btn.is-active {
    background: #46545c;
    --db-btn-edge: #333e45;
    color: #8a99a2;
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--db-btn-edge);
    cursor: default;
    filter: none;
}

/* Below-Fast warning on the Speed section, mirroring Natural errors. */
.db-section .db-speed-danger { display: none; }
.db-section.is-speed-danger {
    border-color: rgba(255, 75, 75, 0.6);
    box-shadow: 0 0 9px -2px rgba(255, 75, 75, 0.5);
}
.db-section.is-speed-danger .db-speed-danger { display: inline-flex; opacity: 1; pointer-events: auto; }
.db-section.is-speed-danger .db-label-state { color: var(--db-red); }


/* The Automation / Titan / Natural errors group slides out as one when Speed
   is expanded, so Speed can take its place without the panel changing height.
   The negative margin swallows the body's flex gap when collapsed.

   This animates grid-template-rows (0fr..1fr), NOT max-height, on purpose: a
   max-height ceiling far taller than the real cards meant the visible motion
   finished in the first fraction of the transition while the timer ran on, so
   on close the cards settled into place well before the Speed box had finished
   folding away. The fr track tracks the true height, and it uses the very same
   duration and curve as .db-section-body, so the cards and Speed grow and
   shrink together and only reach their final shape once fully closed. */
.db-top-cards {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    /* closing cadence — matches .db-section-body exactly */
    transition:
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-top-cards-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-height: 0;
}
.db-body.is-speed-open .db-top-cards {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: -10px;
    pointer-events: none;
    /* opening is a touch quicker, still matched to .db-section-body */
    transition:
        grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================== mods view ============================= */

.db-mods-section { display: flex; flex-direction: column; gap: 8px; }

.db-mods-heading {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--db-muted);
}

.db-card.is-mod { padding: 10px 12px; }
.db-card.is-mod .db-label-title { font-size: 13px; }

.db-card.is-gated,
.db-mods-group.is-gated { opacity: 0.55; }
.db-card.is-gated .db-switch { pointer-events: none; }
/* automations before the consent: everything greys out, nothing takes a click */
.db-mods-section.is-waiting .db-mods-row,
.db-mods-section.is-waiting .db-mods-days { opacity: 0.45; pointer-events: none; }
/* a switch left on before the consent reads grey too, not green */
.db-mods-section.is-waiting .db-card.is-on { border-color: var(--db-line); box-shadow: none; }
.db-mods-section.is-waiting .db-card.is-on .db-label-state { color: var(--db-muted); }
.db-mods-section.is-waiting .db-switch { filter: grayscale(1); }

.db-card.is-guard.is-on {
    border-color: rgba(255, 150, 0, 0.6);
    box-shadow: 0 0 9px -2px rgba(255, 150, 0, 0.55);
}
.db-card.is-guard.is-on .db-label-state { color: #ff9600; }
.db-card.is-guard .db-switch { --db-switch-on: #ff9600; }

.db-card.is-consent.is-on {
    border-color: rgba(255, 75, 75, 0.55);
    box-shadow: 0 0 9px -2px rgba(255, 75, 75, 0.5);
}
.db-card.is-consent.is-on .db-label-state { color: var(--db-red); }
.db-card.is-consent .db-switch { --db-switch-on: var(--db-red); }

.db-mods-value { font-size: 12px; font-weight: 800; }

.db-mods-note {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--db-muted);
}
.db-mods-note:empty,
.db-mods-note[hidden] { display: none; }
.db-mods-note.is-warn { color: var(--db-gold); }
/* signed out: the pane is shown, but only as a preview */
.db-pane.is-locked > [inert] { opacity: .4; filter: grayscale(1); }
.db-mods-note.is-error { color: var(--db-red); }

.db-mods-note.is-strong { color: #ff7b7b; }
.db-mods-divider .db-mods-note { margin-top: 6px; }
.db-card > .db-mods-note { margin-top: 9px; }

/* the automations come last, under their own divider */
.db-mods-divider {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--db-line);
}
.db-mods-divider-title { font-size: 14px; font-weight: 800; color: var(--db-text); }
.db-mods-divider-blurb {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--db-muted);
}

.db-mods-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}
.db-mods-row .db-field-label { flex: 1 1 auto; }

/* two equal columns, so every action button is the same width */
.db-mods-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.db-mods-buttons > .db-mods-btn { width: 100%; min-width: 0; }
.db-mods-buttons > [hidden] { display: none; }

.db-mods-time,
.db-mods-text,
.db-mods-select {
    height: 30px;
    padding: 0 8px;
    border-radius: 9px;
    border: 1px solid var(--db-line);
    background: var(--db-input);
    color: var(--db-text);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    color-scheme: dark;
}
.db-mods-text { width: 130px; }
.db-mods-target { width: 72px; height: 30px; }
.db-mods-time:focus,
.db-mods-text:focus,
.db-mods-select:focus {
    outline: none;
    border-color: var(--db-blue);
    box-shadow: 0 0 0 2px rgba(28, 176, 246, 0.3);
}
.db-mods-time:disabled { opacity: 0.45; }

/* pressable, with the 4px depth edge of the brand kit */
.db-mods-btn {
    --db-mods-edge: rgba(0, 0, 0, 0.35);
    padding: 7px 12px;
    border: 0;
    border-radius: 11px;
    background: var(--db-surface-2);
    box-shadow: 0 4px 0 var(--db-mods-edge);
    color: var(--db-text);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease, filter 0.16s ease;
}
.db-mods-btn:hover { filter: brightness(1.1); }
.db-mods-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--db-mods-edge); }
.db-mods-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.db-mods-btn.is-blue { background: var(--db-blue); --db-mods-edge: #1899d6; color: #fff; }
.db-mods-btn.is-green { background: var(--db-green); --db-mods-edge: #58a700; color: #fff; }
.db-mods-btn.is-red { background: var(--db-red); --db-mods-edge: #ea2b2b; color: #fff; }
.db-mods-btn[hidden] { display: none; }

.db-mods-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--db-switch-off);
    overflow: hidden;
}
.db-mods-progress[hidden] { display: none; }
.db-mods-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--db-gold);
    transition: width 0.5s cubic-bezier(.22, 1, .36, 1);
}

.db-mods-section[hidden] { display: none; }

/* ---- report ---- */
.db-report-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.db-report-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--db-green);
    cursor: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .db-mods-btn,
    .db-mods-progress-fill { transition: none; }
}

.db-xp-forecast {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--db-muted);
}
.db-xp-forecast:empty { display: none; }
.db-xp-png { margin-top: 8px; align-self: flex-start; }

/* ---- profile: XP per course ---- */
.db-courses-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.db-course {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px 8px;
    font-size: 13px;
    font-weight: 700;
}
.db-course-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-course-xp { color: var(--db-muted, #afafaf); font-variant-numeric: tabular-nums; }
.db-course-bar {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 3px;
    background: #1cb0f6;
    min-width: 6px;
}
.db-course.is-current .db-course-bar { background: #58cc02; }

/* ---- mods: sound contexts, farm schedule ---- */
.db-mods-subhead {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--db-muted);
}
/* the weekdays: seven pills on one line, blue when picked */
.db-mods-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.db-mods-day { position: relative; cursor: pointer; }
.db-mods-day input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.db-mods-day span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--db-line);
    background: var(--db-input);
    color: var(--db-muted);
    font-size: 11px;
    font-weight: 800;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.db-mods-day input:checked + span { background: var(--db-blue); border-color: var(--db-blue); color: #ffffff; }
.db-mods-day input:focus-visible + span { outline: 2px solid var(--db-blue); outline-offset: 1px; }
.db-mods-day input:disabled + span { opacity: 0.45; }
.db-mods-day:has(input:disabled) { cursor: not-allowed; }
.db-farm-gained { color: var(--db-gold); font-weight: 800; }

/* ---- settings ---- */
.db-settings-view .db-pane { display: flex; flex-direction: column; gap: 8px; }
.db-sound-card .db-section-head { cursor: default; }
.db-sound-card .db-section-content { padding-top: 0; }
.db-preset-btn:disabled:not(.is-active) { opacity: 0.45; cursor: not-allowed; }
.db-section.is-gated .db-inline-toggle .db-switch { pointer-events: none; opacity: 0.55; }

/* ---- folding groups inside Mods (hard mode) ---- */
.db-mods-group .db-section-content { gap: 4px; }

/* ---- the report, now in the profile ---- */
.db-report-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---- progress: the ranges, the family, the custom period ---- */
.db-xp-ranges { display: grid; grid-template-columns: 1fr 1fr 1fr 1.45fr; gap: 6px; margin: 8px 0 4px; }
.db-xp-ranges[hidden] { display: none; }
.db-xp-ranges .db-preset-btn { height: 30px; font-size: 10px; letter-spacing: 0.2px; padding: 0 4px; }
.db-report-family { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.db-report-family[hidden] { display: none; }
.db-xp-line.is-other { stroke-width: 2; opacity: 0.9; }
.db-xp-family:empty { display: none; }
.db-xp-family .db-xp-legend { margin-top: 4px; }

.db-pick {
    margin: 6px 0 4px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--db-line);
    background: var(--db-surface);
    --db-band: rgba(28, 176, 246, 0.24);
}
.db-pick[hidden] { display: none; }
.db-pick-head { display: grid; grid-template-columns: 28px 28px 1fr 28px 28px; align-items: center; gap: 2px; margin-bottom: 6px; }
.db-pick-title { text-align: center; font-size: 13px; font-weight: 800; }
.db-pick-nav {
    height: 28px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--db-blue);
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}
.db-pick-nav:hover:not(:disabled) { background: var(--db-band); }
.db-pick-nav:disabled { opacity: 0.3; cursor: default; }
/* no column gap, so the band between the two days reads as one strip */
.db-pick-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; }
.db-pick-week span { text-align: center; font-size: 10px; font-weight: 800; color: var(--db-muted); padding-bottom: 3px; }
.db-pick-day {
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--db-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.db-pick-day span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 1px auto;
    border-radius: 50%;
    transition: background 0.14s ease, color 0.14s ease;
}
.db-pick-day:hover:not(:disabled, .is-start, .is-end) span { background: var(--db-band); }
.db-pick-day.is-today span { box-shadow: inset 0 0 0 1.5px var(--db-blue); }
.db-pick-day:disabled { color: var(--db-muted); opacity: 0.35; cursor: default; }
.db-pick-day.is-in { background: var(--db-band); }
.has-band .db-pick-day.is-start { background: linear-gradient(to right, transparent 50%, var(--db-band) 50%); }
.has-band .db-pick-day.is-end { background: linear-gradient(to left, transparent 50%, var(--db-band) 50%); }
.db-pick-day.is-start span,
.db-pick-day.is-end span { background: var(--db-blue); color: #04222f; font-weight: 800; }
.db-pick-note { margin-top: 6px; text-align: center; font-size: 11px; font-weight: 700; color: var(--db-muted); }

/* ---- course flags, cut from Duolingo's own sprite ---- */
.db-course-flag {
    --db-flag-h: calc(24px * 66 / 82);
    width: 24px;
    height: var(--db-flag-h);
    border-radius: 5px;
    background-size: 24px auto;
    background-repeat: no-repeat;
    flex: none;
}
.db-course-flag.is-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--db-surface-2);
    border: 1px solid var(--db-line);
    color: var(--db-text);
    font-size: 10px;
    font-weight: 800;
}

/* ---- groups in Mods: green like the cards, not the blue of Speed ---- */
.db-mods-group .db-switch { --db-switch-on: var(--db-green); }
.db-section.db-mods-group.is-on {
    border-color: rgba(88, 204, 2, 0.55);
    box-shadow: 0 0 9px -2px rgba(88, 204, 2, 0.55);
}
.db-section.db-mods-group.is-on .db-label-state { color: var(--db-green); }
.db-mods-group .db-mods-buttons { margin-top: 4px; }

/* ---- selects: Duobot's own menu (enhanceSelect) ---- */
.db-select { position: relative; display: inline-flex; min-width: 0; }
.db-select > select { display: none !important; }
.db-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    height: 32px;
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: 11px;
    background: var(--db-surface-2, #2c3941);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
    color: var(--db-text, #f2f6f8);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease, filter 0.16s ease;
}
.db-select-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-select-btn::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border: solid var(--db-blue, #1cb0f6);
    border-width: 0 2.5px 2.5px 0;
    border-radius: 1px;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}
.db-select-btn[aria-expanded="true"]::after { transform: translateY(4px) rotate(225deg); }
.db-select-btn:hover { filter: brightness(1.1); }
.db-select-btn:active { transform: translateY(3px); box-shadow: none; }
.db-select-btn:focus-visible { outline: 2px solid var(--db-blue, #1cb0f6); outline-offset: 2px; }
.db-select-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.db-select-list {
    position: fixed;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(280px, 60vh);
    overflow-y: auto;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: var(--db-surface, #232f36);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    font-family: "din-round", "Nunito", ui-rounded, system-ui, sans-serif;
    transform-origin: top center;
    animation: db-select-in 0.16s cubic-bezier(0.2, 0.9, 0.1, 1);
}
.db-select-list.is-up { transform-origin: bottom center; }
@keyframes db-select-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.db-select-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--db-text, #f2f6f8);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.db-select-item:hover,
.db-select-item:focus-visible { outline: none; background: var(--db-surface-2, #2c3941); }
.db-select-item[aria-selected="true"] { color: var(--db-blue, #1cb0f6); background: rgba(28, 176, 246, 0.14); }
.db-select-item:disabled { opacity: 0.45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .db-select-list { animation: none; } }
.db-card > .db-action + .db-inline-toggle { margin-top: 10px; }