/* =============================================================
   OTP Server — Premium Light UI
   Shared by: public/index.html, views/mappings.ejs
   Light mode only (locked via color-scheme).
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
    color-scheme: light only;

    /* Surfaces */
    --bg:            #f6f7fb;
    --surface:       #ffffff;
    --surface-2:     #fbfcfe;
    --surface-3:     #f4f6fa;

    /* Lines */
    --border:        #e8eaf1;
    --border-2:      #dde1eb;
    --border-strong: #cdd3e0;

    /* Text */
    --text:          #0b1020;
    --text-2:        #4a5468;
    --text-3:        #8a93a8;
    --text-4:        #aab2c4;

    /* Brand */
    --brand:         #5b53e8;
    --brand-2:       #8b5cf6;
    --brand-deep:    #4338ca;
    --brand-soft:    #eef0ff;
    --brand-line:    #d9dcfb;
    --brand-ring:    rgba(91, 83, 232, .16);
    --grad-brand:    linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);

    /* Semantic */
    --ok:            #067a55;
    --ok-soft:       #e8faf2;
    --ok-line:       #a5e5cc;

    --warn:          #b45309;
    --warn-soft:     #fff8ea;
    --warn-line:     #f5d8a3;

    --danger:        #e11d48;
    --danger-deep:   #be123c;
    --danger-soft:   #fff0f4;
    --danger-line:   #fac4d2;

    /* Shape */
    --r-xs: 7px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Depth — indigo-tinted, layered. Tinted shadow reads richer than grey. */
    --sh-1: 0 1px 2px rgba(11, 16, 32, .04);
    --sh-2: 0 1px 2px rgba(11, 16, 32, .04), 0 4px 10px -2px rgba(70, 62, 180, .06);
    --sh-3: 0 1px 3px rgba(11, 16, 32, .05), 0 10px 26px -6px rgba(70, 62, 180, .10);
    --sh-4: 0 2px 6px rgba(11, 16, 32, .05), 0 22px 48px -12px rgba(70, 62, 180, .16);
    --sh-5: 0 8px 20px rgba(11, 16, 32, .07), 0 40px 80px -20px rgba(70, 62, 180, .22);
    /* crisp top highlight that sells the "glass" read */
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .9);

    /* Type */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    background-color: var(--bg);
    /* Mesh gradient — four low-opacity lobes read as depth, not colour */
    background-image:
        radial-gradient(900px 620px at  8%  -6%, rgba(99, 102, 241, .14), transparent 62%),
        radial-gradient(760px 520px at 98%   2%, rgba(6, 182, 212, .10),  transparent 58%),
        radial-gradient(820px 560px at 78% 100%, rgba(168, 85, 247, .11), transparent 60%),
        radial-gradient(680px 480px at 12% 104%, rgba(244, 63, 94, .07),  transparent 58%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "ss01";
}

/* Fine grain over the mesh — kills gradient banding, adds a printed feel */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .38;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 640; letter-spacing: -.02em; color: var(--text); }
p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
::selection { background: var(--brand-ring); }

svg { display: block; flex: none; }

/* ---------- Layout ---------- */
.shell {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 14px clamp(10px, 2vw, 20px) 28px;
}

.stack { display: grid; gap: 14px; }

/* ---------- Top bar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--sh-3), var(--sh-inset);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    color: #fff;
    border-radius: 10px;
    background: var(--grad-brand);
    box-shadow: 0 5px 14px -3px rgba(99, 102, 241, .5),
                inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* soft glow puddle under the mark */
.brand-mark::after {
    content: "";
    position: absolute;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--grad-brand);
    filter: blur(11px);
    opacity: .4;
    z-index: -1;
}

.brand-text { min-width: 0; }

.brand-text h1 {
    font-size: 14.5px;
    font-weight: 660;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-text .sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: -.005em;
}

.topbar-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 570;
    line-height: 1.2;
    letter-spacing: -.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s var(--ease), box-shadow .2s var(--ease),
                background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.btn:active { transform: translateY(.5px) scale(.994); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }

