/* ============================================================
   Prism Mobile — Priority 4 product styles

   Source: design_handoff_prism_search/mobile-styles.css. All
   selectors are scoped to .m-* class names so they don't collide
   with desktop AppShell. Loaded once from App.razor; mobile pages
   add no scoped CSS (the whole product is a single sheet).
   ============================================================ */

/* ── Horizontal-overflow guard ─────────────────────────────────────
   There was no global overflow-x guard, so a single over-wide element
   (a long unbreakable number, a 2-col grid column that won't shrink,
   an off-screen drawer, …) gave the whole page a horizontal scroll and
   the tell-tale red strip on the right. overflow-x: clip (NOT hidden)
   kills it without creating a scroll container — so position:sticky
   (the detail back-bar, the sheet close button) keeps working. */
@media (max-width: 768px) {
    html, body {
        overflow-x: clip;
        max-width: 100%;
    }
    /* app.css sets `html { scrollbar-gutter: stable }` to stop content jumping
       when a desktop scrollbar appears. On a phone scrollbars are OVERLAY
       (zero-width), so `stable` permanently reserves ~15px that nothing fills —
       and a full-screen position:fixed panel (the login) covers only clientWidth,
       leaving that gutter showing the page bg as a vertical white strip on the
       right. Overlay scrollbars don't need the reservation, so turn it off. */
    html { scrollbar-gutter: auto; }
}

/* ---- shared utility ---- */
.m-home,
.m-results,
.m-company,
.m-court,
.m-graph-page,
.m-feed { width: 100%; max-width: 100%; min-width: 0; }

.m-home .mono,
.m-results .mono,
.m-company .mono,
.m-court .mono,
.m-graph-page .mono,
.m-feed .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

.m-home .small,
.m-results .small,
.m-company .small,
.m-court .small,
.m-graph-page .small,
.m-feed .small { font-size: 11px; }

.m-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.m-empty p { margin: 0; line-height: 1.5; }

/* ── Loading spinners ─────────────────────────────────────────────
   A real animated spinner so it's always obvious data is still loading.
   .m-loading (graph «Будуємо граф…», home «Завантажуємо…») gets one for
   free via ::before; .m-spinner is a reusable inline variant; .m-sec-spin
   fills a section-row count slot while the preloader fetches that tab. */
@keyframes m-spin { to { transform: rotate(360deg); } }

.m-loading {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.m-loading::before {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(91, 87, 219, 0.22);
    border-top-color: #5B57DB;
    animation: m-spin 0.7s linear infinite;
}

.m-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(91, 87, 219, 0.22);
    border-top-color: #5B57DB;
    animation: m-spin 0.7s linear infinite;
    vertical-align: middle;
}
.m-spinner--sm { width: 16px; height: 16px; border-width: 2px; }

.m-sec-spin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(91, 87, 219, 0.22);
    border-top-color: #5B57DB;
    animation: m-spin 0.7s linear infinite;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .m-loading::before,
    .m-spinner,
    .m-sec-spin { animation-duration: 1.6s; }
}

.m-empty-detail {
    margin-top: 8px !important;
    padding: 8px 12px;
    background: var(--surface);
    border-radius: 8px;
    color: var(--muted);
    word-break: break-word;
    text-align: left;
    max-height: 168px;
    overflow: auto;
}

/* Friendly one-line reason shown above the collapsible raw error. */
.m-empty-reason {
    margin: 6px 0 0 !important;
    color: var(--body);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Raw upstream error tucked behind a disclosure so the user sees a clean
   message, not an nginx 502 dump. */
.m-empty-tech {
    margin-top: 12px;
    text-align: left;
}
.m-empty-tech summary {
    cursor: pointer;
    color: var(--muted);
    font: 500 12px/1.4 var(--font-mono);
    text-align: center;
}

.m-empty-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.m-empty-actions .m-chip {
    text-decoration: none;
}

/* ============================================================
   M-01 · Home / Search start
   ============================================================ */
.m-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 18px;
}
.m-greeting > span {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: lowercase;
}
.m-greeting h2 {
    font-size: 28px;
    margin: 4px 0 0;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.m-greeting em { color: var(--indigo-600); font-style: normal; }

.m-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--amber);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    border: 0;
    cursor: pointer;
}

.m-search-cta {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid var(--ink);
    border-radius: 14px;
    box-shadow: 0 6px 18px -10px rgba(27, 23, 80, 0.2);
    margin-bottom: 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
}
.m-search-icon { font-size: 20px; color: var(--muted); }
/* In the results search bar the icon is a submit <button>; reset chrome. */
.m-search-bar .m-search-icon {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}
.m-search-ph { font-size: 14px; color: var(--muted); }

.m-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 14px;
    margin-bottom: 6px;
    scrollbar-width: none;
}
.m-chip-row::-webkit-scrollbar { display: none; }
.m-chip {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--border-2);
    padding: 8px 14px;
    border-radius: 100px;
    color: var(--body);
    white-space: nowrap;
    cursor: pointer;
}
.m-chip:hover { border-color: var(--indigo-400); color: var(--indigo-600); }