.btn-primary {
    color: #fff;
    background: var(--grad-brand);
    box-shadow: 0 1px 2px rgba(11, 16, 32, .1),
                0 6px 16px -4px rgba(99, 102, 241, .45),
                inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(11, 16, 32, .1),
                0 12px 26px -6px rgba(99, 102, 241, .55),
                inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* Ghost buttons get a soft top-lit gradient and a crisp inner highlight so
   they read as raised chips rather than flat outlined boxes. */
.btn-ghost {
    color: var(--text-2);
    background: linear-gradient(180deg, #ffffff, #f7f8fc);
    border-color: var(--border-2);
    box-shadow: var(--sh-1), inset 0 1px 0 #fff;
    font-weight: 600;
}

.btn-ghost:hover {
    color: var(--text);
    background: linear-gradient(180deg, #ffffff, #f2f4fb);
    border-color: #c7cddd;
    box-shadow: 0 4px 12px -3px rgba(70, 62, 180, .22), inset 0 1px 0 #fff;
    transform: translateY(-1px);
}

.btn-ghost:active { box-shadow: var(--sh-1), inset 0 1px 3px rgba(11, 16, 32, .1); }

/* ---------- Gradient action buttons ----------
   Each header action gets its own colour so the bar reads as a set of
   distinct actions rather than a row of grey chips. White label and icon,
   a colour-matched glow, and a brighter fill on hover. */
.btn-grad {
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}

.btn-grad svg { color: #fff; }

.btn-grad:hover { transform: translateY(-1px); }
.btn-grad:active { transform: translateY(0) scale(.985); }

/* violet — Mobile App */
.btn-violet {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 3px 10px -2px rgba(124, 58, 237, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-violet:hover {
    background: linear-gradient(135deg, #9a6cf8 0%, #7c33e6 100%);
    box-shadow: 0 8px 20px -4px rgba(124, 58, 237, .6), inset 0 1px 0 rgba(255, 255, 255, .32);
}

/* teal — Payment Helper */
.btn-teal {
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
    box-shadow: 0 3px 10px -2px rgba(13, 148, 136, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-teal:hover {
    background: linear-gradient(135deg, #3ee0cb 0%, #0ea89a 100%);
    box-shadow: 0 8px 20px -4px rgba(13, 148, 136, .6), inset 0 1px 0 rgba(255, 255, 255, .32);
}

/* indigo — Mappings */
.btn-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    box-shadow: 0 3px 10px -2px rgba(79, 70, 229, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-indigo:hover {
    background: linear-gradient(135deg, #757af5 0%, #4f43dc 100%);
    box-shadow: 0 8px 20px -4px rgba(79, 70, 229, .6), inset 0 1px 0 rgba(255, 255, 255, .32);
}

/* a gradient button whose file isn't uploaded yet */
.btn-grad.is-unavailable {
    background: linear-gradient(135deg, #cbd2e0, #aab2c4);
    box-shadow: none;
    border-style: none;
    opacity: .75;
    color: #fff;
}

.btn-danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.btn-danger:hover { color: #fff; background: var(--danger); border-color: var(--danger); box-shadow: 0 6px 16px -4px rgba(225, 29, 72, .45); }

.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* a download whose file isn't on the server yet — still clickable so the
   click can explain why, rather than silently doing nothing */
.btn.is-unavailable {
    opacity: .5;
    color: var(--text-4);
    border-style: dashed;
}
.btn.is-unavailable:hover { transform: none; box-shadow: var(--sh-1); }

/* ---------- Cards ---------- */
.card {
    position: relative;
    border-radius: var(--r-lg);
    background: var(--surface);
    /* gradient hairline: solid fill on padding-box, gradient on border-box */
    border: 1px solid transparent;
    background-image:
        linear-gradient(var(--surface), var(--surface)),
        linear-gradient(160deg, rgba(99, 102, 241, .3), rgba(226, 230, 240, .5) 42%, rgba(168, 85, 247, .22));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--sh-4), var(--sh-inset);
    overflow: hidden;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(248, 249, 253, .85));
}

.card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 640;
    letter-spacing: -.018em;
}

/* gradient icon tile in card headers */
.title-icon {
    display: grid;
    place-items: center;
    width: 25px; height: 25px;
    flex: none;
    border-radius: 8px;
    color: var(--brand);
    background: linear-gradient(160deg, #eef0ff, #f6f0ff);
    border: 1px solid var(--brand-line);
    box-shadow: var(--sh-inset);
}

.title-icon.alt { color: #0e7490; background: linear-gradient(160deg, #e8f7fb, #eef5ff); border-color: #bfe6f0; }

.card-body { padding: 20px; }
.card-sub { font-size: 12px; color: var(--text-3); font-weight: 500; }

.head-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- Per-message delete ----------
   Always visible: a light red glyph on a soft red chip. */
.msg-del {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    padding: 0;
    border: 1px solid var(--danger-line);
    border-radius: 7px;
    background: var(--danger-soft);
    color: #f2708c;
    cursor: pointer;
    transition: opacity .18s var(--ease), color .18s var(--ease),
                background-color .18s var(--ease), border-color .18s var(--ease),
                transform .16s var(--ease);
}

/* full danger styling only on the button itself */
.msg-del:hover,
.msg:hover .msg-del:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -2px rgba(225, 29, 72, .45);
}

.msg-del:active { transform: translateY(0) scale(.94); }

/* Per-SMS retry — same footprint as delete, brand-coloured, always visible
   so it's easy to hit when a phone missed its code. */
.msg-retry {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    padding: 0;
    border: 1px solid var(--brand-line);
    border-radius: 7px;
    background: var(--brand-soft);
    color: var(--brand);
    cursor: pointer;
    transition: color .18s var(--ease), background-color .18s var(--ease),
                border-color .18s var(--ease), transform .16s var(--ease);
}
.msg-retry:hover { color: #fff; background: var(--brand); border-color: var(--brand); transform: translateY(-1px); }
.msg-retry:active { transform: translateY(0) scale(.94); }
.msg-retry:disabled { cursor: progress; opacity: .6; }
.msg-retry.busy svg { animation: msg-retry-spin .8s linear infinite; }
@keyframes msg-retry-spin { to { transform: rotate(360deg); } }

.msg-del:focus-visible {
    opacity: 1;
    outline: none;
    color: var(--danger);
    border-color: var(--danger-line);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* fade the card out once the server confirms the delete */
.msg-removing {
    opacity: 0;
    transform: translateX(10px) scale(.98);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    pointer-events: none;
}

/* ---------- Pills ---------- */
.count-pill {
    display: inline-grid;
    place-items: center;
    min-width: 23px;
    height: 21px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, #f2f3ff, #eaecfe);
    border: 1px solid var(--brand-line);
    color: var(--brand-deep);
    font-size: 11.5px;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    box-shadow: var(--sh-inset);
}

/* Live status */
.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    border: 1px solid var(--border-2);
    background: rgba(255, 255, 255, .85);
    color: var(--text-2);
    box-shadow: var(--sh-1);
    transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.status-dot {
    position: relative;
    width: 8px; height: 8px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

.status.connecting { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.status.connected  { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.status.error      { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

/* static ring on the live dot — no endless animation (saves CPU) */
.status.connected .status-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: .35;
}

/* ---------- Avatar ---------- */
.avatar {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    flex: none;
    border-radius: 6px;
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    background: linear-gradient(140deg, var(--a, #6366f1), var(--b, #8b5cf6));
    box-shadow: 0 2px 6px -1px var(--a, rgba(99, 102, 241, .5)),
                inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ---------- OTP code token ----------
   Saturated red with white type. The earlier pale-pink wash read as weak;
   a solid fill makes the red look deliberate rather than washed out. */
.otp-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 8px 3px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 7px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 620;
    letter-spacing: .1em;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, #ff0000, #dd0000);
    box-shadow: 0 2px 7px -1px rgba(255, 0, 0, .45),
                inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.otp-chip:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ff2020, #f00000);
    box-shadow: 0 6px 16px -3px rgba(255, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .34);
}

.otp-chip:active { transform: translateY(0) scale(.985); }
.otp-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }

.otp-chip .otp-val { color: #fff; }
.otp-chip svg { opacity: .72; transition: opacity .2s var(--ease); }
.otp-chip:hover svg { opacity: 1; }

/* the OTP label picks up the red so the pair reads as one unit */
.otp-field .mk { color: #ff0000; }

.otp-chip.copied {
    background: linear-gradient(180deg, #10b981, #059669);
    box-shadow: 0 4px 12px -2px rgba(5, 150, 105, .45),
                inset 0 1px 0 rgba(255, 255, 255, .22);
}

.otp-chip.copied svg { opacity: .95; }

/* ---------- Tables ---------- */
.table-wrap { width: 100%; overflow-x: auto; }

table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }

table.data thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 11px 18px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.data tbody td { padding: 14px 18px; vertical-align: middle; border-bottom: 1px solid var(--border); }
table.data tbody tr { transition: background-color .18s var(--ease); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 7px; }

.label {
    font-size: 11px;
    font-weight: 660;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.input {
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-1);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}

.input::placeholder { color: var(--text-4); }
.input:hover { border-color: var(--border-strong); }
.input:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3.5px var(--brand-ring), var(--sh-1);
}

.form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
    align-items: end;
}

.form-actions { display: flex; gap: 9px; }

/* ---------- Feed ---------- */
.feed-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

/* container context for the message-row queries above */
.feed-pane { container-type: inline-size; container-name: feed; }

.feed {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: grid;
    gap: 7px;
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* ----- Full-height mode (.shell.fill — the inbox page) ----- */
body.app { height: 100vh; height: 100dvh; overflow: hidden; }

/* full width (like container-fluid): the two feeds use the whole screen */
.shell.fill { display: flex; flex-direction: column; height: 100%; padding-bottom: 14px; max-width: none; }
.shell.fill .topbar, .shell.fill .segmented { flex: none; }

.shell.fill .feed-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    grid-auto-rows: minmax(0, 1fr);
}

.shell.fill .feed-pane { display: flex; flex-direction: column; min-height: 0; }
.shell.fill .feed-pane > .card-head { flex: none; }
.shell.fill .feed { flex: 1 1 auto; min-height: 0; }

/* ---------- Message card ---------- */
.msg {
    position: relative;
    /* grid items default to min-width:auto, which lets an unbreakable string
       (base64 mail bodies, long URLs) stretch the card past its column */
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: var(--sh-1);
    transition: box-shadow .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease);
    animation: msg-in .38s var(--ease-out) both;
}

.msg:hover {
    border-color: transparent;
    background-image:
        linear-gradient(var(--surface), var(--surface)),
        linear-gradient(140deg, rgba(99, 102, 241, .45), rgba(168, 85, 247, .3));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--sh-3);
    transform: translateY(-2px);
}

@keyframes msg-in {
    from { opacity: 0; transform: translateY(-8px) scale(.995); }
    to   { opacity: 1; transform: none; }
}

.msg-top { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* "From … | To … | OTP …" strictly on one line. Values ellipsis rather
   than wrap — wrapping stranded the separators at the end of a line. */
.msg-meta {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    overflow: hidden;
}

/* key + value travel together so a wrap never splits a label from its value */
.mfield {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

/* label — same size as its value, distinguished by weight and colour */
.mk {
    flex: none;
    font-size: 12px;
    font-weight: 680;
    letter-spacing: -.01em;
    color: var(--text-3);
}

.mk::after { content: ":"; }

/* its value — truncates rather than pushing the row wide */
.mv {
    flex: 0 1 auto;
    min-width: 3ch;
    font-size: 12px;
    font-weight: 570;
    letter-spacing: -.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* hairline separator between fields */
.mdiv {
    flex: none;
    width: 1px;
    height: 11px;
    margin: 0 2px;
    border-radius: 1px;
    background: var(--border-2);
}

.otp-field {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Whether From/To/OTP fit on one line depends on the COLUMN width, not the
   viewport (two columns on desktop, one on mobile) — so this is a container
   query. When the column is narrow, the OTP drops to its own row instead of
   crushing the addresses to an unreadable "p…". */
@container feed (max-width: 560px) {
    /* wrap between fields, and drop the separators — a pipe stranded at the
       end of a wrapped line reads as a rendering fault */
    .msg-meta { flex-wrap: wrap; gap: 1px 12px; }
    .mdiv { display: none; }

    /* the long values (addresses) each take a row; the short date and the
       OTP are compact enough to share the row below them */
    .mfield { flex: 0 1 100%; }
    .date-field, .otp-field { flex: none; margin-top: 3px; }
}

/* the timestamp is short and fixed-width — never let it shrink or ellipsis */
.date-field { flex: none; }

/* From / To values copy on click — no icon, just a hover hint and a flash */
.mv-copy {
    cursor: copy;
    border-radius: 4px;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
.mv-copy:hover { color: var(--brand); text-decoration: underline dotted; text-underline-offset: 3px; }
.mv-copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-ring); }
.mv-copy.copied { color: #059669; background: #e7f8f0; text-decoration: none; }

.date-field .mv {
    flex: none;
    font-weight: 550;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.msg-subject {
    margin: 7px 0 0;
    font-size: 12.5px;
    font-weight: 620;
    line-height: 1.4;
    letter-spacing: -.012em;
    color: var(--text);
    overflow-wrap: anywhere;
}

.msg-body {
    margin-top: 7px;
    padding: 7px 9px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-radius: var(--r-xs);
    background: var(--surface-3);
    border: 1px solid var(--border);
    font-size: 11.5px;
    /* whole-pixel line box: 3 lines land on an exact boundary, so the clamp
       can't leak a sliver of a 4th line at fractional device pixel ratios */
    line-height: 17px;
    color: var(--text-2);
    cursor: pointer;

    /* Clamp to 3 lines — long machine-generated mail (base64 blobs, raw
       MIME) would otherwise eat an entire screen. Click toggles full text. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.msg-body.expanded { -webkit-line-clamp: unset; }
.msg-body { white-space: pre-line; overflow-wrap: anywhere; }
.msg-link { color: var(--brand); text-decoration: underline; }
.msg-link:hover { text-decoration: none; }
.msg-btn {
    display: inline-block;
    margin: 4px 0;
    padding: 5px 14px;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.msg-btn:hover { background: var(--brand-deep); }

.msg-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-att {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 11.5px;
    text-decoration: none;
}
.msg-att:hover { border-color: var(--brand); }
.msg-att svg { flex: none; }
.msg-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.msg-att-size { flex: none; color: var(--text-2); }

/* new-message state */
.msg.new {
    border-color: transparent;
    background-image:
        linear-gradient(180deg, #fbfaff, #fff),
        linear-gradient(140deg, rgba(99, 102, 241, .8), rgba(168, 85, 247, .45));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 0 3px var(--brand-ring), var(--sh-3);
    cursor: pointer;
    /* one-shot fade 20s after arrival, done by CSS — no JavaScript timer */
    animation: msg-in .38s var(--ease-out) both, new-end .34s var(--ease) 20s forwards;
}

@keyframes new-end {
    to { border-color: var(--border); background-image: none; background-color: var(--surface); box-shadow: var(--sh-1); }
}

/* ---------- OTP still valid (5 minutes) ---------- */
.msg.otp-live,
.msg.new.otp-live {
    border-color: var(--brand-line);
    border-left: 4px solid var(--brand);
    background: var(--brand-soft);
    background-image: none;
    box-shadow: 0 0 0 3px var(--brand-ring), var(--sh-2);
    /* one-shot fade when the OTP's 5 minutes are up: --otp-left is set per
       card when it is drawn, so no JavaScript timer runs */
    animation: msg-in .38s var(--ease-out) both, otp-live-end .4s var(--ease) var(--otp-left, 0s) forwards;
}
.msg.otp-live .msg-body {
    background: #f7f8ff;
    border-color: var(--brand-line);
    animation: otp-body-end .4s var(--ease) var(--otp-left, 0s) forwards;
}

/* ---------- SMS received in the last 5 minutes: green ---------- */
.msg.sms-live,
.msg.new.sms-live {
    border-color: var(--ok-line);
    border-left: 4px solid #10b981;
    background: var(--ok-soft);
    background-image: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .14), var(--sh-2);
    /* one-shot fade when its 5 minutes are up (--otp-left set per card) */
    animation: msg-in .38s var(--ease-out) both, otp-live-end .4s var(--ease) var(--otp-left, 0s) forwards;
}
.msg.sms-live .msg-body {
    background: #f3fcf8;
    border-color: var(--ok-line);
    animation: otp-body-end .4s var(--ease) var(--otp-left, 0s) forwards;
}

@keyframes otp-live-end {
    to {
        border-color: var(--border); border-left-color: var(--border); border-left-width: 1px;
        background-color: var(--surface); box-shadow: var(--sh-1);
    }
}
@keyframes otp-body-end {
    to { background-color: var(--surface-3); border-color: var(--border); }
}

/* OTP code chip size */
.otp-chip {
    height: 26px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 12.5px;
    line-height: 1;
    gap: 6px;
}

.msg.removing { transition: box-shadow .34s var(--ease), background .34s var(--ease); }

/* ---------- Infinite-scroll footers ---------- */
.feed-loader, .feed-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    font-size: 11.5px;
    font-weight: 550;
    color: var(--text-3);
}

.feed-end {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-4);
}

.feed-end::before, .feed-end::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-2), transparent);
}

.spinner {
    width: 14px; height: 14px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--border-2);
    border-top-color: var(--brand);
    animation: spin .62s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Empty state ---------- */

/* A feed holding nothing but the placeholder centres it, instead of leaving
   it stranded at the top of a full-height column. */
.feed.is-empty { align-content: center; }

.empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    padding: 36px 22px;
    text-align: center;
    color: var(--text-3);
}

.empty-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    margin-bottom: 12px;
    border-radius: 19px;
    color: var(--brand);
    background: linear-gradient(160deg, #ffffff, #f3f5ff);
    border: 1px solid var(--brand-line);
    box-shadow: var(--sh-3), var(--sh-inset);
}

/* soft halo so the tile reads as lit rather than pasted on */
.empty-icon::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 28px;
    background: radial-gradient(circle, rgba(99, 102, 241, .16), transparent 70%);
    z-index: -1;
}

.empty-icon svg { width: 26px; height: 26px; }

.empty strong {
    color: var(--text);
    font-weight: 640;
    font-size: 15px;
    letter-spacing: -.018em;
}

.empty span {
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 32ch;
    color: var(--text-3);
}

/* ---------- Skeleton ---------- */
.skeleton {
    height: 74px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: linear-gradient(100deg, var(--surface-3) 26%, #edeff6 40%, var(--surface-3) 56%);
    background-size: 220% 100%;
    animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

/* ---------- Notice ---------- */
.notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, #edfbf5, #f2fbff);
    border: 1px solid var(--ok-line);
    color: var(--ok);
    font-size: 13px;
    font-weight: 550;
    box-shadow: var(--sh-2), var(--sh-inset);
}

.notice-label { color: var(--text-2); font-weight: 620; }
.notice-value { font-family: var(--mono); font-weight: 620; letter-spacing: .01em; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .01em; }

/* ---------- Toast ---------- */
.toast-host {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 300;
    display: grid;
    gap: 10px;
    width: min(370px, calc(100vw - 40px));
    pointer-events: none;
}

.toast {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--border-2);
    box-shadow: var(--sh-5), var(--sh-inset);
    pointer-events: auto;
    animation: toast-in .38s var(--ease-out) both;
}

.toast.out { animation: toast-out .22s var(--ease) both; }

/* coloured icon tile carries the status, so the text stays readable */
.toast-icon {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: none;
    border-radius: 10px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.toast-icon svg { width: 18px; height: 18px; }

.toast-text { min-width: 0; }
.toast-title { font-size: 13px; font-weight: 680; color: var(--text); letter-spacing: -.01em; }
.toast-message { font-size: 12.5px; font-weight: 500; color: var(--text-2); overflow-wrap: anywhere; line-height: 1.45; }
.toast-title + .toast-message { margin-top: 1px; }

.toast-close {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: none;
    padding: 0; border: none; border-radius: 7px;
    background: transparent; color: var(--text-4);
    cursor: pointer;
    transition: color .16s var(--ease), background-color .16s var(--ease);
}
.toast-close svg { width: 14px; height: 14px; }
.toast-close:hover { color: var(--text); background: var(--surface-3); }

/* countdown bar along the bottom edge */
.toast-bar {
    position: absolute;
    left: 0; bottom: 0; height: 2.5px;
    width: 100%;
    transform-origin: left;
    animation: toast-countdown linear forwards;
}

@keyframes toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.toast-ok     .toast-icon { background: linear-gradient(135deg, #34d399, #059669); }
.toast-ok     .toast-bar  { background: linear-gradient(90deg, #34d399, #059669); }
.toast-danger .toast-icon { background: linear-gradient(135deg, #fb7185, #e11d48); }
.toast-danger .toast-bar  { background: linear-gradient(90deg, #fb7185, #e11d48); }
.toast-warn   .toast-icon { background: linear-gradient(135deg, #fbbf24, #d97706); }
.toast-warn   .toast-bar  { background: linear-gradient(90deg, #fbbf24, #d97706); }
.toast-info   .toast-icon { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.toast-info   .toast-bar  { background: linear-gradient(90deg, #818cf8, #4f46e5); }

@keyframes toast-in  { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(16px) scale(.97); } }

/* ---------- Confirm dialog ---------- */
.ui-backdrop {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(13, 18, 34, .42);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    animation: ui-fade .18s var(--ease) both;
}
.ui-backdrop.closing { animation: ui-fade .16s var(--ease) reverse both; }

@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }

.ui-dialog {
    width: min(420px, 100%);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 30px 70px -20px rgba(13, 18, 34, .45), var(--sh-inset);
    overflow: hidden;
    animation: ui-pop .3s var(--ease-out) both;
}
.ui-backdrop.closing .ui-dialog { animation: ui-pop .16s var(--ease) reverse both; }

@keyframes ui-pop {
    from { opacity: 0; transform: translateY(12px) scale(.95); }
    to   { opacity: 1; transform: none; }
}

.ui-dialog-body { padding: 26px 26px 20px; text-align: center; }

.ui-dialog-icon {
    position: relative;
    display: grid; place-items: center;
    width: 58px; height: 58px;
    margin: 0 auto 15px;
    border-radius: 18px;
    color: #fff;
}
.ui-dialog-icon svg { width: 26px; height: 26px; }

/* halo behind the icon, tinted to match the tone */
.ui-dialog-icon::after {
    content: "";
    position: absolute; inset: -10px;
    border-radius: 26px;
    z-index: -1;
    opacity: .3;
}

.tone-danger .ui-dialog-icon { background: linear-gradient(140deg, #fb7185, #e11d48); box-shadow: 0 8px 20px -6px rgba(225, 29, 72, .6); }
.tone-danger .ui-dialog-icon::after { background: radial-gradient(circle, rgba(225,29,72,.5), transparent 70%); }
.tone-warn   .ui-dialog-icon { background: linear-gradient(140deg, #fbbf24, #d97706); box-shadow: 0 8px 20px -6px rgba(217, 119, 6, .6); }
.tone-warn   .ui-dialog-icon::after { background: radial-gradient(circle, rgba(217,119,6,.5), transparent 70%); }
.tone-brand  .ui-dialog-icon { background: linear-gradient(140deg, #818cf8, #4f46e5); box-shadow: 0 8px 20px -6px rgba(79, 70, 229, .6); }
.tone-brand  .ui-dialog-icon::after { background: radial-gradient(circle, rgba(79,70,229,.5), transparent 70%); }

.ui-dialog-title {
    margin: 0 0 7px;
    font-size: 18px; font-weight: 720; letter-spacing: -.025em;
    color: var(--text);
}
.ui-dialog-message {
    font-size: 13.5px; line-height: 1.55; color: var(--text-2);
    max-width: 34ch; margin: 0 auto;
}

/* highlighted supporting line, e.g. the exact thing being deleted */
.ui-dialog-detail {
    margin-top: 13px;
    padding: 9px 13px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 12.5px; font-weight: 600; color: var(--text);
    overflow-wrap: anywhere;
}

.ui-dialog-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 20px 20px;
}

.ui-btn {
    padding: 11px 16px;
    border-radius: var(--r-sm);
    font: inherit; font-size: 13.5px; font-weight: 640;
    cursor: pointer;
    transition: transform .14s var(--ease), box-shadow .18s var(--ease),
                background-color .18s var(--ease), border-color .18s var(--ease);
}
.ui-btn:active { transform: translateY(0) scale(.985); }
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }

.ui-btn-cancel {
    background: #fff;
    border: 1px solid var(--border-2);
    color: var(--text-2);
}
.ui-btn-cancel:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }

.ui-btn-confirm { border: none; color: #fff; }
.ui-btn-confirm:hover { transform: translateY(-1px); }

.tone-danger .ui-btn-confirm {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 5px 14px -4px rgba(225, 29, 72, .55), inset 0 1px 0 rgba(255,255,255,.25);
}
.tone-danger .ui-btn-confirm:hover { box-shadow: 0 9px 22px -5px rgba(225, 29, 72, .65), inset 0 1px 0 rgba(255,255,255,.3); }

.tone-warn .ui-btn-confirm {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 5px 14px -4px rgba(217, 119, 6, .55), inset 0 1px 0 rgba(255,255,255,.25);
}

.tone-brand .ui-btn-confirm {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow: 0 5px 14px -4px rgba(79, 70, 229, .55), inset 0 1px 0 rgba(255,255,255,.25);
}

@media (max-width: 480px) {
    .ui-dialog-foot { grid-template-columns: 1fr; }
    /* primary action on top when stacked */
    .ui-btn-confirm { order: -1; }
}

/* ---------- Segmented control ---------- */
.segmented {
    display: none;
    position: relative;
    padding: 5px;
    gap: 5px;
    margin-bottom: 16px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-2);
    box-shadow: var(--sh-2), var(--sh-inset);
}

.segmented button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border: none;
    border-radius: var(--r-xs);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}

.segmented button[aria-selected="true"] {
    background: #fff;
    color: var(--brand-deep);
    box-shadow: var(--sh-2);
}

/* ---------- Scrollbars ---------- */
.feed::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 11px; height: 11px; }

.feed::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb {
    background: #d3d8e6;
    border: 3px solid transparent;
    border-radius: var(--r-pill);
    background-clip: content-box;
}

.feed::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover { background: #b9c0d4; background-clip: content-box; }
.feed::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: transparent; }

/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 1024px) {
    .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .form-grid .form-actions { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .feed-grid { grid-template-columns: minmax(0, 1fr); }
    .segmented { display: flex; }
    .feed-grid.tabbed > .feed-pane { display: none; }
    .feed-grid.tabbed > .feed-pane.active { display: block; }
    .shell.fill .feed-grid.tabbed > .feed-pane.active { display: flex; }
}

@media (max-width: 720px) {
    body { font-size: 13.5px; }

    .shell { padding: 12px 12px 32px; }
    .shell.fill { padding-bottom: 12px; }

    .topbar { position: static; padding: 12px 14px; border-radius: var(--r-md); }
    .topbar-actions { width: 100%; justify-content: space-between; }

    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-actions .btn { flex: 1; }

    /* tables collapse into stacked cards */
    .table-wrap { overflow-x: visible; }

    table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
    table.data thead { display: none; }

    table.data tbody tr {
        width: auto;
        margin: 12px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--surface);
        box-shadow: var(--sh-2);
        overflow: hidden;
    }

    table.data tbody tr:hover { background: var(--surface); }

    table.data tbody td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 11px 14px;
        border-bottom: 1px solid var(--border);
    }

    table.data tbody td:last-child { border-bottom: none; }

    table.data tbody td::before {
        content: attr(data-label);
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: var(--text-4);
        padding-top: 3px;
    }

    table.data tbody td:empty { display: none; }

    .toast-host { right: 12px; left: 12px; bottom: 12px; }
    .toast { justify-content: center; }
}

/* short viewports: stay locked to the display, reclaim height from chrome */
@media (max-height: 560px) {
    .shell.fill { padding-top: 10px; padding-bottom: 10px; }
    .shell.fill .topbar { padding: 8px 14px; margin-bottom: 10px; }
    .shell.fill .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
    .shell.fill .brand-mark::after { display: none; }
    .shell.fill .brand-text .sub { display: none; }
    .shell.fill .segmented { margin-bottom: 10px; }
    .shell.fill .card-head { padding: 9px 16px; }
    .shell.fill .feed { padding: 9px; gap: 9px; }
}

@media (max-width: 420px) {
    .brand-mark { width: 36px; height: 36px; }
    .brand-text h1 { font-size: 15px; }
    table.data tbody td { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    body { background: #fff; }
    body::before, .topbar, .btn, .toast-host { display: none !important; }
    .card { box-shadow: none; }
}

/* rose — Admin (header) */
.btn-rose {
    background: linear-gradient(135deg, #fb7185 0%, #be123c 100%);
    box-shadow: 0 3px 10px -2px rgba(225, 29, 72, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-rose:hover {
    background: linear-gradient(135deg, #fd8798 0%, #d01243 100%);
    box-shadow: 0 8px 20px -4px rgba(225, 29, 72, .6), inset 0 1px 0 rgba(255, 255, 255, .32);
}

/* the sign-out form must not disturb the header's flex row */
.logout-form { display: inline-flex; margin: 0; }

/* ---------- Per-feed search ---------- */
.feed-search {
    flex: 1 1 180px;
    max-width: 280px;
    min-width: 0;
    margin: 0 10px 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--text-2);
    cursor: text;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.feed-search:focus-within,
.feed-search.active {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: 0 0 0 3px var(--brand-ring);
    color: var(--brand);
}
.feed-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--text);
}
.feed-search-input::placeholder { color: var(--text-3); }

/* ---------- Resend all (feed header) ---------- */
.resend-min {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 8px 0 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-3);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
}
.resend-min-input {
    width: 42px;
    height: 22px;
    border: 0;
    border-radius: 5px;
    background: #fff;
    text-align: center;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}
.resend-min-input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-ring); }
.resend-min:focus-within { border-color: var(--brand); }
.resend-all {
    flex: none;
    margin-right: auto;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
}
.resend-all:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.resend-all:disabled { cursor: progress; opacity: .7; }
.resend-all.busy svg { animation: msg-retry-spin .8s linear infinite; }   /* only while the request runs */

/* ---------- "Resent" badge next to the OTP ---------- */
.resent-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.resent-badge.pop { animation: resent-pop .32s var(--ease-out) 1; }
@keyframes resent-pop {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: none; opacity: 1; }
}