.m-alert {
    width: 100%;
    background: linear-gradient(180deg, rgba(199, 55, 47, 0.08), rgba(199, 55, 47, 0.02));
    border: 1px solid rgba(199, 55, 47, 0.18);
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 10px 1fr 32px;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
}
.m-alert-dot {
    width: 10px; height: 10px;
    background: var(--coral);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(199, 55, 47, 0.15);
}
.m-alert-body { display: flex; flex-direction: column; gap: 2px; }
.m-alert-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.m-alert-sub { font-size: 12px; color: var(--body); line-height: 1.4; }
.m-alert-go {
    width: 32px; height: 32px;
    background: var(--coral);
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.m-section { margin-top: 4px; }
.m-section-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 4px 12px;
}
.m-section-h h3 { font-size: 17px; margin: 0; font-weight: 600; }
.m-link { font-size: 13px; color: var(--indigo-600); font-weight: 500; cursor: pointer; text-decoration: none; }
.m-link:hover { text-decoration: underline; }

.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-list-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
}
.m-list-item:active { transform: scale(.985); transition: transform .1s; }
.m-li-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.m-li-meta b { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-li-meta span,
.m-li-meta small { font-size: 11px; color: var(--muted); }
.m-score {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    flex-shrink: 0;
    min-width: 50px;
    text-align: center;
}
.m-score.red    { background: var(--coral-bg); color: var(--coral); }
.m-score.amber  { background: var(--amber-bg); color: var(--amber); }
.m-score.green  { background: var(--forest-bg); color: var(--forest); }
/* No cached verdict / stale (>7d) — muted, no fake number. */
.m-score.none   { background: var(--surface); color: var(--muted); font-weight: 500; }
.m-score.stale  { background: var(--surface); color: var(--muted); font-size: 15px; }

/* Quick actions — 2×2 tile grid under recents so Home never bottoms out
   on empty space. */
.m-quick {
    display: grid;
    /* minmax(0,1fr) — a plain 1fr is minmax(auto,1fr), so a long
       unbreakable label could push the column (and the page) wider than
       the viewport. The 0-min lets the column shrink instead. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}
.m-quick-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
}
.m-quick-tile:active { transform: scale(.985); transition: transform .1s; }
.m-quick-ic {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--indigo-50);
    color: var(--indigo-600);
    font-size: 18px;
}
.m-quick-l { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }


/* ============================================================
   M-02 · Search results
   ============================================================ */
.m-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 14px;
    margin: 10px 0 14px;
}
.m-back {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    color: var(--ink);
    padding: 4px 6px 4px 0;
}
.m-search-input {
    flex: 1;
    border: 0;
    outline: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    background: transparent;
    min-width: 0;
}
.m-clear {
    width: 22px; height: 22px;
    background: var(--surface);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    color: var(--muted);
}

.m-filter-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 14px;
    scrollbar-width: none;
}
.m-filter-row::-webkit-scrollbar { display: none; }
.m-fchip {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--border-2);
    padding: 6px 12px;
    border-radius: 100px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--body);
}
.m-fchip b { font-weight: 700; color: var(--ink); margin-left: 3px; font-family: var(--font-mono); }
.m-fchip.on,
.m-fchip.is-on {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.m-fchip.on b,
.m-fchip.is-on b { color: #fff; }

.m-results-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 8px;
}
.m-results-h .mono { font-size: 10px; color: var(--muted); letter-spacing: 0.12em; }
.m-sort {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    color: var(--indigo-600);
    font-weight: 500;
    font-family: var(--font-sans);
}

.m-results { gap: 8px; }
.m-result {
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.m-result-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}
.m-result-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.m-result-dim { opacity: 0.65; }

/* Mini badges reused inside cards (mirrors handoff .badge .badge-sm) */
.m-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 100px;
    line-height: 1.4;
}
.m-badge--green  { background: var(--forest-bg); color: var(--forest); }
.m-badge--amber  { background: var(--amber-bg);  color: var(--amber); }
.m-badge--red    { background: var(--coral-bg);  color: var(--coral); }
.m-badge--neutral{ background: var(--surface);   color: var(--muted); }

.m-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Source badges (Знайдено в: ЄДР · ВП N) */
.m-sources-label { font-size: 11px; color: var(--muted); }
.m-source {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    font-feature-settings: "tnum" 1;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--surface);
    color: var(--body);
}
.m-source--edr     { background: var(--indigo-50); color: var(--indigo-800); }
.m-source--vp      { background: var(--amber-bg);  color: var(--amber); }
.m-source--court   { background: var(--coral-bg);  color: var(--coral); }
.m-source--mvs     { background: var(--coral-bg);  color: var(--coral); }
.m-source--decl    { background: var(--forest-bg); color: var(--forest); }
.m-source--license { background: var(--forest-bg); color: var(--forest); }

/* Collapsible PEP / indirect matches */
.m-pep {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
}
.m-pep-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}
.m-pep-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--amber-bg);
    color: var(--amber);
    font-size: 13px;
    flex-shrink: 0;
}
.m-pep-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.m-pep-count { font-size: 12px; color: var(--muted); }
.m-pep-chev { margin-left: auto; color: var(--muted); font-size: 12px; }
.m-pep .m-list { padding: 0 10px 10px; }

/* ============================================================
   M-03 · Company card
   ============================================================ */
.m-c-header {
    display: flex;
    align-items: center;
    padding: 8px 0 14px;
    gap: 12px;
}
.m-c-header > .mono {
    color: var(--muted);
    letter-spacing: 0.12em;
    flex: 1;
    font-size: 11px;
}
.m-c-actions { display: flex; gap: 4px; }
.m-c-icon {
    width: 32px; height: 32px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    color: var(--body);
}
.m-c-icon:hover { background: var(--surface); }
.m-c-icon.is-star-on { color: #C9870F; }   /* ★ filled = saved (bookmark) */
.m-c-icon.is-bell-on { color: #5B57DB; }   /* 🔔 tinted = monitoring on */
.m-c-icon:disabled { opacity: 0.5; cursor: default; }

.m-c-hero { padding: 6px 4px 18px; }
.m-c-badges { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.m-c-name {
    font-size: 28px;
    line-height: 1.12;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.022em;
    overflow-wrap: anywhere;
}
/* Full legal name under the abbreviated hero name — small, grey, mono. */
.m-c-fullname {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}
.m-c-edr {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}
.m-c-edr b { color: var(--ink); font-weight: 600; }

.m-c-risk {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}
.m-c-meter { position: relative; width: 100px; height: 100px; }
.m-c-meter-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 600;
    font-family: var(--font-mono);
}
.m-c-meter-val.tone-green  { color: var(--forest); }
.m-c-meter-val.tone-amber  { color: var(--amber); }
.m-c-meter-val.tone-red    { color: var(--coral); }
.m-c-risk-h {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
}
.m-c-risk-h.tone-green { color: var(--forest); }
.m-c-risk-h.tone-amber { color: var(--amber); }
.m-c-risk-h.tone-red   { color: var(--coral); }
.m-c-risk-sub { color: var(--muted); margin-bottom: 8px; font-size: 11px; font-family: var(--font-mono); }

/* «Як рахується?» — opens the breakdown sheet (disclaimer + methodology live
   there, not in the main view). Spans both grid columns, below the meter. */
.m-c-risk-method {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 4px 0 0;
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
    font: 600 13px/1.3 var(--font-sans);
    color: var(--indigo-600, #5B57DB);
    cursor: pointer;
}
.m-c-risk-method:active { opacity: 0.7; }
.tx-coral { color: var(--coral); }
.m-c-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.m-c-flags li {
    font-size: 11px;
    color: var(--body);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.35;
}
.flag-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.flag-red   { background: var(--coral); }
.flag-amber { background: var(--amber); }
.flag-green { background: var(--forest); }

.m-c-sections {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.m-c-sec {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
}
.m-sec-l { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.m-sec-ic {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.m-sec-ic-red    { background: var(--coral-bg); color: var(--coral); }
.m-sec-ic-amber  { background: var(--amber-bg); color: var(--amber); }
.m-sec-ic-green  { background: var(--forest-bg); color: var(--forest); }
.m-sec-ic-indigo { background: var(--indigo-50); color: var(--indigo-600); }
.m-sec-ic-mute   { background: var(--surface); color: var(--muted); }
.m-sec-l b { font-size: 14px; color: var(--ink); font-weight: 600; display: block; line-height: 1.2; }
.m-sec-l small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.m-sec-count {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    min-width: 36px;
    text-align: center;
}
.count-red    { background: var(--coral-bg); color: var(--coral); }
.count-amber  { background: var(--amber-bg); color: var(--amber); }
.count-green  { background: var(--forest-bg); color: var(--forest); }
.count-indigo { background: var(--indigo-50); color: var(--indigo-600); }
.m-sec-arrow { color: var(--muted); font-size: 14px; }

/* ============================================================
   M-04 · Court detail
   ============================================================ */
.m-cd-hero { padding: 10px 4px 20px; }
.m-cd-hero > .m-badge { margin-right: 6px; margin-bottom: 12px; }
.m-cd-num {
    font-size: 30px;
    font-weight: 700;
    margin: 4px 0 8px;
    letter-spacing: -0.012em;
    font-family: var(--font-mono);
}
.m-cd-desc { font-size: 16px; color: var(--ink); margin: 0 0 6px; font-weight: 500; line-height: 1.35; }
.m-cd-court { font-size: 12px; color: var(--muted); margin: 0; }

.m-cd-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.m-cd-meta > div {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.m-cd-meta span { font-size: 9px; letter-spacing: 0.14em; color: var(--muted); }
.m-cd-meta b { font-size: 14px; font-weight: 600; color: var(--ink); }
.m-cd-meta b.mono { font-size: 16px; font-family: var(--font-mono); }

.m-cd-banner {
    background: linear-gradient(180deg, rgba(184, 110, 15, 0.1), rgba(184, 110, 15, 0.02));
    border: 1px solid rgba(184, 110, 15, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}
.m-cd-banner-dot { width: 10px; height: 10px; background: var(--amber); border-radius: 50%; }
.m-cd-banner-h { font-size: 14px; font-weight: 600; color: var(--ink); }
.m-cd-banner-h em { color: var(--amber); font-style: normal; }
.m-cd-banner-s { font-size: 11px; color: var(--body); margin-top: 3px; line-height: 1.4; }

.m-cd-timeline {
    list-style: none;
    margin: 0;
    padding: 8px 0 20px;
    position: relative;
}
.m-cd-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 30px;
    width: 1.5px;
    background: var(--border);
}
.m-cd-timeline li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    padding: 8px 0;
    position: relative;
}
.m-tl-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border-2);
    margin-top: 6px;
    z-index: 1;
}
.m-tl-dot-active {
    background: var(--coral);
    border-color: var(--coral);
    box-shadow: 0 0 0 4px rgba(199, 55, 47, 0.18);
}
.m-tl-dot-future {
    background: #fff;
    border-style: dashed;
}
.m-tl-body { display: flex; flex-direction: column; gap: 2px; }
.m-tl-date { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; font-family: var(--font-mono); }
.m-tl-body b { font-size: 14px; font-weight: 600; color: var(--ink); }
.m-tl-body small { font-size: 12px; color: var(--body); }
.m-cd-timeline li.future b,
.m-cd-timeline li.future small { color: var(--muted); }

.m-cd-actions {
    display: flex;
    gap: 10px;
    padding: 10px 0 6px;
}
.m-cd-actions button {
    flex: 1;
    padding: 12px 14px;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
.m-cd-actions .m-btn-primary {
    background: var(--indigo-600);
    color: #fff;
    border: 0;
}
.m-cd-actions .m-btn-secondary {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border-2);
}

/* ============================================================
   M-05 · Graph (mobile radial — full-height, no desktop toolbar)
   ============================================================ */
.m-graph-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 56px compact header — back + title + 3 icons (filters / export / share) */
.m-graph-header {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    flex-shrink: 0;
}
.m-graph-htitle {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-graph-hicons { display: flex; gap: 2px; flex-shrink: 0; }
.m-graph-hbtn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--body);
    font-size: 18px;
    cursor: pointer;
}
.m-graph-hbtn:active { background: var(--surface); }

/* 44px horizontal filter chips */
.m-graph-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.m-graph-chips::-webkit-scrollbar { display: none; }
.m-fchip--amber.on { background: var(--amber); border-color: var(--amber); color: #fff; }

/* canvas stage — hosts the d3 graph; explicit height so the d3 engine can read
   clientWidth/clientHeight and the stats bar sits right under it. */
.m-graph-stage {
    flex: 0 0 auto;
    height: 62vh;
    max-height: 540px;
    min-height: 320px;
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.m-graph-d3 { width: 100%; height: 100%; touch-action: none; }
.m-graph-hint {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 10px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.85);
    padding: 3px 9px;
    border-radius: 100px;
    pointer-events: none;
    white-space: nowrap;
}
.m-graph-center-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.m-graph-zoom {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}
.m-graph-zoom button {
    width: 32px; height: 32px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--body);
}

/* 32px thin stats bar (sits above the bottom-nav) */
.m-graph-statbar {
    flex-shrink: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--body);
}
.m-graph-stats-sep { color: var(--border-2); }
.m-graph-showall {
    border: 0;
    background: var(--indigo-50);
    color: var(--indigo-600);
    font: 600 11px/1 var(--font-sans);
    padding: 5px 10px;
    border-radius: 100px;
    cursor: pointer;
}
.m-graph-showall:active { background: var(--indigo-100); }

/* Node-detail bottom-sheet — a real slide-up overlay (drag the handle down to
   close; see mobile-interactions.js). The backdrop's [data-sheet-close] click
   is wired to Blazor CloseSheet. */
.m-graph-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(20, 18, 50, 0.32);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: m-fade-in 0.18s ease;
}
.m-graph-sheet,
.m-search-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 -12px 40px -12px rgba(20, 18, 50, 0.25);
    will-change: transform;
    animation: m-sheet-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    touch-action: none;
}

/* «Новий пошук» sheet (FAB) — 4 search types, mirrors the desktop + menu. */
.m-ss-h {
    margin: 2px 0 6px;
    font: 700 17px/1.2 var(--font-sans);
    color: var(--ink);
    text-align: center;
}
.m-ss-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 8px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
}
.m-ss-item:last-child { border-bottom: 0; }
.m-ss-item:active { background: var(--surface); }
.m-ss-ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}
.m-ss-ic--indigo { background: var(--indigo-600, #5B57DB); }
.m-ss-ic--amber  { background: var(--amber-600, #C9870F); }
.m-ss-ic--forest { background: var(--forest, #3A7A2E); }
.m-ss-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-ss-text b { font: 600 14px/1.25 var(--font-sans); color: var(--ink); }
.m-ss-text small { font-size: 12px; color: var(--muted); line-height: 1.3; }
@keyframes m-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes m-fade-in { from { opacity: 0; } to { opacity: 1; } }

.m-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border-2);
    border-radius: 100px;
    /* visible bar stays 40×4 (content-box) but the hit area is padded out so
       the drag-to-close gesture is easy to grab. */
    margin: 0 auto 6px;
    padding: 9px 28px;
    box-sizing: content-box;
    background-clip: content-box;
    cursor: grab;
}
.m-sheet-head { display: flex; justify-content: space-between; align-items: center; }
.m-sheet-name { font-size: 20px; margin: 4px 0 0; font-weight: 700; letter-spacing: -0.012em; }
.m-sheet-edr { color: var(--muted); font-size: 11px; font-family: var(--font-mono); }
.m-sheet-actions { display: flex; gap: 8px; margin-top: 6px; }
.m-sheet-actions .m-btn-primary {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--indigo-600);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 500;
}

/* ---- Filter bottom-sheet (⚙ on the graph) ---- */
.m-gf-group { display: flex; flex-direction: column; margin-top: 12px; }
.m-gf-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 4px;
}
.m-gf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
}
.m-gf-row:last-child { border-bottom: 0; }
.m-gf-row input { width: 18px; height: 18px; accent-color: var(--indigo-600); flex-shrink: 0; }
.m-gf-row > span:first-of-type { flex: 1; }
.m-gf-row.is-disabled { opacity: 0.45; }
.m-gf-count { color: var(--muted); font-size: 12px; font-family: var(--font-mono); }
.m-gf-pep {
    font-size: 10px;
    font-weight: 600;
    color: var(--amber);
    background: var(--amber-bg);
    padding: 1px 6px;
    border-radius: 100px;
    margin-left: 6px;
}
.m-gf-note { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 4px 0 8px; }
.m-gf-desktop { font-size: 13px; color: var(--indigo-600); font-weight: 500; text-decoration: none; }
.m-gf-done {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    background: var(--indigo-600);
    color: #fff;
    border: 0;
    font: 600 14px/1 var(--font-sans);
    cursor: pointer;
}

/* ============================================================
   M-06 · Feed
   ============================================================ */
.m-feed-head {
    display: flex;
    align-items: center;
    padding: 8px 0 16px;
    gap: 12px;
}
.m-feed-head h2 {
    font-size: 28px;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex: 1;
}
.m-feed-head h2 .mono {
    font-size: 14px;
    background: var(--coral-bg);
    color: var(--coral);
    padding: 3px 10px;
    border-radius: 100px;
    margin-left: 8px;
    vertical-align: middle;
}

.m-feed-group {
    padding: 4px 4px 8px;
}
.m-feed-group .mono {
    color: var(--muted);
    letter-spacing: 0.12em;
    font-size: 10px;
    text-transform: uppercase;
}

.m-feed-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.m-feed-card {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 4px 1fr;
    gap: 14px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
}
.m-feed-rail { background: var(--border-2); }
.m-feed-card.feed-red   .m-feed-rail { background: var(--coral); }
.m-feed-card.feed-amber .m-feed-rail { background: var(--amber); }
.m-feed-card.feed-green .m-feed-rail { background: var(--forest); }
.m-feed-body { padding: 12px 14px 12px 0; display: flex; flex-direction: column; gap: 3px; }
.m-feed-time { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; font-family: var(--font-mono); }
.m-feed-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.m-feed-sub { font-size: 12px; color: var(--body); line-height: 1.4; }
.m-feed-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

/* ============================================================
   Above-mobile breakpoint — show the phone frame on desktop
   so QA can preview /m/* routes without devtools.
   ============================================================ */
@media (min-width: 600px) {
    .m-shell {
        background: linear-gradient(180deg, #f5f4f0 0%, #ecebe6 100%);
        padding: 32px 0;
        min-height: 100vh;
    }
    .m-shell-content {
        max-width: 412px;
        background: var(--paper);
        border: 1px solid var(--border);
        border-radius: 28px;
        box-shadow: 0 24px 60px -20px rgba(27, 23, 80, 0.16);
        padding: 20px 18px 110px;
    }
    .m-nav {
        position: sticky;
        max-width: 412px;
        border-radius: 0 0 28px 28px;
    }
}


/* ---- Request-limit exceeded banner ---- */
.m-limit {
    margin: 16px 0;
    padding: 18px 20px;
    background: var(--coral-bg);
    border: 1px solid var(--coral-border);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: start;
}

.m-limit-ic {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    background: var(--coral);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.m-limit h3 {
    margin: 0;
    color: var(--coral);
    font: 600 16px/1.3 var(--font-sans);
}

.m-limit p {
    margin: 0;
    color: var(--body);
    font-size: 13px;
    line-height: 1.45;
}


/* ============================================================
   «Відкриті» — mobile equivalent of the desktop tab strip
   ============================================================ */
.m-open-head { margin: 6px 4px 14px; }
.m-open-head h2 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.m-open-head h2 .mono { color: var(--muted); font-size: 16px; font-weight: 500; }
.m-open-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }

.m-open-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-open-item {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.m-open-item.is-active {
    border-color: var(--indigo-400);
    box-shadow: 0 0 0 1px var(--indigo-400) inset;
}
.m-open-card {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
}
.m-open-card:active { background: var(--paper); }
.m-open-ic {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--indigo-50);
    color: var(--indigo-600);
}
.m-open-ic--searchconnections { background: var(--amber-bg); color: var(--amber); }
.m-open-ic--person { background: var(--forest-bg); color: var(--forest); }
.m-open-ic--dashboard,
.m-open-ic--cabinet { background: var(--surface); color: var(--body); }
.m-open-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-open-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-open-edr { font-size: 11px; color: var(--muted); }
.m-open-close,
.m-open-pin {
    flex-shrink: 0;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    cursor: pointer;
}
.m-open-close:active { background: var(--coral-bg); color: var(--coral); }
.m-open-pin { cursor: default; color: var(--border-2); }


/* ============================================================
   «Ще» — overflow menu
   ============================================================ */
.m-more-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.m-more-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
}
.m-more-row:active { background: var(--paper); }
.m-more-ic {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--indigo-50);
    color: var(--indigo-600);
    font-size: 16px;
}
.m-more-l { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.m-more-l small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.m-more-go { color: var(--border-2); font-size: 16px; }
.m-more-logout {
    width: 100%;
    padding: 13px;
    background: var(--coral-bg);
    color: var(--coral);
    border: 1px solid var(--coral-border);
    border-radius: 12px;
    font: 600 14px/1 var(--font-sans);
    cursor: pointer;
}
.m-more-logout:active { background: var(--coral); color: #fff; }


/* ============================================================
   Pull-to-refresh indicator (mobile-interactions.js)
   ============================================================ */
.m-ptr {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-40px);
    z-index: 40;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: none;
}
.m-ptr-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--indigo-200);
    border-top-color: var(--indigo-600);
}
.m-ptr.is-armed .m-ptr-spin { border-top-color: var(--forest); }
.m-ptr.is-spin .m-ptr-spin { animation: m-ptr-spin 0.7s linear infinite; }
@keyframes m-ptr-spin { to { transform: rotate(360deg); } }


/* ============================================================
   Skeleton loaders
   ============================================================ */
.m-skel-list { display: flex; flex-direction: column; gap: 8px; }
.m-skel-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.m-skel-card.m-skel-row,
.m-skel-card.m-skel-hero { flex-direction: row; align-items: center; gap: 13px; }
.m-skel-stack { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.m-skel-line {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: var(--surface);
    position: relative;
    overflow: hidden;
}
.m-skel-line--sm { height: 10px; }
.m-skel-line--xs { height: 8px; }
.m-skel-circle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--surface);
    position: relative;
    overflow: hidden;
}
.m-skel-circle--sm { width: 30px; height: 30px; border-radius: 9px; }
.m-skel-line::after,
.m-skel-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: m-shimmer 1.3s ease-in-out infinite;
}
@keyframes m-shimmer { 100% { transform: translateX(100%); } }


/* ============================================================
   Push toggle (in «Ще»)
   ============================================================ */
.m-more-push {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 8px;
}
.m-more-push-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-more-push-meta b { font-size: 14px; font-weight: 600; color: var(--ink); }
.m-more-push-meta small { font-size: 11px; color: var(--muted); line-height: 1.35; }

.m-toggle {
    flex-shrink: 0;
    width: 46px;
    height: 28px;
    border-radius: 100px;
    border: 0;
    background: var(--border-2);
    position: relative;
    cursor: pointer;
    transition: background 0.18s ease;
    padding: 0;
}
.m-toggle.is-on { background: var(--indigo-600); }
.m-toggle:disabled { opacity: 0.6; cursor: default; }
.m-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
}
.m-toggle.is-on .m-toggle-knob { transform: translateX(18px); }

/* ════════ M · Збережені (моніторинг) ════════ */
.m-saved { padding: 16px 14px calc(20px + env(safe-area-inset-bottom)); max-width: 100%; }
.m-saved-head h1 { margin: 0; font: 700 22px/1.1 var(--font-sans); color: var(--ink); display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; }
.m-saved-star { color: #C9870F; }
.m-saved-head p { margin: 4px 0 16px; font-size: 12px; color: var(--muted); }

.m-saved-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.m-saved-kpi { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 10px; text-align: left; min-width: 0; }
.m-saved-kpi.is-alert { border-color: var(--coral); }
.m-saved-kpi b { display: block; font: 700 20px/1 var(--font-sans); color: var(--ink); }
.m-saved-kpi span { font-size: 11px; color: var(--muted); }

.m-saved-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; margin-bottom: 6px; scrollbar-width: none; }
.m-saved-chips::-webkit-scrollbar { display: none; }
.m-saved-chips .m-fchip { white-space: nowrap; flex: 0 0 auto; }

/* Segmented tabs: ★ Збережені | 🔔 Моніторинг */
.m-saved-tabs { display: flex; gap: 4px; padding: 4px; background: #f1f1f6; border-radius: 12px; margin-bottom: 14px; }
.m-saved-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 0; background: transparent; border-radius: 9px; font: 600 13px/1 var(--font-sans); color: var(--body); cursor: pointer; }
.m-saved-tab b { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 100px; background: var(--border-2); color: var(--muted); }
.m-saved-tab.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(27,23,80,.18); }
.m-saved-tab.is-on b { background: var(--indigo, #5B57DB); color: #fff; }

.m-saved-limit-warn { font: 500 12.5px/1.4 var(--font-sans); color: var(--coral); background: var(--coral-bg); padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; }

/* Реєстри під наглядом — клік toggle */
.m-saved-regs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.m-saved-reg { font: 600 10.5px/1 var(--font-mono); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-2); background: #fff; color: var(--muted); cursor: pointer; }
.m-saved-reg.is-on { background: var(--indigo-100, #E8E7FE); border-color: transparent; color: var(--indigo, #5B57DB); }
.m-saved-reg:disabled { opacity: .5; }

.m-saved-none { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
.m-saved-list { display: flex; flex-direction: column; gap: 10px; }

/* Swipe-to-remove: the red «Прибрати» sits behind the card; the card slides
   left (.is-swiped, driven by mobile-interactions.js) to reveal it. */
.m-saved-swipe { position: relative; border-radius: 14px; }
.m-saved-swipe-bg { position: absolute; inset: 0; display: flex; justify-content: flex-end; border-radius: 14px; overflow: hidden; }
.m-saved-swipe-del { width: 96px; border: 0; background: var(--coral); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font: 600 12px/1.2 var(--font-sans); }
.m-saved-swipe-del span { font-size: 18px; }

.m-saved-card { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; transition: opacity .15s, transform .2s cubic-bezier(.22,1,.36,1); }
.m-saved-card.is-swiped { transform: translateX(-96px); }
.m-saved-card.is-removing { opacity: .5; }
.m-saved-card-top { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.m-saved-type { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.m-saved-type--uo  { background: var(--indigo-100, #E8E7FE); }
.m-saved-type--fop { background: #FCF3E0; }
.m-saved-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-saved-info b { font: 600 14px/1.25 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.m-saved-date { color: var(--muted); }

.m-saved-events { margin-top: 10px; padding: 5px 10px; border: 0; border-radius: 8px; background: var(--coral-bg); color: var(--coral); font: 600 12px/1.2 var(--font-sans); cursor: pointer; }

.m-saved-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.m-saved-open { flex: 1; }
.m-saved-star, .m-saved-more { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 11px; border: 1px solid var(--border); background: #fff; font-size: 19px; line-height: 1; cursor: pointer; }
.m-saved-star { color: #C9870F; }
.m-saved-star:active { background: var(--coral-bg); color: var(--coral); }
.m-saved-more { color: var(--muted); }
.m-saved-star:disabled { opacity: .5; }

/* ⋯ action-sheet uses the shared .m-search-sheet / .m-ss-* components; add the
   coral icon variant for the «Прибрати» action. */
.m-ss-ic--coral { background: var(--coral); }
/* Coral hint on cards with unread changes (matches desktop). */
.m-saved-card:has(.m-saved-events) { border-color: rgba(199, 55, 47, 0.22); }

.m-saved-empty { padding: 48px 24px; text-align: center; }
.m-saved-empty-star { font-size: 44px; color: var(--forest); line-height: 1; }
.m-saved-empty h3 { margin: 12px 0 6px; font: 600 18px/1.3 var(--font-sans); color: var(--ink); }
.m-saved-empty p { max-width: 320px; margin: 0 auto 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ═══════════ M · /m/history — search history (redesigned) ═══════════ */
.m-hist { padding: 16px 14px calc(20px + env(safe-area-inset-bottom)); max-width: 100%; }
.m-hist-head h1 { margin: 0; font: 700 22px/1.1 var(--font-sans); color: var(--ink); letter-spacing: -0.02em; }
.m-hist-head p { margin: 4px 0 16px; font-size: 12px; color: var(--muted); }

/* KPI strip (reuses the saved-page sizing) */
.m-hist-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.m-hist-kpi { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 10px; text-align: left; min-width: 0; }
.m-hist-kpi b { display: block; font: 700 20px/1 var(--font-sans); color: var(--ink); }
.m-hist-kpi span { font-size: 11px; color: var(--muted); }

/* History rows */
.m-hist-list { display: flex; flex-direction: column; gap: 8px; }
.m-hist-card {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 12px; background: #fff; border: 1px solid var(--border);
    border-radius: 14px; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.m-hist-card:active { transform: scale(.985); transition: transform .1s; }

.m-hist-ic {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1;
}
.m-hist-ic--green  { background: var(--forest-bg); color: var(--forest); }
.m-hist-ic--amber  { background: var(--amber-bg);  color: var(--amber); }
.m-hist-ic--coral  { background: var(--coral-bg);  color: var(--coral); }
.m-hist-ic--indigo { background: var(--indigo-50); color: var(--indigo-600); }
.m-hist-ic--muted  { background: var(--surface);   color: var(--muted); }

.m-hist-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.m-hist-body > b { font: 600 14px/1.25 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-hist-meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.m-hist-meta .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.m-hist-badge {
    flex: 0 0 auto; font: 600 10px/1 var(--font-sans);
    padding: 3px 7px; border-radius: 100px; white-space: nowrap;
}
.m-hist-badge--green  { background: var(--forest-bg); color: var(--forest); }
.m-hist-badge--amber  { background: var(--amber-bg);  color: var(--amber); }
.m-hist-badge--coral  { background: var(--coral-bg);  color: var(--coral); }
.m-hist-badge--indigo { background: var(--indigo-50); color: var(--indigo-800); }
.m-hist-badge--muted  { background: var(--surface);   color: var(--muted); }

.m-hist-repeat { flex: 0 0 auto; font-size: 18px; color: var(--indigo-400, var(--muted)); line-height: 1; padding-left: 2px; }

/* Empty state */
.m-hist-empty { padding: 48px 24px; text-align: center; }
.m-hist-empty-ic { font-size: 42px; line-height: 1; }
.m-hist-empty h3 { margin: 12px 0 6px; font: 600 18px/1.3 var(--font-sans); color: var(--ink); }
.m-hist-empty p { max-width: 320px; margin: 0 auto 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ═══════════ Company-card section GROUP labels (match desktop sidebar groups) ═══════════ */
.m-c-secgroup {
    font: 700 11px/1 var(--font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 16px 6px 6px;
}
.m-c-secgroup:first-child { padding-top: 4px; }

/* ═══════════ M · /m/company/.../anketa — accordion ═══════════ */
.m-anketa { padding: 0 14px calc(20px + env(safe-area-inset-bottom)); max-width: 100%; }

.m-ank-hero { padding: 4px 2px 14px; }
.m-ank-hero h1 { margin: 0; font: 700 20px/1.2 var(--font-sans); color: var(--ink); letter-spacing: -0.02em; }
.m-ank-hero p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.m-ank-hero p b { color: var(--ink); }

.m-ank-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.m-ank-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 13px 14px; border: 0; background: transparent; cursor: pointer; text-align: left;
}
.m-ank-head b { flex: 1; font: 600 14px/1.2 var(--font-sans); color: var(--ink); }
.m-ank-head-ic { display: inline-flex; flex-shrink: 0; color: var(--indigo-600); }
.m-ank-count {
    flex-shrink: 0; font: 600 11px/1 var(--font-mono); font-style: normal;
    padding: 2px 7px; border-radius: 100px; background: var(--surface); color: var(--muted);
}
.m-ank-chev { flex-shrink: 0; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .15s ease; }
.m-ank-head.is-open .m-ank-chev { transform: rotate(90deg); }

.m-ank-body { padding: 2px 14px 12px; border-top: 1px solid var(--surface); }

.m-ank-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--surface); }
.m-ank-row:last-child { border-bottom: 0; }
.m-ank-row-l { flex: 0 0 42%; font-size: 12.5px; color: var(--muted); }
.m-ank-row-v { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); word-break: break-word; }

.m-ank-none { margin: 10px 0 2px; font-size: 13px; color: var(--muted); }

/* КВЕД rows */
.m-ank-kved { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--surface); }
.m-ank-kved:last-child { border-bottom: 0; }
.m-ank-kved-code { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--indigo-600); }
.m-ank-kved-name { flex: 1; font-size: 13px; color: var(--ink); }
.m-ank-kved--primary .m-ank-kved-name em {
    font-style: normal; font-size: 10px; color: var(--forest);
    background: var(--forest-bg); padding: 1px 6px; border-radius: 100px; margin-left: 6px;
}

/* person rows (керівництво / власники) */
.m-ank-person {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 0; border: 0; border-bottom: 1px solid var(--surface);
    background: transparent; text-align: left; cursor: pointer;
}
.m-ank-person:last-of-type { border-bottom: 0; }
.m-ank-person--static { cursor: default; }
.m-ank-person-ic {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--indigo-50); color: var(--indigo-600);
}
.m-ank-person-ic--crown { background: var(--amber-bg); color: var(--amber); }
.m-ank-person-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-ank-person-txt b { font: 600 13px/1.25 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-ank-person-txt small { font-size: 11px; color: var(--muted); }
.m-ank-go { flex-shrink: 0; color: var(--muted); font-size: 14px; }

.m-ank-pep-link { display: inline-block; margin-top: 10px; font: 600 12.5px/1 var(--font-sans); color: var(--indigo-600); text-decoration: none; }

/* «Уповноважені особи» card gets a subtle indigo border — it carries the PEP signal. */
.m-ank-card--accent { border-color: var(--indigo-200); }

/* person row WITH PEP marker (власники / керівництво / уповноважені) */
.m-ank-p { padding: 10px 0; border-bottom: 1px solid var(--surface); }
.m-ank-p:last-child { border-bottom: 0; }
.m-ank-p-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-ank-p-name { font: 600 13.5px/1.3 var(--font-sans); color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.m-ank-p-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.m-ank-p-tag { font: 500 11px/1.4 var(--font-sans); color: var(--muted); background: var(--surface); padding: 2px 7px; border-radius: 6px; }
.m-ank-p-tag--role { color: var(--indigo-600); background: var(--indigo-50); }
.m-ank-p-tag--coral { color: var(--coral); background: var(--coral-bg); }

.m-ank-more { margin-top: 8px; font: 600 12.5px/1 var(--font-sans); color: var(--indigo-600); background: none; border: 0; padding: 6px 0; cursor: pointer; }

.m-ank-pep-loading { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.m-spinner-inline { width: 12px; height: 12px; border: 2px solid var(--indigo-200); border-top-color: var(--indigo-600); border-radius: 50%; animation: m-ank-spin .7s linear infinite; flex-shrink: 0; }
@keyframes m-ank-spin { to { transform: rotate(360deg); } }

/* branches (відокремлені підрозділи) */
.m-ank-branch { padding: 9px 0; border-bottom: 1px solid var(--surface); }
.m-ank-branch:last-of-type { border-bottom: 0; }
.m-ank-branch-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.m-ank-branch-h b { font: 600 13px/1.3 var(--font-sans); color: var(--ink); }
.m-ank-branch-code { font-size: 11px; color: var(--indigo-600); }
.m-ank-branch-addr { font-size: 12px; color: var(--muted); margin-top: 3px; }
.m-ank-branch-contact { font-size: 11px; color: var(--muted); margin-top: 3px; }