:root {
    --bg: #f2f2f259;
    --surface: #ffffff;
    --surface-2: #f3f6fb;
    --border: #d7e1ee;
    --text: #2f4058;
    --text-muted: #70839a;
    --accent: #200f0ae6;
    --accent-strong: #200f0ae6;
    --accent-soft: #f7f4f0;
    --topbar-bg: #ffffff;
    --topbar-border: #d7e1ee;
    --topbar-text: #344861;
    --topbar-muted: #6f8299;
    --topbar-search-bg: var(--bg);
    --topbar-search-border: #d8e2ef;
    --topbar-search-focus: #ffffff;
    --error-bg: #fdecea;
    --error-border: #f5c2c0;
    --error-text: #8e2f2b;
    --info-bg: #eaf3fb;
    --info-border: #bcdcf5;
    --info-text: #1c5480;
    --ok-bg: #e7f4ec;
    --ok-border: #bfe0cb;
    --ok-text: #1d6b3d;
    --warn-bg: #fdf1e0;
    --warn-text: #8a5a12;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
    --sidebar-bg: #ffffff;
    --sidebar-border: #d7e1ee;
    --sidebar-hover: var(--bg);
    --sidebar-active-bg: var(--bg);
    --sidebar-active-border: #dbe5f2;
    --sidebar-active-text: #223550;
    --sidebar-active-shadow: 0 10px 24px rgba(148, 163, 184, .18);
    --button-bg: #111111;
    --button-hover: #000000;
    --button-border: #111111;
    --button-text: #ffffff;
    --button-disabled: #6b7280;
    --radius: 10px;
    --topbar-h: 56px;
    /* Wide enough for the longest page name, "Search Order-wise Settlements",
       on one line in bold with a few pixels to spare for browser zoom. */
    --sidebar-w: 280px;
    --sidebar-rail: 68px;
    --app-footer-h: 49px;

    /* The grid toolbar's height, as a number the stylesheet can hold space for
       before app.js has built the thing: 14px of padding top and bottom, a 40px
       row of controls between them, and the rule underneath.

       It is a token rather than a measurement because the reservation has to be
       made before there is anything to measure. `.data-grid-toolbar` pins itself
       to it, so the two cannot drift. */
    --grid-toolbar-h: 69px;

    /* The width below which a grid scrolls sideways inside its shell rather than
       squeezing its columns. Per-page overrides sit with those pages. */
    --grid-table-min-w: 760px;

    /* What the finished shell sits below the content above it. */
    --grid-shell-mt: 0px;
}

/* Denser rows mean a denser toolbar; both are set from one place so the space
   reserved for it before app.js runs still matches what turns up. */
:root[data-grid-density="compact"] {
    --grid-toolbar-h: 61px;
}

:root[data-grid-density="comfortable"] {
    --grid-toolbar-h: 73px;
}

[data-theme="dark"] {
    --bg: #12161d;
    --surface: #1a1f28;
    --surface-2: #212734;
    --border: #2b3240;
    --text: #e6e9ee;
    --text-muted: #98a2b3;
    --accent: #6ea2ff;
    --accent-strong: #d5e4ff;
    --accent-soft: #1f2d45;
    --error-bg: #3a2222;
    --error-border: #5c3230;
    --error-text: #f3b0ad;
    --info-bg: #1b2a38;
    --info-border: #2c4459;
    --info-text: #9dcdf0;
    --ok-bg: #1c2f24;
    --ok-border: #2f5540;
    --ok-text: #8fd3ab;
    --warn-bg: #33291a;
    --warn-text: #e2b872;
    --topbar-bg: #172231;
    --topbar-border: #101925;
    --topbar-text: #f1f5fb;
    --topbar-muted: rgba(241, 245, 251, .72);
    --topbar-search-bg: rgba(255, 255, 255, .07);
    --topbar-search-border: rgba(255, 255, 255, .05);
    --topbar-search-focus: rgba(255, 255, 255, .11);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
    --sidebar-bg: #161d28;
    --sidebar-border: #293241;
    --sidebar-hover: #202a39;
    --sidebar-active-bg: #1b2535;
    --sidebar-active-border: #32455e;
    --sidebar-active-text: #f1f5fb;
    --sidebar-active-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    --button-bg: #111111;
    --button-hover: #000000;
    --button-border: #111111;
    --button-text: #ffffff;
    --button-disabled: #64748b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

[hidden] {
    display: none !important;
}

.icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    backdrop-filter: blur(14px);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

.topbar .icon-btn {
    border-radius: 10px;
    color: var(--topbar-muted);
}

.topbar .icon-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--topbar-text);
    font-weight: 700;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(54, 109, 240, .16);
    background: linear-gradient(135deg, rgba(54, 109, 240, .18), rgba(54, 109, 240, .08));
    color: var(--accent-strong);
    font-size: 11px;
    letter-spacing: .5px;
}

.brand-name {
    letter-spacing: .01em;
    max-width: min(24vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.search .icon {
    position: absolute;
    left: 12px;
    color: var(--topbar-muted);
    width: 18px;
    height: 18px;
}

.search input {
    width: 340px;
    max-width: 34vw;
    padding: 9px 14px 9px 38px;
    border: 1px solid var(--topbar-search-border);    
    background: var(--topbar-search-bg);
    color: var(--topbar-text);
    font: inherit;
    font-size: 14px;
}

.search input::placeholder {
    color: var(--topbar-muted);
}

.search input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--topbar-search-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: inline-flex;
}

.user-menu {
    position: relative;
}

.user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px 5px 5px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--topbar-text);
    font: inherit;
    cursor: pointer;
}

.user-trigger:hover,
.user-trigger.open {
    background: var(--bg);
}

.user-trigger .chevron {
    width: 16px;
    height: 16px;
    color: var(--topbar-muted);
    transform: rotate(90deg);
    transition: transform .15s ease;
}

.user-trigger.open .chevron {
    transform: rotate(-90deg);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--button-bg);
    color: var(--button-text);
    font-size: 13px;
    font-weight: 700;
}

.avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.user-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
}

.user-role {
    font-size: 12px;
    color: var(--topbar-muted);
}

.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 250px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 40;
}

.dropdown-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}

.dropdown-name {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
}

.dropdown-meta {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--surface-2);
    color: var(--accent-strong);
}

.dropdown-item .icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.dropdown-danger:hover {
    background: var(--error-bg);
    color: var(--error-text);
}

.dropdown-sep {
    height: 1px;
    margin: 6px 0;
    background: var(--border);
}

.dropdown form {
    margin: 0;
}


.app-body {
    flex: 1 0 auto;
    display: flex;
    align-items: stretch;
    padding-top: var(--topbar-h);
    padding-bottom: var(--app-footer-h);
    min-height: 0;
}

.sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    z-index: 20;
    width: var(--sidebar-w);
    padding: 14px 10px;
    overflow-y: auto;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: none;
    transition: width .18s ease, transform .18s ease;
}

.app-body .page {
    flex: 1 1 auto;
    min-width: 0;
    width: calc(100% - var(--sidebar-w));
    max-width: none;
    margin-left: var(--sidebar-w);
    padding: 0px;
    overflow-x: hidden;
    transition: margin-left .18s ease;
}

.sidebar-collapsed .sidebar {
    width: var(--sidebar-rail);
}

.sidebar-collapsed .app-body .page {
    width: calc(100% - var(--sidebar-rail));
    margin-left: var(--sidebar-rail);
}

.app-shell-end {
    flex: 0 0 auto;
}

.app-footer {
    position: fixed;
    left: var(--sidebar-w);
    bottom: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-footer-h);
    width: calc(100% - var(--sidebar-w));
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    text-align: center;
    transition: left .18s ease, width .18s ease;
}

.sidebar-collapsed .app-footer {
    left: var(--sidebar-rail);
    width: calc(100% - var(--sidebar-rail));
}

.app-footer-copy {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-collapsed .menu-group-name,
.sidebar-collapsed .menu-item-name {
    display: none;
}

.sidebar-collapsed .menu-group-toggle .icon {
    display: block;
}

.sidebar-collapsed .menu-group-toggle,
.sidebar-collapsed .menu-item-top {
    justify-content: center;
    padding: 11px 0;
}

.sidebar-collapsed .menu-item-top .menu-item-name {
    display: none;
}

.sidebar-collapsed .sidebar {
    overflow: visible;
}

.sidebar-collapsed .menu-group .menu-items {
    display: none;
}

.sidebar-collapsed .menu-group.flyout-open .menu-items {
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% + 6px);
    z-index: 25;
    /* As wide as its longest page name, so every page takes one line. Positioned
       inside the narrow rail, it would otherwise shrink to its minimum and wrap
       "Search Order-wise Settlements" onto two. No cap: the flyout only opens on
       a window wider than app.js's 900px mobile breakpoint, which it always fits. */
    width: max-content;
    min-width: 216px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sidebar-collapsed .menu-group.flyout-open .menu-items::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -10px;
    width: 10px;
    height: calc(100% + 12px);
}

.sidebar-collapsed .menu-group.flyout-open .menu-items::after {
    content: '';
    position: absolute;
    top: 16px;
    left: -6px;
    width: 10px;
    height: 10px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(45deg);
}

.sidebar-collapsed .menu-group.flyout-open .menu-group-toggle {
    background: var(--sidebar-hover);
    color: var(--text);
}

.sidebar-collapsed .menu-group.flyout-open .flyout-title {
    display: block;
    padding: 4px 14px 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

/* Unclipped: the flyout is exactly as wide as its longest name, so clipping
   could turn a fraction of a pixel of zoom rounding into a "…". */
.sidebar-collapsed .menu-group.flyout-open .menu-item-name {
    display: inline;
    overflow: visible;
}

.menu-group {
    position: relative;
}

.menu-group + .menu-group {
    margin-top: 6px;
    padding-top: 6px;    
}

.menu-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.menu-group-toggle:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

.menu-group-name {
    margin-right: auto;
}

.menu-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.menu-group-icon .icon {
    width: 18px;
    height: 18px;
}

.menu-items {
    display: none;
    padding: 2px 0 4px;
}

.menu-group.open .menu-items {
    display: block;
}

.sidebar-collapsed .menu-group.open .menu-items {
    display: none;
}

.sidebar-collapsed .menu-group.flyout-open .menu-items {
    display: block;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.menu-item:hover {
    background: var(--sidebar-hover);
}

/* One line per page, sidebar and flyout alike. The sidebar is sized to the
   longest name and the flyout to its own, but at a browser zoom such as 125%
   the bold name of the open page can draw a fraction of a pixel wider than it
   was measured, and would break onto a second line. A longer name added later
   ends in "…" rather than wrapping. */
.menu-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
  The two kinds of top-level sidebar row: a standalone page such as Home, which
  is a link, and a group header such as AR, which is a button that expands. They
  are different elements for good reason and they are meant to look different --
  a header is smaller and muted, a page is full size -- but they must agree on
  exactly where the icon and the label sit, or the column reads as ragged.

  Three things had them disagreeing. The link carried a transparent 1px border
  and the button carried none, putting their icons a pixel apart; the link
  inherited the 12px gap meant for indented child items while the button used
  8px, putting their labels 4px apart; and their vertical padding differed by a
  pixel, making the rows different heights.
*/
.menu-group-toggle,
.menu-item-top {
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid transparent;
}

.menu-item .icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

/*
  Pages inside a group carry no icon of their own, so their labels are indented
  to start where the group header's label starts: 1px border + 10px padding +
  18px icon + 8px gap = 37px. Section headings take the same indent.
*/
.menu-items .menu-item {
    padding-left: 36px;
}

.menu-items .menu-section {
    padding-left: 31px;
}

/* In the flyout there is no header icon to line up with; align to its title. */
.sidebar-collapsed .menu-group.flyout-open .menu-items .menu-item {
    padding-left: 13px;
}

.sidebar-collapsed .menu-group.flyout-open .menu-items .menu-section {
    padding-left: 10px;
}

.menu-item.active {
    background: var(--sidebar-active-bg);
    border-color: var(--sidebar-active-border);
    box-shadow: var(--sidebar-active-shadow);
    color: var(--sidebar-active-text);
    font-weight: 700;
}

.menu-item.active .icon {
    color: var(--accent);
}

.flyout-title {
    display: none;
}

/* A heading inside a group, ruled off from the pages above it. */
.menu-section {
    display: block;
    margin: 8px 6px 4px;
    padding: 10px 10px 4px;
    border-top: 1px solid var(--sidebar-border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* The flyout grows to fit its rows; the expanded sidebar is a fixed width, so
   there the heading wraps rather than running under the edge. */
.sidebar-collapsed .menu-group.flyout-open .menu-section {
    white-space: nowrap;
}

.menu-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.filtered-out {
    display: none !important;
}

.sidebar-scrim {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: 19;
    background: rgba(9, 13, 20, .45);
}


@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow);
    }

    .sidebar-open .sidebar {
        transform: translateX(0);
    }

    .app-body .page,
    .sidebar-collapsed .app-body .page {
        width: 100%;
        margin-left: 0;
        padding: 18px 16px;
    }

    .app-footer,
    .sidebar-collapsed .app-footer {
        left: 0;
        width: 100%;
        padding: 12px 16px;
    }

    .search input {
        width: 180px;
    }

    .user-text {
        display: none;
    }

    .brand-name {
        display: none;
    }


}




/* --- settings pages ---
   Same two-column arrangement as the profile page: the form on the left, the
   things you can only look at on the right. Its own class rather than reusing
   .profile-* so neither can be restyled by accident on behalf of the other. */

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    align-items: start;
    gap: 16px;
    padding: 18px;
}

.settings-main,
.settings-aside {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.settings-card {
    padding: 20px;
}

/* One form spanning several cards, so the connection and the wording save
   together. Without the grid the form becomes .settings-main's only child and
   swallows the gap between the cards inside it. */
.settings-form {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.settings-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.settings-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

.settings-card-icon .icon {
    width: 18px;
    height: 18px;
}

.settings-card-copy {
    min-width: 0;
}

.settings-card-copy h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
}

.settings-card-copy p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.settings-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.settings-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.settings-note .icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.settings-facts {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
}

.settings-fact dt {
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-fact dd {
    margin: 0;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.settings-preview + .settings-preview {
    margin-top: 12px;
}

.settings-preview-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: default;
}

details.settings-preview .settings-preview-label {
    cursor: pointer;
}

/* Pre-formatted and scrolling: the plain-text part is written to a fixed width
   and rewrapping it here would hide where the real line breaks fall. */
.settings-preview-body {
    margin: 0;
    max-height: 260px;
    padding: 14px;
    overflow: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
    .settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .settings-grid {
        padding: 14px;
        gap: 14px;
    }

    .settings-card {
        padding: 16px;
    }

    .settings-actions {
        justify-content: stretch;
    }

    .settings-actions .btn-primary,
    .settings-actions .btn-ghost {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* --- activation page ---
   Reuses the sign-in card and the profile page's strength meter, so it needs only
   the two things neither already provides. */

.auth-strength {
    margin: 2px 0 4px;
}

.auth-hint {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* --- profile page ---
   Identity down the left, the two things a user may change on the right. Two
   cards rather than one long form because they fail independently: a rejected
   password must not look as though it also lost the name you typed.

   The header is the shared one, so nothing about it is repeated here. */

.profile-header-user {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* The gutter round the content. `.app-body .page` is padding: 0 for every page
   in the application, so each one insets its own body; the header above is
   full-bleed for every screen. */
.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 18px;
}

.profile-aside,
.profile-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

/* --- identity card --- */

/* The tinted sweep behind the avatar. A gradient on a pseudo-element rather than
   an image: it is two colours and a curve, and an asset would be one more file to
   ship and to keep in step with the palette. */
.profile-hero {
    position: relative;
    overflow: hidden;
    padding: 74px 22px 24px;
    text-align: center;
}

.profile-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 120px;
    background: linear-gradient(155deg,
                var(--accent-soft) 0%,
                var(--accent-soft) 46%,
                transparent 88%);
    border-radius: 0 0 60% 40% / 0 0 24% 20%;
    pointer-events: none;
}

.profile-hero > * {
    position: relative;
}

.profile-hero-edit {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease;
}

.profile-hero-edit:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.profile-hero-edit .icon {
    width: 15px;
    height: 15px;
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--accent);
    border: 3px solid var(--surface);
    box-shadow: 0 6px 18px rgba(15, 20, 28, .16);
    color: var(--surface);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .04em;
}

.profile-hero-name {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
}

.profile-hero-handle {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.profile-hero-roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.profile-role-chip {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 600;
}

.profile-role-chip.is-muted {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* --- account summary --- */

.profile-summary {
    padding: 18px 20px 20px;
}

.profile-summary-title {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.2;
}

.profile-summary-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.profile-summary-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.profile-summary-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-muted);
}

.profile-summary-icon .icon {
    width: 16px;
    height: 16px;
}

.profile-summary-icon.is-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.profile-summary-icon.is-bad {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.profile-summary-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.profile-summary-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-summary-value {
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.profile-summary-value.is-accent {
    color: var(--accent-strong);
}

/* --- the two forms --- */

.profile-card {
    padding: 20px;
}

.profile-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.profile-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

.profile-card-icon .icon {
    width: 18px;
    height: 18px;
}

.profile-card-copy {
    min-width: 0;
}

.profile-card-copy h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
}

.profile-card-copy p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.profile-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.profile-optional {
    color: var(--text-muted);
    font-weight: 400;
}

/* The input and its ornaments share one bordered box, so the focus ring lands
   around the whole control rather than around the text field inside it. */
.profile-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
}

.profile-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.profile-input.has-error {
    border-color: var(--error-border);
}

.profile-input > .icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

/* The field inside the wrapper must bring nothing of its own -- no border, no
   background, no radius -- or the two draw a box inside a box.

   Spelled out per input type on purpose. The application-wide rule is
   `.form-field input[type="text"]`, specificity (0,2,1), and a plain
   `.profile-input input` is (0,1,1): it loses on specificity, not on order, so
   moving this block would not have helped. Matching the same attribute
   selectors under one more class puts it at (0,3,1) and makes the override
   deliberate rather than accidental. */
.profile-page .profile-input input[type="text"],
.profile-page .profile-input input[type="email"],
.profile-page .profile-input input[type="password"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 11px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

/* The ring belongs to the wrapper, which is what a user sees as the control.
   Left alone, `.form-field input:focus` would draw a second one round the text. */
.profile-page .profile-input input:focus {
    outline: 0;
    border-color: transparent;
    box-shadow: none;
}

/* Chrome and Safari tint an autofilled box, which reinstates the inner
   rectangle the moment a password manager fills the form. */
.profile-page .profile-input input:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    box-shadow: 0 0 0 40px var(--surface) inset;
}

.profile-reveal {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.profile-reveal:hover {
    color: var(--text);
    background: var(--surface-2);
}

.profile-reveal .icon {
    width: 17px;
    height: 17px;
}

.profile-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.profile-note .icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* --- strength meter ---
   Advisory only. The server accepts anything past the length rule, so the wording
   is a description of the password and never a verdict on the request. */

.profile-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.profile-strength-label {
    color: var(--text-muted);
    font-size: 12.5px;
}

.profile-strength-track {
    display: flex;
    gap: 5px;
}

.profile-strength-seg {
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    transition: background .16s ease;
}

.profile-strength-word {
    font-size: 12.5px;
    font-weight: 700;
}

/* Filled segments and the word take their colour from the level, which the script
   puts on the container. Empty is the resting state, with nothing said. */
.profile-strength[data-level="1"] .profile-strength-seg:nth-child(-n+1),
.profile-strength[data-level="2"] .profile-strength-seg:nth-child(-n+2),
.profile-strength[data-level="3"] .profile-strength-seg:nth-child(-n+3),
.profile-strength[data-level="4"] .profile-strength-seg:nth-child(-n+4) {
    background: currentColor;
}

.profile-strength[data-level="1"] {
    color: var(--error-text);
}

.profile-strength[data-level="2"] {
    color: var(--warn-text);
}

.profile-strength[data-level="3"] {
    color: var(--accent);
}

.profile-strength[data-level="4"] {
    color: var(--ok-text);
}

.profile-strength[data-empty="true"] .profile-strength-word {
    display: none;
}

/* --- black actions ---
   The buttons on this page are black rather than the application accent. Scoped to
   the page so nothing else shifts, and written against the same tokens the rest of
   the sheet uses so both themes stay legible: on a dark theme "black" has to become
   the light end of the scale or the label disappears into the button. */

.profile-page .btn-primary {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.profile-page .btn-primary:hover {
    background: #000000;
    border-color: #000000;
}

.profile-page .btn-primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .28);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .profile-page .btn-primary {
        background: #f4f5f7;
        border-color: #f4f5f7;
        color: #111827;
    }

    :root:not([data-theme="light"]) .profile-page .btn-primary:hover {
        background: #ffffff;
        border-color: #ffffff;
    }

    :root:not([data-theme="light"]) .profile-page .btn-primary:focus-visible {
        box-shadow: 0 0 0 3px rgba(244, 245, 247, .3);
    }
}

:root[data-theme="dark"] .profile-page .btn-primary {
    background: #f4f5f7;
    border-color: #f4f5f7;
    color: #111827;
}

:root[data-theme="dark"] .profile-page .btn-primary:hover {
    background: #ffffff;
    border-color: #ffffff;
}

:root[data-theme="dark"] .profile-page .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(244, 245, 247, .3);
}

/* One column once the identity card can no longer sit beside the forms without
   squeezing both. */
@media (max-width: 960px) {
    .profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .profile-grid {
        padding: 14px;
        gap: 14px;
    }

    .profile-card,
    .profile-summary {
        padding: 16px;
    }

    .profile-hero {
        padding: 68px 16px 20px;
    }

    .profile-actions {
        justify-content: stretch;
    }

    .profile-actions .btn-primary {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* The @username beside the breadcrumb is the one thing here worth dropping
       before the buttons are: it repeats what the card below already says. */
    .profile-header-user {
        display: none;
    }
}

/* --- create launcher ---
   The quick-create section, revealed by the topbar's plus button.

   It slides down from behind the topbar rather than appearing as a dialog over a
   dimmed page. That is why the z-index sits between the two fixed elements it has
   to negotiate: below the topbar at 30, so the closed panel is genuinely hidden
   behind it rather than merely translated off somewhere, and above the sidebar at
   20, so the open panel reads as one band across the application.

   The closed state is a transform, not the hidden attribute, because a hidden
   element cannot animate out -- it would vanish. visibility carries the part
   hidden used to do, keeping the panel out of the tab order and away from screen
   readers, and its transition is delayed by the length of the slide so it only
   takes effect once the panel has finished leaving. */

.launcher-panel {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 29;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(15, 20, 28, .16);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.22, .7, .3, 1), visibility 0s .3s;
}

.launcher-panel.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .3s cubic-bezier(.22, .7, .3, 1), visibility 0s;
}

/* Height comes from the content, capped so a long list scrolls inside the band
   instead of pushing it past the bottom of the window. */
.launcher-inner {
    display: flex;
    flex-direction: column;
    max-height: min(calc(100vh - var(--topbar-h) - 24px), 560px);
    padding: 0 clamp(16px, 3vw, 40px);
}

.launcher-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    padding: 16px 0 14px;
}

.launcher-heading {
    min-width: 0;
}

.launcher-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
}

.launcher-subtitle {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* Takes the middle of the header and gives way first when the row runs out of
   room, since the heading and the close button both have fixed jobs. */
.launcher-search {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 340px;
    margin-left: auto;
    padding: 0 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
}

.launcher-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.launcher-search .icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.launcher-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.launcher-search-input:focus {
    outline: 0;
}

/* The native clear affordance sits badly against the flat field, and Escape
   already closes the panel. */
.launcher-search-input::-webkit-search-cancel-button {
    display: none;
}

.launcher-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.launcher-body {
    flex: 1 1 auto;
    padding-bottom: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.launcher-section + .launcher-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.launcher-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.launcher-section-title .icon {
    width: 14px;
    height: 14px;
}

/* auto-fill across the full band: several columns on a desktop, one on a phone,
   without a breakpoint spelling either out. */
.launcher-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px;
}

.launcher-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: background .14s ease, border-color .14s ease;
}

.launcher-item:hover {
    background: var(--surface-2);
    border-color: var(--border);
}

/* Keyboard users get what the pointer gets, plus a ring. is-active is the row the
   arrow keys have moved to, which Enter will open. */
.launcher-item:focus-visible,
.launcher-item.is-active {
    background: var(--surface-2);
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.launcher-item-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
}

.launcher-item-icon .icon {
    width: 16px;
    height: 16px;
}

.launcher-item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Points the way without taking space when it is not wanted. */
.launcher-item-go {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity .14s ease;
}

.launcher-item-go .icon {
    width: 15px;
    height: 15px;
}

.launcher-item:hover .launcher-item-go,
.launcher-item:focus-visible .launcher-item-go,
.launcher-item.is-active .launcher-item-go {
    opacity: 1;
}

.launcher-no-results {
    margin: 4px 0 0;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 13.5px;
    text-align: center;
}

/* On a phone the heading and the search field cannot share a row. */
@media (max-width: 620px) {
    .launcher-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .launcher-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        margin-left: 0;
    }

    .launcher-inner {
        max-height: calc(100vh - var(--topbar-h));
    }

    .launcher-item {
        padding: 11px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .launcher-panel,
    .launcher-panel.is-open {
        transition: visibility 0s;
    }
}

.page h1 {
    margin: 0 0 4px;
    font-size: 22px;
}

.muted {
    color: var(--text-muted);
    font-size: 14px;
}

/* Shared page header — one definition for every screen: a bar across the top of
   the page with the breadcrumb taking the width and the screen's primary action
   at the far end. Square corners, because `.app-body .page` has no gutter for a
   rounded card to float in.

   Six screens used to carry a copy of this laid out by a wrapper class of their
   own, all six identical to each other and to what follows. Pages should not
   restyle it; adjust the sizes here so all pages stay in step. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    padding: 14px 18px;
    background: var(--surface);    
    border-radius: 0;
    border-bottom: 1px solid var(--border);
}

.page-header > * {
    min-width: 0;
}

.page-header .breadcrumb {
    flex: 1 1 auto;
}

/* Breadcrumb above, the screen's title large beneath it. */
.page-header-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

.page-header-heading .breadcrumb {
    flex: 0 0 auto;
}

/* The title, with a back arrow before it on a screen opened from another. */
.page-header-titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.page-header-back {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-left: -6px;
    border-radius: 50%;
    color: var(--text);
}

.page-header-back:hover {
    background: var(--surface-2);
    color: var(--accent);
}

.page-header-back .icon {
    width: 22px;
    height: 22px;
}

.page-header-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* A sub page's one line: the trail, then the title in the same size type as the
   steps before it, set apart by weight alone. The trail takes only the room its
   steps need, so the title follows it rather than being pushed to the far end. */
.page-header-heading.is-inline .page-header-titlebar {
    flex-wrap: wrap;
    gap: 8px;
}

.page-header-heading.is-inline .breadcrumb {
    flex: 0 1 auto;
    font-size: 15px;
}

/* Margin restated: `.page h1` would otherwise lift the title off the trail's line. */
.page-header-title.is-inline {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

/* The header's actions slot. Screens that passed ~{} leave it empty, which costs
   nothing: a flex item with no children is zero wide and the breadcrumb keeps
   the whole bar. */
.page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.page-header-actions .btn-primary,
.page-header-actions .btn-ghost {
    white-space: nowrap;
}

/* Nothing passed in: on a narrow screen the slot would still take a row of its own. */
.page-header-actions:not(:has(*)) {
    display: none;
}

/* Tabbed screens put their per-tab buttons in a group of their own, because the
   tab script hides the group whole when the open tab has nothing to create. */
.page-header-tab-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-header-tab-actions[hidden] {
    display: none;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
}

.breadcrumb a {
    color: var(--accent-strong);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .breadcrumb-home {
    display: inline-flex;
    color: var(--text);
}

.breadcrumb-home .icon {
    width: 20px;
    height: 20px;
}

.breadcrumb-current {
    color: var(--text-muted);
}

.breadcrumb-sep {
    display: inline-flex;
    color: var(--text-muted);
}

.breadcrumb-sep .icon {
    width: 14px;
    height: 14px;
}

/* A search box for the header's actions slot: the field and its button drawn as
   one control, the magnifier at the far end. */
.header-search {
    display: flex;
    align-items: center;
    width: 380px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.header-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.header-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 4px 0 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.header-search button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.header-search button:hover,
.header-search button:focus-visible {
    color: var(--text);
}

.sr-only,
.ar-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Intro line + primary action, sitting between the header and the content. */
.page-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0 0 4px;
}

.page-toolbar p {
    margin: 0;
    min-width: 0;
    flex: 1 1 100%;
    max-width: none;
}

.page-toolbar-end {
    justify-content: flex-end;
}

.page-toolbar > a,
.page-toolbar > form,
.page-toolbar > .tryon-actions {
    margin-left: auto;
}

.page-toolbar-end > a,
.page-toolbar-end > form,
.page-toolbar-end > .tryon-actions {
    margin-left: 0;
}

.ar-management-tabs-shell {
    margin: -2px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border);
}

.ar-management-tabs {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    min-width: max-content;
    padding: 0 20px;
}

.ar-management-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 0 12px;
    color: #111111;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .18s ease;
}

.ar-management-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    transform: scaleX(.35);
    transform-origin: center;
    transition: transform .18s ease, background-color .18s ease;
}

.ar-management-tab:hover {
    color: #111111;
}

.ar-management-tab.is-active {
    color: #111111;
    font-weight: 600;
}

.ar-management-tab.is-active::after {
    background: #111111;
    transform: scaleX(1);
}

.ar-management-tab:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
    border-radius: 6px;
}

[data-theme="dark"] .ar-management-tab {
    color: var(--text);
}

[data-theme="dark"] .ar-management-tab:hover,
[data-theme="dark"] .ar-management-tab.is-active {
    color: var(--text);
}

[data-theme="dark"] .ar-management-tab.is-active::after {
    background: var(--text);
}

[data-theme="dark"] .ar-management-tab:focus-visible {
    outline-color: var(--text);
}

/* Shared surface: every card-like block on every page uses this treatment.
   Keep .panel, .data-table, .form-card and .analytics-card in step. */
.panel {      
    background: var(--surface);    
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.panel h2 {
    margin: 0 0 6px;
    font-size: 16px;
}

.link-row {
    display: flex;
    gap: 16px;
    margin: 8px 0 0;
}

.link-row a {
    color: var(--accent-strong);
    font-weight: 600;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.chips li {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
}

.auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 14px;
}

.auth-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.auth-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-form {
    display: flex;
    flex-direction: column;
}

.auth-form label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.auth-form input {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
}

.auth-form input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.auth-footer {
    margin-top: 20px;
    text-align: center;
}

.auth-footer p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.alert {
    margin-bottom: 18px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
}

.alert-error {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

.alert-info {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}

.alert-success {
    background: var(--ok-bg);
    border-color: var(--ok-border);
    color: var(--ok-text);
}

.flash-toast-region {
    position: fixed;
    left: 50%;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: calc(100vw - 32px);
    transform: translateX(-50%);
    pointer-events: none;
}

.flash-toast-region-interactive {
    bottom: 24px;
}

.flash-toast-region-status {
    bottom: 24px;
}

.flash-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    max-width: min(100%, 460px);
    padding: 10px 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 18px;
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 600;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity .32s ease, transform .32s ease;
}

.flash-toast.alert-success {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.flash-toast.alert-error {
    background: #5b171b;
    border-color: #5b171b;
    color: #ffffff;
}

.flash-toast.alert-confirm {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.flash-toast-content {
    min-width: 0;
    flex: 1 1 auto;
}

.flash-toast-message {
    display: block;
}

.flash-toast[data-toast-kind="delete-selection"] {
    gap: 10px;
    padding: 8px 12px;
}

.flash-toast-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.flash-toast-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.flash-toast-button:hover {
    background: rgba(255, 255, 255, .08);
}

.flash-toast-button.is-danger {
    border-color: #ffffff;
    background: #ffffff;
    color: #5b171b;
}

.flash-toast-button.is-danger:hover {
    background: rgba(255, 255, 255, .9);
}

.flash-toast-button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.flash-toast[data-toast-kind="delete-selection"] .flash-toast-button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.flash-toast.is-hiding {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
}

.confirm-modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 1250;
    border: 0;
    background: rgba(15, 20, 28, .46);
    animation: scrim-in .18s ease-out both;
}

.confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1251;
    width: min(calc(100vw - 32px), 380px);
    padding: 22px 22px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 18px 44px rgba(15, 20, 28, .24);
    transform: translate(-50%, -50%);
    animation: confirm-modal-in .18s cubic-bezier(.24, .72, .32, 1) both;
}

.confirm-modal-title {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.15;
    color: var(--text);
}

.confirm-modal-message {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.confirm-modal-actions .btn-primary,
.confirm-modal-actions .btn-ghost {
    border-radius: 0;
}

.confirm-modal-delete {
    background: #5b171b;
    border-color: #5b171b;
}

.confirm-modal-delete:hover {
    background: #4a1216;
    border-color: #4a1216;
}

@keyframes confirm-modal-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 10px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.data-table-shell {
    margin-top: var(--grid-shell-mt);
    overflow: hidden;
    background: var(--surface);       
    border-radius: 0;
}

.data-table-shell[data-grid-ready="true"] {
    display: flex;
    flex-direction: column;
}

.data-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    min-height: var(--grid-toolbar-h);
    padding: 14px 16px;
    border-bottom: 1px solid rgba(215, 225, 238, .92);   
}

.data-grid-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.data-grid-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.data-grid-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.data-grid-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 0;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.data-grid-chip-muted {
    background: var(--surface-2);
    color: var(--text-muted);
}

.data-grid-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 320px;
    flex-wrap: wrap;
}

.data-grid-bulk-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.data-grid-bulk-actions .data-grid-action-button {
    border: 1px solid var(--border);
    background: var(--surface);
}

.data-grid-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--border);
    background: var(--surface);
}

.data-grid-menu {
    position: relative;
}

.data-grid-menu summary {
    list-style: none;
}

.data-grid-menu summary::-webkit-details-marker {
    display: none;
}

.data-grid-action-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.data-grid-actions > .data-grid-action-button:last-child,
.data-grid-menu:last-child .data-grid-action-button {
    border-right: 0;
}

.data-grid-action-button:hover,
.data-grid-menu[open] .data-grid-action-button {
    background: var(--surface-2);
}

.data-grid-action-danger {
    color: var(--error-text);
}

.data-grid-action-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.data-grid-action-button::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .7;
    transition: transform .16s ease, opacity .16s ease;
}

.data-grid-menu[open] .data-grid-action-button::after {
    transform: rotate(-135deg) translateY(1px);
    opacity: .92;
}

.data-grid-action-button[data-grid-action="export"]::after,
.data-grid-action-button[data-grid-action="reset"]::after,
.data-grid-action-button[data-grid-action="bulk-delete"]::after,
.data-grid-action-button[data-grid-action="clear-selection"]::after {
    display: none;
}

.data-grid-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 5;
    min-width: 220px;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.data-grid-menu-panel-header {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.data-grid-column-list,
.data-grid-density-list {
    display: grid;
    gap: 4px;
}

.data-grid-column-option,
.data-grid-density-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.data-grid-column-option:hover,
.data-grid-density-option:hover {
    background: var(--surface-2);
}

.data-grid-column-option input {
    margin: 0;
}

.data-grid-density-option {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.data-grid-search {
    position: relative;
    flex: 1 1 220px;
    max-width: 260px;
}

.data-grid-search::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: var(--text-muted);
    transform: translateY(-60%);
    opacity: .6;
}

.data-grid-search::before {
    content: '';
    position: absolute;
    top: calc(50% + 5px);
    right: 8px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    color: var(--text-muted);
    transform: rotate(45deg);
    opacity: .6;
}

.data-grid-search.is-active::after,
.data-grid-search.is-active::before {
    color: var(--accent);
}

.data-grid-search-input {
    width: 100%;
    min-height: 38px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.data-grid-search-input::placeholder {
    color: var(--text-muted);
}

.data-grid-search-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.data-grid-density-button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.data-grid-density-button:hover {
    background: var(--surface-2);
}

.data-grid-density-button.is-active {
    border-color: var(--border);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.panel .data-table-shell {    
    border: 0;
}

.panel .data-table-shell:first-child {
    margin-top: 0;
}

.data-table-scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(112, 131, 154, .55) transparent;
}

.data-table-scroll::-webkit-scrollbar {
    height: 10px;
}

.data-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(112, 131, 154, .42);
    border-radius: 999px;
}

.data-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.data-table {
    width: 100%;
    /* separate + zero spacing so the card corners actually round;
       `collapse` silently cancels border-radius on tables. */
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
}

/* Inside a panel the table is part of that card, not a second one. */
.panel .data-table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.panel .data-table:first-child {
    margin-top: 0;
}

/* Before app.js runs, the table is the plain markup the server sent: no shell
   around it, no toolbar above it, no selection column beside it. Left alone the
   browser paints that, then app.js rearranges it and the rows slide down and
   across -- the jump you see a beat after any page with a table opens.

   So for the length of that boot the table keeps its place in the flow but not
   its pixels. It holds the height the toolbar is about to take, and the width it
   will have once it can scroll sideways inside the shell, so nothing below it
   moves; and it waits to be shown rather than being painted somewhere it is
   about to leave. theme.js sets the mark in the head, app.js clears it.

   Matrix tables are excluded: they are never made into grids, so no chrome is
   coming and there is nothing to hold space for. */
html.grids-booting .data-table:not(.matrix-table) {
    margin-top: calc(var(--grid-shell-mt) + var(--grid-toolbar-h));
    min-width: var(--grid-table-min-w);
    /* The shell carries the frame once it exists; two pixels of border here
       would be two pixels of movement there. */
    border: 0;
    visibility: hidden;
}

.data-table-shell .data-table {
    margin-top: 0;
    min-width: var(--grid-table-min-w);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.data-table th,
.data-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.data-table thead th {
    background: linear-gradient(180deg, rgba(243, 246, 251, .92), rgba(238, 243, 250, .98));
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    white-space: nowrap;
}

.data-table-shell[data-grid-ready="true"] .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.data-grid-sort {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
    cursor: pointer;
}

.data-grid-sort:hover {
    color: var(--accent-strong);
}

.data-grid-sort-label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.data-grid-sort-indicator {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    opacity: .3;
    transform: rotate(45deg);
    transition: transform .16s ease, opacity .16s ease, color .16s ease;
}

.data-table thead th[data-grid-sort-state="asc"] .data-grid-sort-indicator {
    opacity: .82;
    transform: rotate(-135deg);
}

.data-table thead th[data-grid-sort-state="desc"] .data-grid-sort-indicator {
    opacity: .82;
    transform: rotate(45deg);
}

.data-table .check-col {
    width: 52px;
    min-width: 52px;
    padding: 12px 10px;
    text-align: center;
    vertical-align: middle;
}

.data-table .check-col input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.data-table thead th.num .data-grid-sort,
.data-table .num .data-grid-sort {
    justify-content: flex-end;
}

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

.data-table-shell[data-grid-ready="true"] .data-table tbody tr:nth-child(even) td {
    background: rgba(17, 24, 39, .015);
}

.data-table tbody tr:hover td {
    background: rgba(54, 109, 240, .035);
}

.data-table a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.data-table a:hover {
    color: var(--accent-strong);
}

.data-table code {
    font-size: 12px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table td .muted {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.data-table .status,
.data-table .tag,
.data-table .chip-label {
    white-space: nowrap;
}

.row-actions {
    white-space: nowrap;
}

.row-actions form {
    margin: 0;
}

.data-grid-empty {
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(215, 225, 238, .92);
    color: var(--text-muted);
    font-size: 13px;
    background: linear-gradient(180deg, rgba(247, 250, 255, .7), rgba(255, 255, 255, .92));
}

/* Density hangs off the root element, not off each shell: theme.js has to set it
   in the head, before a shell exists, or every row resizes just after it is
   painted. That is also why these reach the table directly rather than through
   .data-table-shell -- during boot there is no shell yet. */
:root[data-grid-density="compact"] .data-grid-toolbar {
    padding: 10px 12px;
}

:root[data-grid-density="compact"] .data-table th,
:root[data-grid-density="compact"] .data-table td {
    padding: 10px 12px;
}

:root[data-grid-density="comfortable"] .data-grid-toolbar {
    padding: 16px 18px;
}

:root[data-grid-density="comfortable"] .data-table th,
:root[data-grid-density="comfortable"] .data-table td {
    padding: 16px 18px;
}

[data-theme="dark"] .data-grid-toolbar {
    border-bottom-color: rgba(43, 50, 64, .94);
    background: linear-gradient(180deg, rgba(26, 31, 40, .98), rgba(22, 27, 35, .96));
}

[data-theme="dark"] .data-grid-actions,
[data-theme="dark"] .data-grid-menu-panel,
[data-theme="dark"] .data-grid-action-button {
    border-color: var(--border);
}

[data-theme="dark"] .data-grid-action-button:hover,
[data-theme="dark"] .data-grid-menu[open] .data-grid-action-button,
[data-theme="dark"] .data-grid-column-option:hover,
[data-theme="dark"] .data-grid-density-option:hover,
[data-theme="dark"] .data-grid-density-button:hover {
    background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .data-table thead th {
    background: linear-gradient(180deg, rgba(33, 39, 52, .96), rgba(26, 31, 40, .98));
}

[data-theme="dark"] .data-table-shell[data-grid-ready="true"] .data-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, .02);
}

[data-theme="dark"] .data-grid-empty {
    border-top-color: rgba(43, 50, 64, .94);
    background: linear-gradient(180deg, rgba(22, 27, 35, .8), rgba(26, 31, 40, .96));
}

[data-theme="dark"] .data-table-shell > .pager {
    background: linear-gradient(180deg, rgba(22, 27, 35, .86), rgba(26, 31, 40, .98));
}

@media (max-width: 640px) {
    .flash-toast {
        flex-direction: column;
        align-items: stretch;
    }

    .flash-toast-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Stacked, the toolbar is the summary row, the three actions in a column and
       the search field, inside its own padding: 28 + 28 + 14 + 118 + 10 + 40 + 1.
       An estimate, unlike the single-row height above, so it only reserves space
       -- min-height is dropped below so nothing is forced to it. The density
       selector is matched, not just :root, or the denser settings would keep the
       one-row height they set at the top of the file. */
    :root,
    :root[data-grid-density] {
        --grid-toolbar-h: 239px;
    }

    .data-grid-toolbar {
        align-items: stretch;
        min-height: 0;
    }

    .data-grid-summary,
    .data-grid-controls,
    .data-grid-search {
        width: 100%;
        max-width: none;
    }

    .data-grid-controls {
        justify-content: stretch;
    }

    .data-grid-bulk-actions {
        width: 100%;
        justify-content: space-between;
    }

    .data-grid-actions {
        width: 100%;
        flex-direction: column;
    }

    .data-grid-menu,
    .data-grid-action-button {
        width: 100%;
    }

    .data-grid-action-button {
        justify-content: space-between;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .data-grid-actions > .data-grid-action-button:last-child,
    .data-grid-menu:last-child .data-grid-action-button {
        border-bottom: 0;
    }

    .data-grid-menu-panel {
        position: static;
        margin-top: -1px;
        border-width: 1px 0 0;
        box-shadow: none;
    }
}

.tag {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 11px;
    color: var(--text-muted);
}

.status {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-on {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.status-off {
    background: var(--surface-2);
    color: var(--text-muted);
}

.status-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.btn-primary {
    padding: 10px 16px;
    border: 1px solid var(--button-border);    
    background: var(--button-bg);
    color: var(--button-text);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.btn-primary:hover {
    background: var(--button-hover);
    border-color: var(--button-hover);
    color: var(--button-text);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .12);
}

.btn-inline {
    display: inline-block;
    padding: 9px 15px;
    text-decoration: none;
    font-size: 14px;
}

.btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-strong);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.btn-link.danger {
    color: var(--error-text);
}

.logout-form {
    margin: 0;
}

.drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15, 20, 28, .45);
    animation: scrim-in .18s ease-out both;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(780px, 64vw);
    min-width: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -14px 0 40px rgba(15, 20, 28, .18);
    animation: drawer-in .22s cubic-bezier(.32, .72, .35, 1) both;
}

@keyframes drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-modal,
    .confirm-modal-scrim,
    .drawer,
    .drawer-scrim {
        animation: none;
    }
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border);
}

.drawer-header h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: var(--accent-strong);
}

.drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}

.drawer-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.drawer-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 26px 28px;
}

.drawer-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 16px 28px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@media (max-width: 760px) {
    .drawer {
        width: 100%;
        border-left: 0;
    }

    .drawer-header,
    .drawer-body,
    .drawer-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.form-card {
    margin-top: 16px;
    padding: 28px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}

.form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* An author `display` outranks the browser's rule for [hidden], so a field the
   form has switched off would otherwise stay on screen. */
.form-field[hidden] {
    display: none;
}

.form-field > label,
.form-field > .form-label {
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
}

.form-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-field select,
.form-field textarea {
    appearance: none;
}

.form-field textarea {
    min-height: 92px;
    resize: vertical;
}

.form-field input[readonly] {
    background: var(--surface-2);
    color: var(--text-muted);
}

.form-field > .field-help,
.form-field > .field-error {
    margin: 7px 0 0;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field-full > .form-label {
    font-size: 16px;
}

.form-card .form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.btn-ghost {
    padding: 10px 22px;
    border: 1px solid var(--button-border);
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--button-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.btn-ghost:hover {
    background: var(--button-hover);
    border-color: var(--button-hover);
    color: var(--button-text);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .12);
}

.btn-primary:disabled,
.btn-ghost:disabled {
    border-color: var(--button-disabled);
    background: var(--button-disabled);
    color: #ffffff;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .78;
}

.form-card .btn-primary {
    padding: 10px 28px;
}

@media (max-width: 760px) {
    .form-card {
        padding: 20px 18px;
    }

    .form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

.stacked-form {
    max-width: 900px;
}

.field-row {
    display: flex;
    gap: 16px;
}

.field-row .field {
    flex: 1 1 0;
}

.field {
    margin-bottom: 16px;
}

.field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
}

.field input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.field input[readonly] {
    background: var(--surface-2);
    color: var(--text-muted);
}

.field-help {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.field-error {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--error-text);
}

.section-title {
    margin: 26px 0 4px;
    font-size: 16px;
}

.check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.check-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
}

.check-item + .check-item {
    margin-top: 8px;
}

.check-item code {
    font-size: 11px;
    color: var(--text-muted);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.matrix {
    margin-top: 14px;
}

.matrix-table .check-col {
    width: 78px;
    text-align: center;
}

.matrix-table tbody td:first-child {
    font-weight: 500;
}

.matrix-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.cell-empty {
    color: var(--border);
}


.tryon-experience-copy .muted {
    max-width: 760px;
    font-size: 15px;
}


.tryon-flow-step .muted {
    margin: 0;
    font-size: 13px;
}

.tryon-flow-step.is-active {
    border-color: rgba(138, 109, 59, .45);
    box-shadow: 0 0 0 3px rgba(138, 109, 59, .12);
    transform: translateY(-1px);
}

.tryon-flow-step.is-done {
    border-color: rgba(49, 146, 95, .32);
    background:
        radial-gradient(circle at top right, rgba(49, 146, 95, .10), transparent 36%),
        linear-gradient(135deg, var(--surface), var(--surface-2));
}

.tryon-flow-step.is-pending {
    border-style: dashed;
}


.tryon-actions .btn-primary,
.tryon-actions .btn-ghost {
    min-height: 36px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}


.tryon-stage.is-live::after {
    border-color: rgba(255, 255, 255, .08);
}


.tryon-stage.is-live .tryon-feed,
.tryon-stage.is-live .tryon-overlay {
    transform: scaleX(-1);
}

.tryon-stage.is-live .tryon-stage-empty {
    display: none;
}


.tryon-stage-copy .muted {
    color: rgba(255, 255, 255, .76);
    font-size: 15px;
}


.tryon-sidebar .panel {
    margin-top: 0;
}


.tryon-item-card.is-selected {
    border-color: rgba(138, 109, 59, .45);
    box-shadow: 0 0 0 3px rgba(138, 109, 59, .12);
}


.tryon-visual-slider {
    width: 100%;
    accent-color: var(--accent);
}


.tryon-segment-btn.is-active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 16px rgba(138, 109, 59, .22);
}


.tryon-mode-btn.is-active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(138, 109, 59, .22);
}


.tryon-stage-shell.is-compare-hidden {
    grid-template-columns: minmax(0, 1fr);
}


.tryon-compare-head,
.tryon-panel-head,
.analytics-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}


.tryon-choice-btn.is-selected {
    border-color: rgba(138, 109, 59, .45);
    box-shadow: 0 0 0 3px rgba(138, 109, 59, .12);
}

.tryon-choice-btn.is-disabled {
    opacity: .55;
}


/* Wraps on its own instead of needing a breakpoint per page. */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.analytics-card {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.analytics-label {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.analytics-value {
    display: block;
    margin-top: 8px;
    font-size: 29px;
    line-height: 1;
}

.analytics-panel {
    margin-top: 0;
    margin-bottom: 20px;
}

/* --- dashboard engagement ---
   The shopper-side half of the AR dashboard. Separated from the catalogue
   counters by a heading rather than a rule, because the two answer different
   questions and a thirty-day count read as a lifetime total misleads badly. */

.ar-dashboard-engagement {
    margin-top: 10px;
}

/* Reads as a section break rather than another row of tiles: the counters above
   are facts about the catalogue, these are facts about shoppers. */
.ar-dashboard-section-head {
    margin-bottom: 14px;
}

.ar-dashboard-section-head h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.ar-dashboard-engagement-note {
    margin-top: 12px;
}

.ar-dashboard-top-pieces {
    margin-top: 20px;
}


.tryon-snapshot-head .muted {
    margin: 6px 0 0;
}


.tryon-snapshot-canvas.is-draggable {
    cursor: grab;
}

.tryon-snapshot-canvas.is-dragging {
    cursor: grabbing;
}


.tryon-snapshot-meta .muted {
    margin: 4px 0 0;
}


.tryon-snapshot-layer-btn.is-selected {
    border-color: rgba(138, 109, 59, .45);
    box-shadow: 0 0 0 3px rgba(138, 109, 59, .12);
}


.tryon-studio-shell.is-empty {
    grid-template-columns: minmax(0, 1fr);
}


.tryon-studio-brand .muted {
    margin: 10px 0 0;
    color: #6e8195;
    font-size: 16px;
}


.tryon-tool-card.is-selected {
    border-color: rgba(37, 90, 145, .42);
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(232, 241, 250, .95));
    box-shadow: 0 0 0 4px rgba(52, 122, 194, .12);
}


.tryon-output-btn.is-active {
    background: #2f5176;
    color: #fff;
    box-shadow: 0 10px 18px rgba(47, 81, 118, .22);
}


.tryon-workspace-heading .muted {
    margin: 8px 0 0;
    color: #6f8297;
}


.tryon-studio-workspace .tryon-stage-shell,
.tryon-studio-workspace .tryon-stage-shell.is-compare-hidden {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}


.tryon-studio-workspace .tryon-stage-copy .muted {
    color: #65798f;
}


.tryon-inspector-tab.is-active {
    color: #1e9db3;
    box-shadow: inset 0 -3px 0 #1e9db3;
}


.tryon-inspector-selected-copy .muted {
    margin: 0;
    color: #6f8297;
}


.app-body .tryon-page {
    padding: 16px 18px 28px;
}


.tryon-tools-head .tag {
    display: none;
}


.tryon-actions-left .btn-ghost {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    color: #23384f;
    font-size: 14px;
    font-weight: 700;
}


.tryon-stage-shell,
.tryon-stage-shell.is-compare-hidden {
    display: block;
}


.tryon-stage.is-live .tryon-feed,
.tryon-stage.is-live .tryon-overlay {
    transform: scaleX(-1) scale(var(--tryon-zoom, 1));
}


.tryon-inspector-tab.is-active {
    color: #1ca9bb;
    box-shadow: inset 0 -4px 0 #1fbccc;
}


.tryon-visual-slider {
    flex: 1 1 auto;
    accent-color: #27b3c3;
}


.tryon-segment-btn.is-active {
    background: #36597f;
    color: #fff;
    box-shadow: none;
}


/* Desktop: the studio fills exactly one viewport, each column scrolls on its own. */
@media (min-width: 1024px) {
    .app-body .tryon-page {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--topbar-h) - var(--app-footer-h));
        min-height: 560px;
        padding: 10px 14px 12px;
        overflow: hidden;
    }

    /* Sizing comes from the shared .page-header rule; this only stops it
       stretching inside the flex column. */
    .tryon-page .page-header {
        flex: 0 0 auto;
    }


    .tryon-studio-brand .muted {
        margin-top: 6px;
        font-size: 14px;
    }


    /* Stage takes whatever height is left and derives its width from it. */
    .tryon-studio-workspace .tryon-stage-shell,
    .tryon-studio-workspace .tryon-stage-shell.is-compare-hidden {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
    }


}


/* Narrow desktops and laptops: keep all three columns, just tighten them. */
@media (min-width: 1024px) and (max-width: 1439px) {


    .tryon-output-btn,
    .tryon-mode-btn,
    .tryon-actions-left .btn-ghost {
        padding: 0 12px;
        font-size: 13px;
    }


}

/* Shorter desktops: trim the chrome further so the stage keeps a usable size. */
@media (min-width: 1024px) and (max-height: 900px) {
    .app-body .tryon-page {
        padding: 0px;
    }


    .tryon-output-btn,
    .tryon-mode-btn,
    .tryon-actions-left .btn-ghost,
    .tryon-segment-btn {
        min-height: 36px;
    }


}


@media (max-width: 760px) {


    .analytics-value {
        font-size: 24px;
    }


}


.tryon-studio-brand .muted {
    color: var(--text-muted);
}


.tryon-tool-card.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(138, 109, 59, .12);
}


.tryon-output-btn.is-active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(138, 109, 59, .22);
}

.tryon-actions-left .btn-ghost {
    background: var(--surface);
    color: var(--text);
}


.tryon-studio-workspace .tryon-stage-copy .muted {
    color: var(--text-muted);
}


.tryon-inspector-tab.is-active {
    color: var(--accent-strong);
    box-shadow: inset 0 -3px 0 var(--accent);
}


.tryon-visual-slider {
    accent-color: var(--accent);
}


.tryon-segment-btn.is-active {
    background: var(--accent);
    color: #fff;
}


.tryon-tool-card .tryon-item-thumb,
.tryon-inspector-selected-thumb,
.tryon-workspace-view,
.tryon-output-btn,
.tryon-actions-left .btn-ghost,
.tryon-segment,
.tryon-segment-btn,
.tryon-visual-select,
.tryon-visual-textarea,
.tryon-toggle-row,
.tryon-primary-cta,
.tryon-secondary-cta {
    border-radius: 8px;
}


.tryon-editor {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.tryon-editor[hidden] {
    display: none;
}

.tryon-editor-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.tryon-editor-tools {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.tryon-editor-tool,
.tryon-editor-btn,
.tryon-editor-apply,
.tryon-editor-chip {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.tryon-editor-tool.is-active {
    background: var(--accent);
    color: #fff;
}

.tryon-editor-btn,
.tryon-editor-chip {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.tryon-editor-btn:hover,
.tryon-editor-chip:hover {
    border-color: var(--accent);
}

.tryon-editor-chip.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.tryon-editor-apply {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.tryon-editor-apply:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.tryon-editor-options {
    flex: 0 0 auto;
}

.tryon-editor-option-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.tryon-editor-option-row[hidden] {
    display: none;
}

.tryon-editor-option-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tryon-editor-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tryon-editor-slider-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.tryon-editor-slider-field em {
    color: var(--text);
    font-style: normal;
}

.tryon-editor-slider-field input {
    flex: 1 1 auto;
}

.tryon-editor-adjust {
    gap: 10px 22px;
}

.tryon-editor-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.tryon-editor-canvas {
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
    cursor: crosshair;
}

.tryon-editor-hint {
    flex: 0 0 auto;
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* --- the uploaded asset itself ---
   Sits above the preview-image editor and is a different thing: this is the file
   that gets rendered, that one is a thumbnail somebody chose. Shown on a
   chequerboard because for a cut-out the transparency is the thing worth
   checking, and a filled background looks perfectly correct against white right
   up until it covers the hand in the try-on. */

.asset-file-preview {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
}

.asset-file-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;

    /* Two crossed gradients per square is the cheapest chequerboard that scales
       with the theme; an image would be one more file to keep in step. */
    --checker: var(--surface-2);
    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, var(--checker) 25%, transparent 25%),
        linear-gradient(-45deg, var(--checker) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--checker) 75%),
        linear-gradient(-45deg, transparent 75%, var(--checker) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.asset-file-preview-stage img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
}

.asset-file-preview-empty {
    max-width: 32ch;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.asset-file-preview-caption {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.asset-file-preview-name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Says the file is chosen but not yet saved, which is the one thing a preview
   of an unsent upload has to be honest about. */
.asset-file-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--ok-border);
    border-radius: 999px;
    background: var(--ok-bg);
    color: var(--ok-text);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.asset-file-preview-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.asset-file-preview-badge[hidden] {
    display: none;
}

.admin-upload-editor {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.admin-upload-editor-preview {
    display: grid;
    gap: 12px;
    align-items: start;
}

@media (min-width: 920px) {
    .admin-upload-editor-preview {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }
}

.admin-upload-editor-preview-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--surface), var(--surface-2));
    overflow: hidden;
}

.admin-upload-editor-preview-card img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: calc(var(--radius) - 6px);
}

.admin-upload-editor-placeholder {
    max-width: 28ch;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.admin-upload-editor-preview-actions {
    display: grid;
    gap: 8px;
    align-content: start;
}

.admin-upload-editor-panel {
    min-height: 0;
}

.admin-upload-editor-canvas-wrap {
    min-height: 360px;
}

@media (max-width: 640px) {
    .admin-upload-editor-canvas-wrap {
        min-height: 280px;
    }
}

/* Edited output is shown whole, not cropped to the stage box. */
.tryon-stage.is-edited .tryon-model-scene {
    object-fit: contain;
    background: var(--surface-2);
}


.tryon-quality-option.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}


.tryon-quality-option.is-active .tryon-quality-dot {
    border-color: var(--accent);
    background:
        radial-gradient(circle, var(--accent) 0 4px, transparent 4.5px);
}


/* While editing, the editor takes the stage's place in the workspace column. */
.tryon-studio-workspace.is-editing .tryon-stage-shell,
.tryon-studio-workspace.is-editing .tryon-workspace-actionsbar {
    display: none;
}

/* ==========================================================================
   AR platform admin
   Builds on the shared .panel / .data-table / .drawer / .form-grid primitives;
   only what the AR screens genuinely add lives here.
   ========================================================================== */

.ar-dashboard-toolbar {
    align-items: flex-start;
}

.ar-dashboard-toolbar > * {
    min-width: 0;
}

.ar-dashboard-toolbar p {
    flex: 1 1 520px;
    max-width: 100%;
}

/* Dashboard panels sit side by side on wide screens and stack below that,
   without a media query per panel. */
.ar-dashboard-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
    align-items: start;
}

.ar-dashboard-page .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.ar-dashboard-page .metric-card {
    border-radius: 0;
}

.ar-dashboard-page .metric-card-published .metric-icon {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.ar-dashboard-page .metric-card-configured .metric-icon {
    background: var(--info-bg);
    color: var(--info-text);
}

.ar-dashboard-page .metric-card-assets .metric-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

.ar-dashboard-page .metric-card-warn .metric-icon {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.ar-dashboard-page .metric-card-error .metric-icon {
    background: var(--error-bg);
    color: var(--error-text);
}

.ar-product-coverage-page .metric-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}

.ar-product-coverage-page .metric-card {
    border-radius: 0;
}

.ar-product-coverage-page .metric-card-live .metric-icon {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.ar-product-coverage-page .metric-card-warn .metric-icon {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.ar-product-coverage-page .metric-card-error .metric-icon {
    background: var(--error-bg);
    color: var(--error-text);
}

.ar-product-coverage-page .metric-card-draft .metric-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

.ar-product-coverage-page .metric-card-matrix .metric-icon {
    background: var(--surface-2);
    color: var(--text);
}

.ar-product-coverage-page .filter-bar {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.35fr)
        minmax(100px, .5fr)
        minmax(120px, .65fr)
        minmax(88px, .4fr)
        auto
        auto;
    align-items: flex-end;
}

.ar-product-coverage-page .filter-field-search {
    max-width: 560px;
}

.ar-product-coverage-page .filter-actions {
    grid-column: auto;
    justify-self: end;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.ar-product-coverage-page .filter-actions .btn-ghost {
    white-space: nowrap;
}

.ar-dashboard-tabset {
    display: grid;
    }

.ar-dashboard-tabs-shell {
    margin: -2px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border);
}

.ar-dashboard-tabs {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    min-width: max-content;
    padding: 0 20px;
}

.ar-dashboard-tab {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.ar-dashboard-tab-panel {
    display: grid;
    gap: 20px;
}

.ar-dashboard-tab-panel[hidden] {
    display: none;
}

/* Counters that need to read as a problem rather than a statistic. */
.analytics-card.is-alert {
    border-color: var(--error-border);
    background: var(--error-bg);
}

.analytics-card.is-alert .analytics-value,
.analytics-card.is-alert .analytics-label {
    color: var(--error-text);
}

.analytics-card.is-warn {
    border-color: var(--warn-bg);
    background: var(--warn-bg);
}

.analytics-card.is-warn .analytics-value,
.analytics-card.is-warn .analytics-label {
    color: var(--warn-text);
}

/* The AR forms are long enough to need internal headings. */
.ar-form-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.ar-form-section > h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.ar-form-section > .muted {
    margin: 0 0 16px;
    font-size: 13px;
}

/* Five finger blocks, each a small form of its own. */
.ar-finger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.ar-finger-row {
    margin: 0;
    padding: 12px 14px 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ar-finger-row > legend {
    padding: 0 6px;
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Landmark bindings are many small numeric inputs; a tighter grid than the
   general form grid keeps all fourteen roles visible without scrolling. */
.ar-landmark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.ar-landmark-grid .field-help {
    font-size: 11px;
}

.ar-landmark-summary {
    font-size: 11px;
    white-space: nowrap;
}

/* Validation report: one line per check, coloured by severity. */
.ar-check-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.ar-check-list > li {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
}

.ar-check-list > li.is-ok {
    background: var(--ok-bg);
    border-color: var(--ok-border);
    color: var(--ok-text);
}

.ar-check-list > li.is-warning {
    background: var(--warn-bg);
    border-color: var(--warn-bg);
    color: var(--warn-text);
}

.ar-check-list > li.is-error {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

/* Material colour chip in the list tables. */
.ar-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* Anchor and jewellery forms carry far more fields than a user form. */
.drawer-wide {
    width: min(1080px, 82vw);
}

@media (max-width: 900px) {
    .drawer-wide {
        width: 100%;
    }
}

/* ==========================================================================
   AR try-on studio
   ========================================================================== */

.ar-studio {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;    
}

@media (max-width: 1200px) {
    .ar-studio {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
    .ar-studio-catalog {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .ar-studio {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ar-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ar-panel-kicker {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ar-stage-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.ar-stage-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px 12px;
    min-width: 0;
}

.ar-edit-btn {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--accent-strong);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ar-edit-btn:hover {
    border-color: rgba(138, 109, 59, .38);
    box-shadow: 0 10px 20px rgba(138, 109, 59, .12);
    transform: translateY(-1px);
}

.ar-mode-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 4px;
    width: min(100%, 232px);
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

.ar-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.ar-mode-btn:hover {
    color: var(--text);
}

.ar-mode-btn.is-active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(138, 109, 59, .22);
}

.ar-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    margin-bottom: 12px;
}

.ar-editor[hidden] {
    display: none;
}

.ar-editor-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ar-editor-tools {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.ar-editor-tool,
.ar-editor-btn,
.ar-editor-apply,
.ar-editor-chip {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ar-editor-tool.is-active {
    background: var(--accent);
    color: #fff;
}

.ar-editor-btn,
.ar-editor-chip {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.ar-editor-btn:hover,
.ar-editor-chip:hover {
    border-color: var(--accent);
}

.ar-editor-chip.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.ar-editor-apply {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.ar-editor-apply:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.ar-editor-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ar-editor-option-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.ar-editor-option-row[hidden] {
    display: none;
}

.ar-editor-option-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ar-editor-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ar-editor-slider-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.ar-editor-slider-field em {
    color: var(--text);
    font-style: normal;
}

.ar-editor-slider-field input {
    flex: 1 1 auto;
}

.ar-editor-adjust {
    gap: 10px 22px;
}

.ar-editor-canvas-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at top right, rgba(244, 213, 152, .1), transparent 28%),
        linear-gradient(180deg, var(--surface), var(--surface-2));
}

.ar-editor-canvas {
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
    cursor: crosshair;
}

.ar-editor-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.ar-studio-stage-panel.is-editing .ar-stage,
.ar-studio-stage-panel.is-editing .ar-stage-controls {
    display: none;
}

/* --- catalogue --- */

.ar-catalog-list {
    display: grid;
    gap: 8px;
    max-height: 460px;
    overflow-y: auto;
}

.ar-catalog-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.ar-catalog-item:hover {
    background: var(--surface-2);
}

.ar-catalog-item.is-selected {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.ar-catalog-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ar-catalog-title {
    font-weight: 600;
}

/* --- stage ---
   The video, the WebGL canvas and the debug canvas are stacked in one box and
   must stay pixel-aligned, so all three fill the same positioned container. */

.ar-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(180deg, #e7eef7 0%, #cad6e4 100%) center/cover no-repeat;
    border: 1px solid rgba(215, 224, 236, .96);
    border-radius: 26px;
    box-shadow: 0 20px 48px rgba(48, 73, 100, .13), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.ar-video,
.ar-canvas,
.ar-debug-canvas,
.ar-drag-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Above the zoomed media, so neither is magnified with it. */
.ar-stage-message,
.ar-stage-badge {
    z-index: 3;
}

.ar-video {
    object-fit: cover;
}

/* Only the video is flipped in CSS. The 3D placement is reflected by the
   renderer and the overlay flips its own context, because scaling either of
   those would invert their geometry. */
.ar-stage.is-mirrored .ar-video {
    transform: scaleX(-1);
}

.ar-stage.has-photo .ar-video {
    display: none;
}

.ar-stage[data-preview-provider="FACE_LANDMARKER"],
.ar-stage[data-preview-provider="POSE_LANDMARKER"] {
    background-position: center 18%;
}

/* That bias exists to sit a head high in a box the photo already fits, where
   nothing is cropped and it costs nothing. A picked frame does crop, and the
   renderer crops from the centre, so the photo has to as well or the piece
   parts company with the face. */
.ar-stage[data-stage-ratio][data-preview-provider="FACE_LANDMARKER"],
.ar-stage[data-stage-ratio][data-preview-provider="POSE_LANDMARKER"] {
    background-position: center;
}

.ar-stage.has-photo[data-preview-layout="portrait"] {
    max-width: min(100%, 560px);
    margin-inline: auto;
}

.ar-canvas,
.ar-debug-canvas {
    pointer-events: none;
}

.ar-drag-canvas {
    pointer-events: none;
    z-index: 2;
}

.ar-stage.is-draggable .ar-stage-media {
    cursor: grab;
    touch-action: none;
}

.ar-stage.is-dragging .ar-stage-media {
    cursor: grabbing;
}

.ar-stage-message {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 20px;
    background: linear-gradient(to top, rgba(11, 14, 20, .92), rgba(11, 14, 20, 0));
    color: #eef2f8;
}

.ar-stage-message[data-tone="error"] .ar-stage-headline {
    color: #ffb4b0;
}

.ar-stage-message .muted {
    color: #b8c1d1;
}

.ar-stage-headline {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}

.ar-stage-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 10px 18px;
    background: rgba(47, 123, 72, .96);
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 12px 28px rgba(23, 56, 34, .18);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}

.ar-stage-badge.is-lost {
    background: rgba(142, 47, 43, .92);
}

/* --- model strip ---
   The thumbnails a customer flicks along to see a piece on a different model.
   Scrolls rather than wraps: a second row would push the stage controls below
   the fold on a phone, which is where most of this is used. */

.ar-model-strip {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.ar-model-strip[hidden] {
    display: none;
}

.ar-model-thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--surface-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ar-model-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ar-model-thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(48, 73, 100, .14);
}

.ar-model-thumb.is-active {
    border-color: var(--accent);
    box-shadow: 0 8px 18px rgba(138, 109, 59, .22);
}

.ar-model-thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ar-model-strip-empty {
    margin: 12px 0 0;
    font-size: 13px;
}

.ar-model-strip-empty[hidden] {
    display: none;
}

.ar-stage-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Pushes both overlay toggles to the right of the action row. */
.ar-track-toggle {
    margin-left: auto;
}

/* --- controls --- */

.ar-studio-controls {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.ar-inspector-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 247, 251, .92));
}

.ar-inspector-tab {
    min-height: 60px;
    padding: 0 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ar-inspector-tab:hover {
    color: var(--text);
    background: rgba(54, 109, 240, .04);
}

.ar-inspector-tab.is-active {
    color: var(--accent-strong);
    border-bottom-color: var(--accent);
}

.ar-inspector-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    max-height: min(78vh, 920px);
    padding: 18px;
    overflow-y: auto;
}

.ar-inspector-panel[hidden] {
    display: none;
}

.ar-inspector-card {
    border: 1px solid rgba(54, 109, 240, .14);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 248, 252, .98));
    box-shadow: 0 14px 28px rgba(31, 60, 96, .08);
}

.ar-inspector-selected {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
}

.ar-inspector-selected-thumb {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, .78), transparent 56%),
        linear-gradient(135deg, rgba(54, 109, 240, .18), rgba(54, 109, 240, .06));
    color: var(--accent-strong);
    font-size: 26px;
    font-weight: 800;
}

.ar-inspector-selected-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ar-inspector-selected-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ar-inspector-selected-copy h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
}

.ar-inspector-selected-copy .muted {
    margin: 0;
    font-size: 14px;
}

.ar-inspector-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(54, 109, 240, .18);
    border-radius: 999px;
    background: rgba(54, 109, 240, .06);
    color: #6a7f9d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ar-inspector-meta-card {
    padding: 6px 16px;
}

.ar-inspector-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.ar-inspector-meta-row + .ar-inspector-meta-row {
    border-top: 1px solid rgba(54, 109, 240, .1);
}

.ar-inspector-meta-label {
    color: #7b8ea8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ar-inspector-meta-value {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.ar-control-group {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.ar-control-group:last-of-type {
    border-bottom: 0;
}

.ar-segment {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* Five fingers do not fit on one row in a narrow column. */
.ar-segment-wrap {
    flex-wrap: wrap;
    border-radius: var(--radius);
}

.ar-segment-btn {
    flex: 1 1 auto;
    padding: 6px 10px;
    font-variant-numeric: tabular-nums;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ar-segment-btn:hover {
    color: var(--text);
}

.ar-segment-btn.is-active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: var(--shadow);
}

.ar-nudge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.ar-nudge-grid .btn-ghost {
    padding: 7px 8px;
    font-size: 13px;
}

.ar-privacy {
    margin: 0;
    font-size: 12px;
}

.ar-history-empty {
    padding: 18px;
    border: 1px dashed rgba(54, 109, 240, .24);
    border-radius: 18px;
    background: rgba(54, 109, 240, .04);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.ar-history-list {
    display: grid;
    gap: 12px;
}

.ar-history-item {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(54, 109, 240, .14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 253, .98));
}

.ar-history-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #7b8ea8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ar-history-title {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.ar-history-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.ar-studio.is-empty .ar-studio-stage-panel,
.ar-studio.is-empty .ar-studio-controls {
    opacity: .55;
}

/* ==========================================================================
   Landmark inspector
   ========================================================================== */

.li-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

@media (max-width: 1000px) {
    .li-shell {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Not mirrored, unlike the studio: an index has to mean the same side here as it
   does in the anchor template it will be pasted into. */
.li-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0b0e14 center/contain no-repeat;
    border-radius: var(--radius);
}

.li-stage > video,
.li-stage > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.li-stage > video {
    object-fit: cover;
}

.li-stage.has-photo > video {
    display: none;
}

/* The canvas takes pointer events here, because hovering it is the whole point. */
.li-stage > canvas {
    cursor: crosshair;
}

.li-readout {
    margin: 12px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

.li-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.li-status {
    margin: 10px 0 0;
    font-size: 13px;
}

/* A file input styled as a button, so it sits with the others. */
.li-file input[type="file"] {
    display: none;
}

.li-file > .btn-ghost {
    display: inline-block;
    cursor: pointer;
}

.li-side .form-field + .form-field {
    margin-top: 16px;
}

.li-side input[readonly] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- AR stage: zoom and view controls ------------------------------------- */

/* The feed and both canvases scale together, so the jewellery stays registered
   with the body at any zoom. The stage itself keeps its box, and the message and
   badge sit outside the wrapper so they are never magnified. */
.ar-stage-media {
    position: absolute;
    inset: 0;
    transform-origin: center center;
    transition: transform .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .ar-stage-media {
        transition: none;
    }
}

.ar-stage-zoom,
.ar-stage-view {
    position: absolute;
    bottom: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: rgba(77, 72, 70, .78);
    border-radius: 999px;
    box-shadow: 0 18px 34px rgba(30, 24, 21, .18);
    backdrop-filter: blur(10px);
}

.ar-stage-zoom {
    left: 16px;
}

.ar-stage-view {
    right: 16px;
}

.ar-stage-zoom-btn,
.ar-stage-view-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #eef2f8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ar-stage-zoom-btn:hover,
.ar-stage-view-btn:hover {
    background: rgba(255, 255, 255, .16);
}

.ar-stage-zoom-btn:disabled {
    opacity: .38;
    cursor: default;
}

.ar-stage-view-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, .24);
}

.ar-stage-view-btn .icon {
    width: 20px;
    height: 20px;
}

.ar-stage-zoom-level {
    min-width: 50px;
    color: #eef2f8;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
}

.ar-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Wide screen ---------------------------------------------------------- */

/* The stage takes the full width and the two side panels drop beneath it, in the
   manner of a video player's theatre mode. They stay reachable rather than being
   hidden, because the catalogue is how you change piece. */
.ar-studio.is-wide {
    grid-template-columns: minmax(0, 1fr);
}

.ar-studio.is-wide .ar-studio-stage-panel {
    order: -1;
}

.ar-studio.is-wide .ar-stage {
    aspect-ratio: 21 / 9;
}

.ar-studio.is-wide .ar-stage.has-photo[data-preview-layout="portrait"] {
    max-width: min(100%, 560px);
}

@media (max-width: 860px) {
    .ar-studio.is-wide .ar-stage {
        aspect-ratio: 16 / 9;
    }

    .ar-studio.is-wide .ar-stage.has-photo[data-preview-layout="portrait"] {
        max-width: min(100%, 560px);
    }
}

/* --- Full screen ---------------------------------------------------------- */

.ar-stage:fullscreen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
}

/* Chrome and Safari still need their own selectors here. */
.ar-stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #000;
}

/* Saving a placement sits with the nudge pad, since it is what makes a nudge
   permanent. */
.ar-save-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* --- AR model photo admin ---
   A gallery rather than a table: which photo it is matters more here than any
   column of numbers about it. */

.ar-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.ar-photo-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
}

.ar-photo-card.is-off {
    opacity: .55;
}

.ar-photo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--surface-2);
}

.ar-photo-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
    font-size: 13px;
}

.ar-photo-name {
    font-weight: 700;
}

.ar-photo-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* --- storefront embed ---
   The same stage as the staff studio with the application around it removed:
   inside a storefront modal there is no room, and no reason, for chrome. */

.ar-embed-body {
    margin: 0;
    background: var(--surface);
}

.ar-embed {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 12px;
}

.ar-studio.is-embed {
    display: block;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.ar-studio.is-embed .ar-studio-stage-panel {
    padding: 14px;
}

.ar-embed-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ar-embed-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ar-embed-title .muted {
    font-size: 12px;
}

.ar-embed-head .ar-mode-switch {
    margin-left: auto;
}

.ar-embed-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.ar-embed-close:hover {
    border-color: var(--accent);
}

.ar-embed-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.ar-embed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The commerce bar, pinned under the stage the way a shop's own buy row sits
   under a product image. */
.ar-embed-buy {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.ar-embed-buy-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ar-embed-buy-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-embed-buy-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ar-embed-buy-price s {
    color: var(--text-muted);
    font-size: 13px;
}

.ar-embed-buy-price strong {
    font-size: 17px;
}

.ar-embed-atc {
    flex: 0 0 auto;
    margin-left: auto;
}

.ar-embed-atc:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.ar-embed-empty {
    margin: auto;
    padding: 32px;
    text-align: center;
}

.ar-embed-empty-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 520px) {
    .ar-embed-head {
        flex-wrap: wrap;
    }

    .ar-embed-head .ar-mode-switch {
        order: 3;
        width: 100%;
        margin-left: 0;
    }
}


/* ============================================================================
   Storefront embed: the shopper-facing layout.

   Scoped under .ar-embed-body throughout. The staff studio shares
   .ar-mode-switch, .ar-stage-zoom and .ar-model-strip, and it wants them laid
   out quite differently -- so every rule here is deliberately one specificity
   step above the shared ones rather than editing them.
   ========================================================================= */

.ar-embed-body .ar-embed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
}

.ar-embed-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.ar-embed-brand small {
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.ar-embed-brand strong {
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--text);
}

/* A circular button on a light ground, matching the close affordance shoppers
   already expect from a photo viewer. */
.ar-embed-body .ar-embed-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.ar-embed-body .ar-embed-close:hover {
    background: var(--border);
}

/* Zoom stacks vertically here. Horizontal controls at the bottom-left would
   collide with the mode switch, which now sits centred on the same edge. */
.ar-embed-body .ar-stage-zoom {
    flex-direction: column;
    gap: 6px;
    bottom: auto;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    padding: 6px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 26px rgba(30, 24, 21, .16);
}

.ar-embed-body .ar-stage-zoom-btn {
    width: 40px;
    height: 40px;
    color: var(--text);
    font-size: 20px;
}

.ar-embed-body .ar-stage-zoom-btn:hover {
    background: rgba(0, 0, 0, .07);
}

/* Overlaid on the stage, centred on its bottom edge. */
.ar-embed-body .ar-mode-switch {
    position: absolute;
    z-index: 3;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    grid-template-columns: repeat(3, minmax(84px, auto));
    width: auto;
    max-width: calc(100% - 32px);
    background: rgba(255, 255, 255, .92);
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(30, 24, 21, .2);
    backdrop-filter: blur(10px);
}

.ar-embed-body .ar-mode-btn.is-active {
    background: #1f1c1a;
    color: #fff;
    box-shadow: none;
}

/* Disabled reads as "not for this piece", not as broken: still legible, but
   clearly not pressable. */
.ar-embed-body .ar-mode-btn:disabled {
    opacity: .38;
    cursor: default;
}

.ar-stage-flip {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--text);
    font-size: 19px;
    cursor: pointer;
}

.ar-stage-flip[hidden] {
    display: none;
}

/* ---- the two horizontal strips ---- */

.ar-strip-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 8px 0;
}

.ar-strip-row[hidden] {
    display: none;
}

.ar-strip-nav {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.ar-strip-nav:hover {
    background: var(--surface-2);
}

.ar-strip-nav[hidden] {
    display: none;
}

/* Scrollbar hidden rather than styled: the arrows are the affordance, and a
   visible bar under a row of photographs reads as a rendering artefact. */
.ar-embed-body .ar-model-strip,
.ar-metal-strip {
    flex: 1 1 auto;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 2px;
}

.ar-embed-body .ar-model-strip::-webkit-scrollbar,
.ar-metal-strip::-webkit-scrollbar {
    display: none;
}

.ar-embed-body .ar-model-thumb {
    flex: 0 0 auto;
    width: 88px;
    height: 78px;
    border-radius: 4px;
    overflow: hidden;
}

.ar-embed-body .ar-model-thumb.is-active {
    outline: 2px solid #1f1c1a;
    outline-offset: 1px;
}

/* ---- finish swatches ----
   Named .ar-metal-swatch, not .ar-swatch: that class already exists as the 14px
   colour chip in the materials admin, and reusing it here silently replaced it
   everywhere. Two different shapes should not share a name. */

.ar-metal-swatch {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 999px;
    /* Set inline from the material's own base_color, so a new finish is a row in
       ar_material rather than another CSS class. */
    background: var(--swatch, #ddd);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* Dark text on metals, which are all pale. Held as a token so a dark finish --
   oxidised silver, black rhodium -- can flip it without a new rule. */
.ar-metal-swatch span {
    color: var(--swatch-ink, #3a3330);
    pointer-events: none;
}

.ar-metal-swatch:hover {
    transform: translateY(-1px);
}

/* A ring around the disc rather than a fill, so the metal's own colour is never
   obscured by the selection state. */
.ar-metal-swatch.is-active {
    box-shadow: 0 0 0 2px #1f1c1a;
}

.ar-metal-swatch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ar-live-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 4px;
    text-align: center;
}

.ar-live-intro[hidden] {
    display: none;
}

@media (max-width: 520px) {
    .ar-embed-body .ar-mode-switch {
        grid-template-columns: repeat(3, minmax(70px, auto));
    }

    .ar-embed-body .ar-model-thumb {
        width: 72px;
        height: 64px;
    }
}

/* The hand-off panel. Positioned outside the stage, top-right, so it reads as an
   offer beside the try-on rather than a control within it. Hidden on narrow
   viewports: a phone is already the device the code points at. */
/* The panel is positioned against the stage panel, which needs to be a
   containing block for it. Scoped to the embed so the staff studio's layout is
   untouched. */
.ar-embed-body .ar-studio-stage-panel {
    position: relative;
}

.ar-handoff {
    position: absolute;
    z-index: 4;
    top: 12px;
    right: -168px;
    width: 156px;
    padding: 12px;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 16px 36px rgba(30, 24, 21, .18);
    text-align: center;
}

.ar-handoff[hidden] {
    display: none;
}

.ar-handoff-qr {
    display: block;
    width: 132px;
    height: 132px;
    margin: 0 auto 8px;
    /* The code is generated black-on-white because a scanner needs a fixed
       polarity; the panel keeps that patch light in either theme. */
    background: #fff;
    border-radius: 4px;
}

.ar-handoff-hint {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-muted);
}

/* No room to float it outside once the modal is near the viewport edge, and a
   coarse pointer means the shopper is holding the phone already. */
@media (max-width: 1180px) {
    .ar-handoff {
        display: none;
    }
}

/* Keeps the buy bar honest when a finish has no compare-at price. */
.ar-embed-buy-price s[hidden],
.ar-embed-buy-price strong[hidden] {
    display: none;
}


/* ============================================================================
   Embed layout: fits the iframe exactly, never scrolls.

   The stage previously took its height from the model photo's aspect ratio. A
   portrait photo then made it taller than the modal, which pushed the mode
   switch, both strips and the buy bar below the fold -- the controls a shopper
   needs most were the ones that disappeared. Here the stage takes whatever is
   left after those rows instead, and the photo is fitted into it.
   ========================================================================= */

body.ar-embed-body {
    /* dvh rather than % so no height is needed on <html>, and rather than vh so a
       mobile browser's collapsing toolbar does not leave the strips cut off. */
    height: 100dvh;
    /* Nothing here may scroll. If a control does not fit, the layout is wrong --
       hiding it behind a scrollbar inside a modal only makes it unfindable. */
    overflow: hidden;
}

.ar-embed-body .ar-embed {
    height: 100%;
    min-height: 0;
    padding: 0;
}

.ar-embed-body .ar-studio.is-embed {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-width: none;
}

.ar-embed-body .ar-studio-stage-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Takes the remaining height. aspect-ratio is dropped deliberately: the whole
   bug was letting the image decide how tall the modal is. */
.ar-embed-body .ar-stage {
    flex: 1 1 auto;
    min-height: 160px;
    aspect-ratio: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}

.ar-embed-body .ar-stage-media {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
}

/* contain, not cover: a hand cropped at the knuckles is worse than letterboxing,
   and the tracker's landmarks have to stay on screen for the piece to land. */
.ar-embed-body .ar-video,
.ar-embed-body .ar-canvas,
.ar-embed-body .ar-debug-canvas {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Everything outside the stage keeps its natural height, so the stage absorbs
   the slack rather than these rows being squeezed. */
.ar-embed-body .ar-embed-head,
.ar-embed-body .ar-strip-row,
.ar-embed-body .ar-embed-controls,
.ar-embed-body .ar-live-intro,
.ar-embed-body .ar-model-strip-empty {
    flex: 0 0 auto;
}

/* Tighter than the staff studio: this is competing with a product page for
   height, not sitting on a screen of its own. */
.ar-embed-body .ar-strip-row {
    padding: 8px 8px 0;
}

.ar-embed-body .ar-embed-controls {
    padding: 8px 10px 10px;
}

.ar-embed-body .ar-model-thumb {
    width: 76px;
    height: 66px;
}

.ar-embed-body .ar-metal-swatch {
    width: 40px;
    height: 40px;
}

/* Short viewports give the strips priority: a shopper can still see the piece in
   a smaller stage, but cannot choose a finish they cannot reach. */
@media (max-height: 720px) {
    .ar-embed-body .ar-model-thumb {
        width: 62px;
        height: 54px;
    }

    .ar-embed-body .ar-metal-swatch {
        width: 36px;
        height: 36px;
    }

    .ar-embed-body .ar-stage {
        min-height: 140px;
    }
}


/* ============================================================================
   Filter bar and pager for admin list screens.

   Written generically rather than for the materials page: this is the first
   filtered, paged list in the application and every later one should look and
   behave the same rather than inventing its own.
   ========================================================================= */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* The search field earns the slack; the selects are a fixed width because their
   contents are. */
.filter-field:first-child {
    flex: 1 1 260px;
}

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

.filter-field input,
.filter-field select {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.filter-field input:focus-visible,
.filter-field select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 700px) {
    .filter-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ---- pager ---- */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 4px 2px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.pager-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pager-count {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    /* Digits in a count that changes as you page should not make the row jump. */
    font-variant-numeric: tabular-nums;
}

.pager-total,
.pager-size {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pager-count strong {
    color: var(--text);
}

.pager-total strong,
.pager-size strong {
    color: var(--text);
}

.pager-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pager-position {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding: 0 4px;
}

.pager-position strong {
    color: var(--text);
}

.pager-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
}

.pager-btn:hover {
    background: var(--surface-2);
}

/* Kept visible but inert at the ends, so the control does not move under the
   cursor as you reach the first or last page. */
.pager-btn.is-disabled {
    opacity: .38;
    pointer-events: none;
}

.pager-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.data-table-shell > .pager,
.data-table-shell > [data-live-pagination] {
    border-top: 1px solid var(--border);
}

.data-table-shell > .pager {
    margin-top: 0;
    padding: 12px 16px 14px;
    border-top-width: 1px;
    background: linear-gradient(180deg, rgba(247, 250, 255, .82), rgba(255, 255, 255, .96));
}

.data-table-shell > [data-live-pagination] {
    padding: 0 16px;
}

.data-table-shell > [data-live-pagination] .pager {
    margin-top: 0;
    padding: 12px 0 14px;
    border-top: 0;
}

/* ---- the short label, shown as it appears on the swatch disc ---- */

.chip-label {
    display: inline-block;
    min-width: 34px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    color: var(--text);
}


/* Checkbox filters sit on the baseline with the selects, not above them. */
.filter-check {
    justify-content: flex-end;
    padding-bottom: 9px;
}

.filter-check label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
}

.filter-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.empty-state {
    padding: 22px 24px;
    margin-bottom: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.empty-state p {
    margin: 0 0 6px;
}

.empty-state p:last-child {
    margin-bottom: 0;
}

/*
  A picture for an empty screen, from fragments/illustrations. Its colours are
  tokens scoped to it, so dark mode only has to restate them.
*/
.empty-illustration {
    --ill-blob: #eaf2fb;
    --ill-line: #d6dfeb;
    --ill-frame: #ffffff;
    --ill-pane: #f2f6fb;
    --ill-cat: #4a4b50;
    --ill-leaf: #5bbd8b;
    --ill-leaf-soft: #a8dcc0;
    --ill-pot: #bcdcf5;

    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto 18px;
}

[data-theme="dark"] .empty-illustration {
    --ill-blob: #1b2535;
    --ill-line: #2f3a4b;
    --ill-frame: #1a1f28;
    --ill-pane: #212734;
    --ill-cat: #aab4c3;
    --ill-leaf: #4fa57a;
    --ill-leaf-soft: #2f6b4d;
    --ill-pot: #2c4459;
}

.empty-illustration .ill-blob { fill: var(--ill-blob); }
.empty-illustration .ill-line { stroke: var(--ill-line); stroke-width: 2; stroke-linecap: round; }
.empty-illustration .ill-frame { fill: var(--ill-frame); stroke: var(--ill-line); stroke-width: 5; }
.empty-illustration .ill-pane { fill: var(--ill-pane); }
.empty-illustration .ill-bars { fill: none; stroke: var(--ill-line); stroke-width: 4; }
.empty-illustration .ill-dots { fill: var(--ill-line); }
.empty-illustration .ill-cat { fill: var(--ill-cat); }
.empty-illustration .ill-tail { fill: none; stroke: var(--ill-cat); stroke-width: 7; stroke-linecap: round; }
.empty-illustration .ill-neck { fill: none; stroke: var(--ill-cat); stroke-width: 18; stroke-linecap: round; }
.empty-illustration .ill-leaf { fill: var(--ill-leaf); }
.empty-illustration .ill-leaf-soft { fill: var(--ill-leaf-soft); }
.empty-illustration .ill-pot { fill: var(--ill-pot); }


/* ============================================================================
   Services Transaction History: status chips over a plain table, which shows
   one centred row with a picture when there is nothing in it. A table of its
   own rather than .data-table, which app.js would give a grid toolbar.
   ========================================================================= */

.svc-title {
    margin: 18px;
    font-size: 20px;
    font-weight: 400;
}

.svc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px;
}

.svc-chips .ri-chip {
    text-decoration: none;
}

.svc-table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.svc-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 14px;
}

.svc-table th {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.svc-empty td {
    padding: 40px 16px 48px;
    text-align: center;
}

.svc-empty .empty-illustration {
    max-width: 300px;
    margin-bottom: 22px;
}

.svc-empty p {
    margin: 0;
    font-weight: 500;
}


/* ============================================================================
   Catalogue Coverage.

   A neutral palette, scoped to this page rather than applied globally. The tokens
   below are redefined on .coverage-page only, so they cascade to everything
   inside it and change nothing anywhere else in the ERP -- the brown accent is
   still the application's identity, and swapping it globally is a decision
   nobody asked for.
   ========================================================================= */

.coverage-page {
    --accent: #18181b;
    --accent-strong: #000000;
    --accent-soft: #f4f4f5;
    --coverage-chip: #f4f4f5;
    --coverage-chip-text: #52525b;
    --coverage-icon-bg: #f4f4f5;
    --coverage-icon-fg: #18181b;
}

/* The dark tiles in the reference are the light-theme look. In dark mode the same
   design has to invert or the cards become black-on-black. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .coverage-page {
        --accent: #e6e9ee;
        --accent-strong: #ffffff;
        --accent-soft: #262c38;
        --coverage-chip: #262c38;
        --coverage-chip-text: #98a2b3;
        --coverage-icon-bg: #262c38;
        --coverage-icon-fg: #e6e9ee;
    }
}

:root[data-theme="dark"] .coverage-page {
    --accent: #e6e9ee;
    --accent-strong: #ffffff;
    --accent-soft: #262c38;
    --coverage-chip: #262c38;
    --coverage-chip-text: #98a2b3;
    --coverage-icon-bg: #262c38;
    --coverage-icon-fg: #e6e9ee;
}

/* ---- metric tiles ---- */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.metric-icon {
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--coverage-icon-bg);
    color: var(--coverage-icon-fg);
}

/* The first tile carries the headline number, so its icon is filled rather than
   tinted -- one point of emphasis, not six. */
.metric-card.is-primary .metric-icon {
    background: var(--accent);
    color: var(--surface);
}

.metric-icon .icon {
    width: 20px;
    height: 20px;
}

.metric-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
}

.metric-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.metric-sub {
    font-size: 12px;
    color: var(--text-muted);
}

/* Non-zero counts that mean work outstanding. A tint rather than a colour, so it
   reads as emphasis inside a neutral page instead of an alarm. */
.metric-card.is-flagged {
    border-color: var(--text-muted);
}

/* ---- toolbar ---- */

.coverage-page .page-toolbar {
    align-items: flex-start;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-icon .icon {
    width: 16px;
    height: 16px;
}

/* ---- filter bar ---- */

.coverage-page .filter-bar {
    background: var(--surface);
    border-radius: 12px;
    align-items: flex-end;
}

/* The magnifier sits inside the field, so the search box reads as a search box
   before anyone reads its placeholder. */
.filter-search {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-search input {
    width: 100%;
    padding-right: 60px;
}

.filter-search-clear {
    position: absolute;
    right: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    cursor: pointer;
}

.filter-search-clear:hover {
    color: var(--text);
}

.filter-search-clear:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.filter-search-clear .icon {
    position: static;
    width: 16px;
    height: 16px;
    color: currentColor;
}

.filter-search > .icon {
    position: absolute;
    right: 11px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

/* ---- table ---- */

.coverage-page .data-table td code {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--coverage-chip);
    color: var(--coverage-chip-text);
    font-size: 12px;
}

/* The handle is the identifier people scan down, so it stays plain and dark
   rather than becoming another chip competing with the design code. */
.coverage-page .data-table td:first-child code {
    background: transparent;
    padding-left: 0;
    color: var(--text);
}

.coverage-page .status {
    background: var(--coverage-chip);
    border-color: transparent;
    color: var(--coverage-chip-text);
}

/* Live is the one state worth colouring: it is the only one that means a shopper
   can actually use the thing. */
.coverage-page .status.status-on {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.coverage-page .pager {
    border-top-color: var(--border);
    padding-top: 14px;
}

/* ---- AR jewellery list ---- */

.ar-jewelry-page .page-toolbar {
    align-items: flex-start;
}

.ar-jewelry-page .page-toolbar > * {
    min-width: 0;
}

.ar-jewelry-page .page-toolbar p {
    flex: 1 1 520px;
    max-width: 100%;
}

.ar-asset-page {
    --grid-table-min-w: 980px;
}

.ar-catalog-page {
    --grid-table-min-w: 900px;
}

.ar-materials-page .filter-actions {
    margin-left: 0;
}

.ar-materials-page {
    --grid-table-min-w: 920px;
}

.ar-materials-page .ar-materials-intro {
    margin: 0 0 4px;
}

.ar-jewelry-page .metric-card-published .metric-icon {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.ar-jewelry-page .metric-card {
    border-radius: 0;
}

.ar-jewelry-page .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.ar-jewelry-page .metric-card-warn .metric-icon {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.ar-jewelry-page .metric-card-error .metric-icon {
    background: var(--error-bg);
    color: var(--error-text);
}

.ar-jewelry-table-wrap {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius);
}

.ar-jewelry-page .data-table {
    width: 100%;
    min-width: 0;
    margin-top: 0;
    table-layout: fixed;
}

.ar-jewelry-page .data-table th,
.ar-jewelry-page .data-table td {
    min-width: 0;
}

.ar-jewelry-page .data-table th.check-col,
.ar-jewelry-page .data-table td.check-col {
    width: 52px;
    min-width: 52px;
}

.ar-jewelry-page .data-table th:nth-child(2),
.ar-jewelry-page .data-table td:nth-child(2) {
    width: 10%;
}

.ar-jewelry-page .data-table th:nth-child(3),
.ar-jewelry-page .data-table td:nth-child(3) {
    width: 20%;
}

.ar-jewelry-page .data-table th:nth-child(4),
.ar-jewelry-page .data-table td:nth-child(4) {
    width: 7%;
}

.ar-jewelry-page .data-table th:nth-child(5),
.ar-jewelry-page .data-table td:nth-child(5) {
    width: 7%;
}

.ar-jewelry-page .data-table th:nth-child(6),
.ar-jewelry-page .data-table td:nth-child(6) {
    width: 10%;
}

.ar-jewelry-page .data-table th:nth-child(7),
.ar-jewelry-page .data-table td:nth-child(7) {
    width: 11%;
}

.ar-jewelry-page .data-table th:nth-child(8),
.ar-jewelry-page .data-table td:nth-child(8) {
    width: 9%;
}

.ar-jewelry-page .data-table th:nth-child(9),
.ar-jewelry-page .data-table td:nth-child(9) {
    width: 7%;
}

.ar-jewelry-page .data-table th:nth-child(10),
.ar-jewelry-page .data-table td:nth-child(10) {
    width: 11%;
}

.ar-jewelry-page .data-table th:nth-child(11),
.ar-jewelry-page .data-table td:nth-child(11) {
    width: 8%;
}

.ar-piece-name {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ar-piece-name a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.ar-piece-name a:hover {
    color: var(--accent-strong);
}

.ar-piece-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.ar-jewelry-page .chip-label {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-jewelry-page .status.status-published {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.ar-jewelry-page .status.status-configured {
    background: var(--accent-soft);
    color: var(--accent);
}

.ar-jewelry-page .status.status-testing {
    background: var(--info-bg);
    color: var(--info-text);
}

.ar-jewelry-page .status.status-draft,
.ar-jewelry-page .status.status-archived {
    background: var(--coverage-chip);
    color: var(--coverage-chip-text);
}

.ar-jewelry-page .status.status-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.ar-jewelry-updated {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ar-jewelry-page .row-actions {
    display: grid;
    gap: 6px;
    justify-items: start;
    min-width: 82px;
}

.ar-jewelry-page .row-actions .btn-link {
    text-decoration: none;
}

.ar-jewelry-page .row-actions .btn-link.action-publish {
    color: var(--ok-text);
}

.ar-jewelry-page .row-actions .btn-link.action-unpublish {
    color: var(--warn-text);
}

.ar-jewelry-page .data-table tbody tr[data-row-open-url] {
    cursor: pointer;
}

.ar-jewelry-page .data-table tbody tr[data-row-open-url]:focus-visible td {
    outline: 2px solid rgba(54, 109, 240, .28);
    outline-offset: -2px;
}

.ar-jewelry-page .data-table-shell .data-table {
    min-width: 1100px;
}

.ar-jewelry-page .filter-bar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.35fr)
        repeat(6, minmax(88px, 1fr))
        auto;
    align-items: end;
}

.ar-jewelry-page .filter-field:first-child {
    flex: initial;
    grid-column: auto;
}

.ar-jewelry-page .filter-field-search {
    min-width: 0;
}

.ar-jewelry-page .filter-field input,
.ar-jewelry-page .filter-field select {
    width: 100%;
}

.ar-jewelry-page .filter-field-search input {
    max-width: 100%;
}

.ar-jewelry-page .filter-actions {
    grid-column: auto;
    justify-self: end;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.ar-product-coverage-page {
    --grid-table-min-w: 960px;
}

.ar-jewelry-page .filter-actions .btn-primary,
.ar-jewelry-page .filter-actions .btn-ghost {
    white-space: nowrap;
}

@media (max-width: 1499px) and (min-width: 1281px) {
    .ar-jewelry-page .filter-bar {
        grid-template-columns:
            minmax(200px, 1.2fr)
            repeat(6, minmax(84px, 1fr))
            auto;
    }

    .ar-product-coverage-page .filter-bar {
        grid-template-columns:
            minmax(220px, 1.2fr)
            minmax(92px, .48fr)
            minmax(112px, .58fr)
            minmax(84px, .38fr)
            auto
            auto;
    }
}

@media (max-width: 1280px) and (min-width: 1101px) {
    .ar-jewelry-page .metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ar-jewelry-page .filter-bar {
        grid-template-columns:
            minmax(180px, 1.05fr)
            repeat(6, minmax(78px, 1fr))
            auto;
    }

    .ar-product-coverage-page .filter-bar {
        grid-template-columns:
            minmax(190px, 1.05fr)
            minmax(88px, .46fr)
            minmax(104px, .54fr)
            minmax(80px, .36fr)
            auto
            auto;
    }
}

@media (max-width: 1100px) {
    .ar-jewelry-page .filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-jewelry-page .filter-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .ar-jewelry-page .filter-actions .btn-ghost {
        flex: 1 1 0;
        justify-content: center;
    }

    .ar-product-coverage-page .filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-product-coverage-page .filter-check,
    .ar-product-coverage-page .filter-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .ar-product-coverage-page .filter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 960px) {
    /* Breadcrumb on its own line, the actions filling the one below it. Buttons
       share that line rather than each taking it, so the two-button screens do
       not push the page down by a row apiece. */
    .page-header {
        flex-wrap: wrap;
    }

    .page-header .breadcrumb,
    .page-header-heading {
        flex-basis: 100%;
    }

    .page-header-actions {
        width: 100%;
        margin-left: 0;
    }

    .header-search {
        flex: 1 1 auto;
        width: auto;
    }

    .page-header-actions .btn-primary,
    .page-header-actions .btn-ghost {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* A button that posts something sits in a form of its own; the form is the
       flex item, so it has to stretch and pass the width on. */
    .page-header-actions > form {
        display: flex;
        flex: 1 1 auto;
    }

    .page-header-tab-actions {
        flex: 1 1 auto;
    }

    .ar-dashboard-page .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-jewelry-page .metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ar-jewelry-page .page-toolbar {
        gap: 14px;
    }

    .ar-product-coverage-page .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :root {
        --grid-shell-mt: 14px;
        --grid-table-min-w: 700px;
    }

    .ar-jewelry-page {
        --grid-table-min-w: 980px;
    }

    .ar-jewelry-page .data-table-shell .data-table {
        table-layout: auto;
    }
}

@media (max-width: 640px) {
    .ar-dashboard-page .metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ar-jewelry-page .metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ar-product-coverage-page .metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ar-product-coverage-page .filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .ar-jewelry-page .filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .data-table th,
    .data-table td {
        padding: 12px 14px;
    }

    .data-table thead th {
        font-size: 12px;
    }

    .data-table-shell .data-table {
        min-width: 640px;
    }

    .data-table-shell > .pager {
        padding-left: 14px;
        padding-right: 14px;
    }

    .data-table-shell > [data-live-pagination] {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ============================================================================
   Desktop density tune.

   The shell and admin lists were comfortable only after browser zoom-out,
   which is a sign the desktop defaults are oversized. Tighten the shared
   desktop scale here so 100% browser zoom feels like the intended layout while
   keeping tablet and mobile untouched.
   ========================================================================= */

@media (min-width: 1100px) {
    :root {
        --radius: 9px;
        --topbar-h: 52px;
        /* Not as tight as the rest: below this the longest page name wraps. */
        --sidebar-w: 256px;
        --sidebar-rail: 60px;
    }

    body {
        font-size: 14px;
    }

    .icon {
        width: 18px;
        height: 18px;
    }

    .topbar {
        gap: 12px;
        padding: 0 12px;
    }

    .topbar-left,
    .topbar-right {
        gap: 6px;
    }

    .icon-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .brand {
        gap: 8px;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
        font-size: 10px;
    }

    .search {
        margin-left: 8px;
    }

    .search .icon {
        left: 11px;
        width: 16px;
        height: 16px;
    }

    .search input {
        width: 270px;
        max-width: 24vw;
        padding: 8px 12px 8px 34px;        
        font-size: 13px;
    }

    .user-trigger {
        gap: 8px;
        padding: 4px 7px 4px 4px;
    }

    .sidebar {
        padding: 12px 8px;
    }

    .menu-group + .menu-group {
        margin-top: 4px;
        padding-top: 4px;
    }

    .menu-group-toggle {
        padding: 6px 8px;
        font-size: 12px;
    }

    .menu-group-icon .icon,
    .menu-item .icon {
        width: 16px;
        height: 16px;
    }

    .menu-item {
        gap: 10px;
        padding: 7px 12px 7px 14px;
        font-size: 13px;
    }

    /* 1px border + 8px padding + 16px icon + 8px gap = 33px. */
    .menu-items .menu-item {
        padding-left: 32px;
    }

    .menu-items .menu-section {
        padding-left: 27px;
    }

    .page h1 {
        font-size: 20px;
    }

    .muted {
        font-size: 13px;
    }

    .page-header {
        gap: 12px;
        padding: 12px 14px;
    }

    .page-header-title {
        font-size: 20px;
    }

    .breadcrumb {
        gap: 6px;
        font-size: 13px;
    }

    .page-toolbar {
        gap: 10px 14px;
        margin-bottom: 2px;
    }

    .ar-management-tabs-shell {
        margin-bottom: 6px;
    }

    .ar-management-tabs {
        gap: 16px;
        padding: 0 16px;
    }

    .ar-management-tab {
        padding: 9px 0 10px;
        font-size: 13px;
    }

    .ar-dashboard-tabs {
        padding: 0 16px;
    }


    .panel h2 {
        font-size: 15px;
    }

    .flash-toast-region {
        width: calc(100vw - 24px);
    }

    .flash-toast-region-interactive {
        bottom: 16px;
    }

    .flash-toast-region-status {
        bottom: 16px;
    }

    .flash-toast {
        max-width: min(100%, 420px);
        font-size: 14px;
    }

    .data-table {
        margin-top: 12px;
        font-size: 13px;
    }

    .data-table th,
    .data-table td {
        padding: 8px 10px;
    }

    .data-table thead th {
        font-size: 11px;
    }

    .data-table code {
        font-size: 11px;
    }

    .tag,
    .status,
    .chip-label {
        font-size: 11px;
    }

    .tag {
        padding: 1px 7px;
    }

    .status {
        padding: 2px 8px;
    }

    .chip-label {
        min-width: 30px;
        padding: 2px 6px;
    }

    .btn-primary,
    .btn-ghost {
        padding: 9px 14px;
        font-size: 14px;
    }

    .btn-inline {
        padding: 7px 12px;
        font-size: 13px;
    }

    .form-card {
        margin-top: 12px;
        padding: 22px 24px;
    }

    .form-grid {
        gap: 16px 20px;
    }

    .form-field > label,
    .form-field > .form-label {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .form-field input[type="text"],
    .form-field input[type="email"],
    .form-field input[type="password"],
    .form-field input[type="number"],
    .form-field select,
    .form-field textarea,
    .field input[type="text"],
    .field input[type="email"],
    .field input[type="password"],
    .field input[type="number"],
    .field select,
    .field textarea {
        font-size: 14px;
    }

    .form-field input[type="text"],
    .form-field input[type="email"],
    .form-field input[type="password"],
    .form-field input[type="number"],
    .form-field select,
    .form-field textarea {
        padding: 9px 12px;
    }

    .field input[type="text"],
    .field input[type="email"],
    .field input[type="password"],
    .field input[type="number"],
    .field select,
    .field textarea {
        padding: 8px 10px;
    }

    .filter-bar {
        gap: 10px;
        margin-bottom: 14px;
        padding: 12px 14px;
    }

    .filter-field {
        gap: 4px;
    }

    .filter-label {
        font-size: 10px;
    }

    .filter-field input,
    .filter-field select {
        min-height: 34px;
        padding: 0 9px;
        font-size: 13px;
    }

    .filter-search input {
        padding-right: 54px;
    }

    .filter-search-clear {
        right: 32px;
        width: 20px;
        height: 20px;
    }

    .filter-search-clear .icon {
        width: 14px;
        height: 14px;
    }

    .filter-search > .icon {
        right: 10px;
        width: 14px;
        height: 14px;
    }

    .filter-actions {
        gap: 6px;
    }

    .pager {
        gap: 8px;
        padding: 10px 4px 2px;
    }

    .pager-count,
    .pager-position {
        font-size: 12px;
    }

    .pager-btn {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .empty-state {
        padding: 18px 20px;
        margin-bottom: 14px;
    }

    .metric-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 14px;
    }

    .metric-card {
        grid-template-columns: 40px 1fr;
        column-gap: 10px;
        padding: 14px;
    }

    .metric-icon {
        width: 40px;
        height: 40px;
        border-radius: 9px;
    }

    .metric-icon .icon {
        width: 18px;
        height: 18px;
    }

    .metric-label {
        font-size: 10px;
    }

    .metric-value {
        font-size: 26px;
    }

    .metric-sub,
    .ar-piece-meta {
        font-size: 11px;
    }


    .ar-jewelry-page .filter-bar {
        grid-template-columns:
            minmax(220px, 1.35fr)
            repeat(6, minmax(96px, 1fr))
            auto;
    }

    .ar-jewelry-page .row-actions {
        gap: 4px;
        min-width: 72px;
    }
}

@media (min-width: 1500px) {
    .ar-jewelry-page .metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1500px) and (min-width: 901px) {
    .search input {
        width: 240px;
        max-width: 22vw;
    }

    .user-role {
        display: none;
    }
}

@media (max-width: 1280px) and (min-width: 901px) {
    .user-name {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================================
   Order detail.

   One catalogue order read back from its stored snapshot, laid out like a
   catalogue listing: for each piece its photo on the left and, stacked on the
   right, its price, what it is and its papers; then how the order was paid and
   its history. How far the order has come is in the page header.

   The page has an accent of its own, a jeweller's gold, held as tokens on the
   page so the dark theme can redefine it in one place. Everything else is the
   shared palette.

   Last in the sheet, and headings scoped under .od, so the density tune's
   `.panel h2` above does not resize them.
   ========================================================================= */

.order-detail-page {
    --od-gold: #b8862b;
    --od-gold-strong: #8a6118;
    --od-gold-soft: #fbf3e2;
    --od-gold-line: #ecdcbb;
    --od-cream: #fdf8ec;
    --od-ink: #0f1b33;
    --od-ink-hover: #050c1c;
    --od-ink-text: #ffffff;
    --od-on-gold: #ffffff;
}

:root[data-theme="dark"] .order-detail-page {
    --od-gold: #deb466;
    --od-gold-strong: #f0cd86;
    --od-gold-soft: #2b2416;
    --od-gold-line: #4a3d22;
    --od-cream: #241f15;
    --od-ink: #e6e9ee;
    --od-ink-hover: #ffffff;
    --od-ink-text: #111827;
    --od-on-gold: #1a1408;
}

/* The page's frame: the container its layout queries measure. The breakpoints
   further down are container queries on this, not media queries, so they
   measure the room the order actually has, after the sidebar.

   It is drawn at full size on every screen, the same type size as the rest of
   the application. It used to be scaled down on high-density laptop screens to
   fit a summary band and three cards abreast; with the items and one side
   column there is room without it. */
.od-frame {
    container: od / inline-size;
}

.od {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.od-muted {
    color: var(--text-muted);
}

/* ---- masked customer details ----
   The rest of a name, email or phone is not in the page at all (see Masked);
   this blurs the fixed stand-in drawn where it would be. Used by the order list
   too. Not selectable, so a copy takes only what is shown. */

.masked-tail {
    display: inline-block;
    margin-left: 1px;
    filter: blur(4px);
    opacity: .75;
    user-select: none;
    pointer-events: none;
}

/* ---- pills ---- */

.od-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.od-pill::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.od-pill.is-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.od-pill.is-info {
    background: var(--info-bg);
    color: var(--info-text);
}

.od-pill.is-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.od-pill.is-bad {
    background: var(--error-bg);
    color: var(--error-text);
}

/* ---- progress strip ---- */

/* The progress strip, at the right-hand end of the page header: a dashed rule
   runs between the stage marks and turns gold up to the furthest stage reached. */
.od-steps {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.od-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 80px;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
}

.od-step + .od-step::before {
    content: "";
    position: absolute;
    top: 21px;
    right: calc(50% + 26px);
    left: calc(-50% + 26px);
    border-top: 1.5px dashed var(--border);
}

.od-step.is-done + .od-step::before,
.od-step.is-done + .od-step.is-current::before,
.od-step.is-done + .od-step.is-done::before {
    border-top-color: var(--od-gold);
}

.od-step-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
}

.od-step-icon .icon {
    width: 18px;
    height: 18px;
}

.od-step-label {
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.od-step.is-done .od-step-icon {
    border-color: var(--od-gold-line);
    background: var(--od-gold-soft);
    color: var(--od-gold);
}

.od-step.is-done {
    color: var(--text);
}

.od-step.is-current .od-step-icon {
    border-color: var(--od-gold);
    background: var(--od-gold);
    color: var(--od-on-gold);
    box-shadow: 0 0 0 4px var(--od-gold-soft);
}

.od-step.is-current .od-step-label {
    background: var(--od-gold-soft);
    color: var(--od-gold-strong);
    font-weight: 700;
}

.od-step.is-bad .od-step-icon {
    border-color: var(--error-border);
    background: var(--error-bg);
    color: var(--error-text);
}

.od-step.is-bad .od-step-label {
    background: var(--error-bg);
    color: var(--error-text);
    font-weight: 700;
}

/* The strip is in the page header, outside the order's container, so these are
   media queries. Narrow, the header's actions take a row of their own and the
   stages spread across it; on a phone they come down a size to fit. */
@media (max-width: 960px) {
    .page-header .od-steps {
        width: 100%;
        justify-content: space-between;
    }

    .page-header .od-step {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .page-header .od-step {
        font-size: 11px;
    }

    .page-header .od-step-label {
        padding: 2px 6px;
    }

    .page-header .od-step-icon {
        width: 34px;
        height: 34px;
    }

    .page-header .od-step + .od-step::before {
        top: 17px;
        right: calc(50% + 21px);
        left: calc(-50% + 21px);
    }
}

/* ---- listing: one row per piece ---- */

/* The photo on the left, the cards that describe the piece stacked on the
   right. The photo column stretches to the height of the stack. */
.od-listing {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    gap: 14px;
}

.od-listing-photos {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.od-listing-details {
    display: grid;
    align-content: start;   
    min-width: 0;
}

/* With more than one piece, a ruled line names each one: "Item 2 of 3". The
   space above it is extra to the page's gap, so pieces read as apart rather
   than as one long stack of cards. */
.od-item-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.od-item-divider::before,
.od-item-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 2px solid var(--border);
}

.od-item-divider::before {
    flex: 0 0 24px;
}

.od-listing + .od-item-divider {
    margin-top: 14px;
}

/* Payment and history, side by side under the pieces. */
.od-below {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

/* ---- cards ----
   Flat white cards with a hairline edge: a check that turns green once the
   card has anything in it, then the title. */

.od-box {
    min-width: 0;
    padding: 18px 20px;    
    background: var(--surface);
}

.od-box-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 14px;
}

.od-box-check {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.od-box-check .icon {
    width: 18px;
    height: 18px;
}

.od-box-check.is-done {
    color: var(--ok-text);
}

.od .od-box-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.od-box-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

.od-empty {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Label and value pairs, two to a row: the label muted, the value beside it. */
.od-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
    margin: 0;
    font-size: 14px;
}

.od-fields > div {
    display: grid;
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 12px;
    min-width: 0;
}

.od-fields dt {
    color: var(--text-muted);
}

.od-fields dd {
    margin: 0;
    color: var(--text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.od-fields dd s {
    margin-left: 6px;
    font-weight: 400;
}

/* ---- photo ---- */

.od-photo-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.od-photo {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    min-height: 240px;
    padding: 12px;
    border-radius: 6px;    
}

.od-photo img {
    display: block;
    width: 100%;
    max-width: 360px;
    max-height: 360px;
    object-fit: contain;
}

.od-photo.is-empty .icon {
    width: 56px;
    height: 56px;
    color: var(--text-muted);
    opacity: .6;
}

/* Where the piece has got to, at the far end of the piece's name. */
.od-photo-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
}

/* The badge carries an edge in its own colour, so it holds its shape on white. */
.od-photo-status .od-pill {
    border: 1px solid transparent;
    font-size: 13px;
}

.od-photo-status .od-pill.is-ok {
    border-color: var(--ok-border);
}

.od-photo-status .od-pill.is-bad {
    border-color: var(--error-border);
}

/* ---- returns ---- */

.od-return + .od-return {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.od-shipment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.od-shipment-head .od-muted {
    margin-left: 4px;
    font-weight: 500;
}

/* A shipment's steps, top to bottom, each dot in the colour of what it means. */
.od-ministeps {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
}

.od-ministeps li {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-left: 16px;
}

.od-ministeps li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--od-gold);
}

.od-ministeps li.is-ok::before {
    background: var(--ok-text);
}

.od-ministeps li.is-bad::before {
    background: var(--error-text);
}

.od-ministeps span {
    font-weight: 600;
}

.od-ministeps time {
    color: var(--text-muted);
    white-space: nowrap;
}

.od-pieces {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 10px 12px;
    list-style: none;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 13px;
}

.od-pieces li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.od-piece-qty {
    color: var(--text-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.od-piece-title {
    font-weight: 600;
}

.od-piece-detail {
    color: var(--text-muted);
    font-size: 12px;
}

.od-returns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.od-returns .od-return + .od-return {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ---- activity timeline ---- */

.od-timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.od-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 0 0 18px;
    font-size: 13px;
}

.od-timeline li:last-child {
    padding-bottom: 0;
}

/* The rule joining one dot to the next. */
.od-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 9px;
    border-left: 1.5px solid var(--border);
}

.od-tl-dot {
    width: 14px;
    height: 14px;
    margin: 2px 0 0 3px;
    border: 3px solid var(--surface-2);
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 1px var(--border);
}

.od-timeline li.is-accent .od-tl-dot {
    background: var(--od-gold);
    border-color: var(--od-gold-soft);
    box-shadow: 0 0 0 1px var(--od-gold-line);
}

.od-timeline li.is-ok .od-tl-dot {
    background: var(--ok-text);
    border-color: var(--ok-bg);
}

.od-timeline li.is-info .od-tl-dot {
    background: var(--info-text);
    border-color: var(--info-bg);
}

.od-timeline li.is-warn .od-tl-dot {
    background: var(--warn-text);
    border-color: var(--warn-bg);
}

.od-timeline li.is-bad .od-tl-dot {
    background: var(--error-text);
    border-color: var(--error-bg);
}

.od-tl-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.od-tl-copy .od-muted {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.od-tl-time {
    color: var(--text-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

/* ---- narrower screens ---- */

/* Too narrow for the photo beside its cards: the photo goes above them, and
   payment and history stack. */
@container od (max-width: 980px) {
    .od-listing,
    .od-below {
        grid-template-columns: minmax(0, 1fr);
    }

    .od-photo {
        min-height: 200px;
    }
}

/* A phone: one field to a row. */
@container od (max-width: 608px) {
    .od {
        gap: 14px;
        padding: 14px;
    }

    .od-box {
        padding: 16px;
    }

    .od-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- print ----
   Printing prints the order, not the application around it: no chrome, and
   the cards in one column. */

@media print {
    .topbar,
    .sidebar,
    .app-footer,
    .page-header,
    .flash-toast-region {
        display: none !important;
    }

    .app-body .page {
        width: auto;
        margin: 0;
    }

    .od {
        padding: 0;
    }

    .od-listing,
    .od-below {
        grid-template-columns: minmax(0, 1fr);
    }

    .od-box {
        border-color: #d0d7e2;
        break-inside: avoid;
    }

    /* The header carries the order's number and its progress strip: print both,
       but not the breadcrumb. */
    .order-detail-page .page-header {
        display: block !important;
        padding: 0 0 12px;
        border: 0;
    }

    .order-detail-page .page-header .breadcrumb {
        display: none !important;
    }

    .order-detail-page .page-header .od-steps {
        margin-top: 12px;
    }
}

/* ============================================================================
   Returns Insights.

   Laid out like a seller portal's: the sales period and filters in a row of
   segmented controls, a strip for anything worth a look, the overview table
   with its slanted band of colour behind each metric, and the reasons. Flat:
   hairline borders and grey table heads, no shadows.
   ========================================================================= */

.returns-insights-page {
    --ri-band: #f7f4f0;
    --ri-head: #f1f3f6;
    --ri-line: var(--border);
}

:root[data-theme="dark"] .returns-insights-page {
    --ri-band: #1f2d45;
    --ri-head: #212734;
}

.ri {
    display: grid;
    gap: 22px;
    padding: 18px;
}

/* ---- period and filters ---- */

.ri-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 28px;
}

.ri-filter {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ri-filter-end {
    margin-left: auto;
    justify-items: end;
}

.ri-filter-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.ri-filter-label .icon {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

/* Buttons joined into one control, a hairline between each. */
.ri-seg {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--ri-line);
    border-radius: 6px;
    background: var(--surface);
}

.ri-seg > * + * {
    border-left: 1px solid var(--ri-line);
}

.ri-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

.ri-seg-btn::-webkit-details-marker {
    display: none;
}

.ri-seg-btn .icon {
    width: 16px;
    height: 16px;
}

.ri-seg-btn:hover {
    background: var(--surface-2);
}

.ri-seg-btn.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}

.ri-seg-icon {
    padding: 0 14px;
    color: var(--text-muted);
    cursor: default;
}

.ri-seg-icon:hover {
    background: transparent;
}

/* A dropdown that opens without script: a details element and its panel. */
.ri-drop {
    position: relative;
}

.ri-drop[open] > summary .icon {
    transform: rotate(180deg);
}

.ri-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: grid;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--ri-line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.ri-menu-item {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
}

.ri-menu-item:hover {
    background: var(--surface-2);
}

.ri-menu-item.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}

.ri-dates {
    gap: 10px;
    padding: 12px;
}

.ri-dates label {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.ri-dates input {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ri-line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.ri-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ri-btn:hover {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
}

.ri-btn-outline {
    background: var(--surface);
    color: var(--accent);
}

.ri-btn-outline:hover {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

/* ---- worth a look ---- */

.ri-insights {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ri-art {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--ok-bg), var(--accent-soft));
    color: var(--ok-text);
}

.ri-art .icon {
    width: 32px;
    height: 32px;
}

.ri-insights-copy h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
}

.ri-insights-copy p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
}

.ri-insight-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.ri-insight-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ri-insight-list .icon {
    width: 17px;
    height: 17px;
    color: var(--warn-text);
}

.ri-insight-list a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

/* ---- overview and reasons ---- */

.ri-section {
    display: grid;
    gap: 12px;
}

.ri-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.ri-section-title .icon {
    width: 20px;
    height: 20px;
}

.ri-subtitle {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
}

.ri-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

.ri-tabs {
    display: inline-flex;
    justify-self: start;
    border: 1px solid var(--ri-line);
    border-radius: 6px;
    overflow: hidden;
}

.ri-tab {
    padding: 8px 16px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
}

.ri-tab + .ri-tab {
    border-left: 1px solid var(--ri-line);
}

.ri-tab.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.ri-table-wrap {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--ri-line);
    background: var(--surface);
}

.ri-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ri-table th,
.ri-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ri-line);
    text-align: left;
    vertical-align: middle;
    font-weight: 400;
}

.ri-table thead th {
    background: var(--ri-head);
    color: var(--text);
    font-size: 13.5px;
}

.ri-table tbody tr:last-child > * {
    border-bottom: 0;
}

.ri-table tbody th {
    color: var(--text);
}

.ri-table .ri-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ri-table .ri-empty {
    color: var(--text-muted);
    text-align: center;
}

/* The summary: the figure's icon in a cell of its own, then a band of colour
   slanting off behind its name, its counts and rate in columns, and a ruled
   line before what changed. No minimum width: the tables fit the column they
   are in, the name and the sentence wrapping, rather than scrolling sideways. */

.ri-table .ri-period-head {
    text-align: center;
}

.ri-table .ri-divide {
    border-left: 1px solid var(--ri-line);
}

.ri-summary tbody td,
.ri-summary tbody th,
.ri-trend-metrics tbody td,
.ri-trend-metrics tbody th {
    height: 90px;
}

.ri-table .ri-icon-cell {
    width: 56px;
    padding: 0 6px 0 16px;
    color: var(--text-muted);
}

.ri-icon-cell .icon {
    display: block;
    width: 24px;
    height: 24px;
}

.ri-table .ri-metric {
    padding-left: 16px;
    background: linear-gradient(100deg, var(--ri-band) 0 82%, transparent 82%);
}

.ri-metric-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.ri-metric-name strong {
    font-size: 15px;
    font-weight: 600;
}

.ri-metric > small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.ri-info {
    display: inline-flex;
    color: var(--accent);
    cursor: help;
}

.ri-info .icon {
    width: 16px;
    height: 16px;
}

.ri-ongoing {
    padding: 2px 8px;
    border-radius: 3px;
    background: #5a6472;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ri-table .ri-count,
.ri-table .ri-rate {
    width: 1%;
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;
    white-space: nowrap;
}

.ri-value {
    display: inline-grid;
    justify-items: center;
    gap: 6px;
}

.ri-value strong {
    color: var(--accent-strong);
    font-size: 16px;
    font-weight: 700;
}

.ri-value small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.ri-table .ri-change {
    color: var(--text-muted);
    font-size: 14px;
}

.ri-change strong {
    margin-right: 4px;
    font-weight: 600;
}

.ri-change strong.is-good {
    color: var(--ok-text);
}

.ri-change strong.is-bad {
    color: var(--error-text);
}

.ri-change strong.is-flat {
    color: var(--text);
}

.ri-table .ri-spark-head {
    text-align: center;
}

.ri-table .ri-spark {
    width: 22%;
}

.ri-sparkline {
    display: block;
    width: 100%;
    max-width: 220px;
    height: 40px;
    margin: 0 auto;
}

/* Beside the Trend chart the figures have a narrower column: tighter cells. */
.ri-trend-metrics th,
.ri-trend-metrics td {
    padding-left: 10px;
    padding-right: 10px;
}

.ri-trend-metrics .ri-icon-cell {
    width: 40px;
    padding: 0 2px 0 12px;
}

/* Too narrow for a trend line beside the sentence: the line goes, the
   Trend tab still draws it in full. */
@media (max-width: 900px) {
    .ri-table .ri-spark,
    .ri-table .ri-spark-head {
        display: none;
    }
}

.ri-sparkline polyline {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ri-reasons-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Reasons and sub-reasons side by side, one under the other when narrow. */
.ri-reason-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ri-reason-grid > .ri-table-wrap + .ri-table-wrap {
    border-left: 0;
}

@media (max-width: 1100px) {
    .ri-reason-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ri-reason-grid > .ri-table-wrap + .ri-table-wrap {
        border-top: 0;
        border-left: 1px solid var(--ri-line);
    }
}

@media (max-width: 640px) {
    .ri {
        padding: 14px;
    }

    .ri-filter-end {
        margin-left: 0;
        justify-items: start;
    }

    .ri-insights {
        align-items: flex-start;
    }

    .ri-art {
        width: 56px;
        height: 56px;
    }
}

/* The tab not open. Both are in the page; returns-insights.js switches them,
   and .ri-trend's grid would otherwise override the hidden attribute. */
[data-ri-panel][hidden] {
    display: none;
}

/* ---- trend: the figures, and a chart of one of them ---- */

.ri-trend {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: 28px;
}

.ri-chart {
    position: relative;
    min-width: 0;
    border: 1px solid var(--ri-line);
    background: var(--surface);
}

/* The radio buttons themselves are out of sight; their labels are drawn as the
   buttons, and which one is checked decides which chart shows. They stay
   focusable, so the arrow keys move between the figures. */
.ri-series-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ri-chart-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 48px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ri-line);
    background: var(--ri-head);
}

.ri-series-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.ri-series-option::before {
    content: "";
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
}

/* The options are numbered by position, so any three figures can be charted. */
#ri-series-0:checked ~ .ri-chart-head [for="ri-series-0"]::before,
#ri-series-1:checked ~ .ri-chart-head [for="ri-series-1"]::before,
#ri-series-2:checked ~ .ri-chart-head [for="ri-series-2"]::before {
    border-color: var(--accent);
    background: radial-gradient(circle, var(--accent) 0 38%, var(--surface) 44%);
}

#ri-series-0:focus-visible ~ .ri-chart-head [for="ri-series-0"],
#ri-series-1:focus-visible ~ .ri-chart-head [for="ri-series-1"],
#ri-series-2:focus-visible ~ .ri-chart-head [for="ri-series-2"] {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.ri-chart-body {
    padding: 12px 16px 8px;
}

.ri-chart-svg {
    display: none;
    width: 100%;
    height: auto;
}

#ri-series-0:checked ~ .ri-chart-body .is-series-0,
#ri-series-1:checked ~ .ri-chart-body .is-series-1,
#ri-series-2:checked ~ .ri-chart-body .is-series-2 {
    display: block;
}

.ri-grid line {
    stroke: var(--border);
    stroke-dasharray: 4 4;
}

.ri-axis,
.ri-ticks line {
    stroke: var(--text-muted);
    stroke-width: 1;
}

/* In the chart's own units: the SVG scales with its column, so these come out
   at about 12 to 16 pixels across the usual laptop and desktop widths. */
.ri-axis-labels text {
    fill: var(--text-muted);
    font-family: inherit;
    font-size: 19px;
}

.ri-chart-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

@media (max-width: 1100px) {
    .ri-trend {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- custom dates: a two-month calendar (date-range.js) ----
   Once the script has drawn the calendar, the date inputs and their Apply
   button give way to it; it fills the inputs in, and Done submits them. */

.ri-dates.is-calendar {
    width: max-content;
    max-width: calc(100vw - 32px);
    max-height: none;
    overflow: visible;
    padding: 16px 20px 12px;
    border-radius: 16px;
}

.ri-dates.is-calendar > label,
.ri-dates.is-calendar > .ri-btn {
    display: none;
}

.ri-cal {
    position: relative;
}

.ri-cal-head {
    position: absolute;
    top: -2px;
    right: 0;
    display: flex;
    gap: 4px;
}

.ri-cal-nav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text);
    cursor: pointer;
}

.ri-cal-nav:hover:not(:disabled) {
    background: var(--surface-2);
}

.ri-cal-nav:disabled {
    opacity: .3;
    cursor: default;
}

.ri-cal-nav .icon {
    width: 18px;
    height: 18px;
}

.ri-cal-months {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.ri-cal-month {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    row-gap: 4px;
}

.ri-cal-title {
    grid-column: 1 / -1;
    margin: 4px 0 12px;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 600;
}

.ri-cal-wd {
    padding: 4px 0 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.ri-cal-wd.is-weekend {
    color: var(--error-text);
}

.ri-cal-day {
    display: grid;
    place-items: center;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.ri-cal-day:hover:not(:disabled):not(.is-start):not(.is-end) {
    background: var(--surface-2);
}

/* The neighbouring months' days, and days still to come: shown, not pickable. */
.ri-cal-day.is-other,
.ri-cal-day:disabled {
    color: var(--border);
    cursor: default;
}

.ri-cal-day.is-in-range {
    border-radius: 0;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.ri-cal-day.is-start,
.ri-cal-day.is-end {
    background: var(--accent);
    color: #ffffff;
    font-weight: 600;
}

.ri-cal-day:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.ri-cal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
}

.ri-cal-range {
    color: var(--text-muted);
    font-size: 13px;
}

.ri-cal-done {
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.ri-cal-done:disabled {
    opacity: .4;
    cursor: default;
}

@media (max-width: 640px) {
    .ri-cal-month {
        grid-template-columns: repeat(7, 36px);
    }

    .ri-cal-day {
        height: 36px;
    }
}

/* ---- reason wise breakup ----
   The reasons tables, on Returns Insights (top five) and on their own page
   (every one, in tall panels however few the rows). */

.ri-reason-block {
    display: grid;
    gap: 12px;
}

.ri-table thead .ri-info {
    margin-left: 4px;
    vertical-align: -3px;
}

.ri-table .ri-yay {
    color: var(--ok-text);
    font-size: 15px;
}

.ri-reason-grid.is-full > .ri-table-wrap {
    min-height: 460px;
}

.ri-reason-grid.is-full .ri-yay {
    height: 380px;
}

/* ---- Cancellation Insights: its tabs along the top, the units card ---- */

.ri-page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    margin-top: -6px;
    border-bottom: 1px solid var(--ri-line);
}

.ri-page-tab {
    margin-bottom: -1px;
    padding: 10px 2px 11px;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.ri-page-tab:hover {
    color: var(--text);
}

.ri-page-tab.is-active {
    border-bottom-color: var(--accent);
    color: var(--accent-strong);
}

.ri-units {
    display: inline-flex;
    flex-wrap: wrap;
    justify-self: start;
    max-width: 100%;
    margin: 0;
    border: 1px solid var(--ri-line);
    border-radius: 6px;
    background: var(--surface);
}

.ri-units > div {
    display: grid;
    gap: 4px;
    padding: 12px 22px;
}

.ri-units > div + div {
    border-left: 1px solid var(--ri-line);
}

.ri-units dt {
    color: var(--text-muted);
    font-size: 13px;
}

.ri-units dd {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ri-table .ri-tall {
    height: 220px;
}

.ri-shipments .od-pill {
    white-space: nowrap;
}

.ri-shipments a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.ri-shipments a:hover {
    text-decoration: underline;
}

/* ---- Cancellation Insights: the breakdown by product, category, collection ---- */

.ri-bd-tabs {
    margin-top: 8px;
}

.ri-bd-tabs .ri-page-tab {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ri-bd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ri-line);
}

.ri-bd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ri-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--ri-line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.ri-chip:hover {
    border-color: var(--accent);
}

.ri-chip .icon {
    display: none;
    width: 15px;
    height: 15px;
}

.ri-chip.is-active {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.ri-chip.is-active .icon {
    display: inline-block;
}

.ri-bd-search {
    position: relative;
    display: block;
    width: 280px;
    max-width: 100%;
    margin-left: auto;
}

.ri-bd-search input {
    width: 100%;
    min-height: 36px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--ri-line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.ri-bd-search input:focus {
    border-color: var(--accent);
    outline: none;
}

.ri-bd-search .icon {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 17px;
    height: 17px;
    color: var(--text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

/* The Actions menus open out of the table, so it does not clip them; it fits
   its column, the headings wrapping, rather than scrolling sideways. */
.ri-bd-wrap {
    overflow: visible;
}

.ri-bd-table thead th {
    font-size: 13px;
    vertical-align: middle;
}

.ri-bd-table th,
.ri-bd-table td {
    padding: 12px 14px;
}

.ri-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.ri-sort .icon {
    flex: none;
    width: 15px;
    height: 15px;
}

.ri-sort .icon path {
    opacity: .35;
}

.ri-sort.is-desc .icon-sort-down,
.ri-sort.is-asc .icon-sort-up {
    opacity: 1;
}

/* Whole words: the product column takes the room its longest word needs. */
.ri-bd-table tbody th {
    min-width: 130px;
}

.ri-bd-name {
    display: block;
    font-weight: 500;
    overflow-wrap: break-word;
}

.ri-bd-sku {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12.5px;
    overflow-wrap: break-word;
}

.ri-bd-table .ri-bd-actions-head,
.ri-bd-table .ri-bd-actions {
    text-align: center;
}

.ri-bd-drop {
    display: inline-block;
}

.ri-bd-view {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

.ri-bd-view::-webkit-details-marker {
    display: none;
}

.ri-bd-view .icon {
    width: 15px;
    height: 15px;
}

.ri-bd-menu {
    right: 0;
    left: auto;
    min-width: 250px;
    text-align: left;
}

.ri-bd-order {
    display: grid;
    gap: 1px;
}

.ri-bd-order-no {
    color: var(--accent);
    font-weight: 600;
}

.ri-bd-order small {
    color: var(--text-muted);
    font-size: 12.5px;
}

.ri-bd-more {
    margin: 4px 12px 6px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.ri-bd-none {
    color: var(--text-muted);
}

.ri-table .ri-bd-empty {
    padding: 18px 16px;
}

/* The app's pager, at the foot of the table, driven in place by the script. */
.ri-bd-wrap > .ri-bd-pager {
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--ri-line);
    background: var(--surface);
}

.ri-bd-pager .pager-count {
    font-size: 13.5px;
}

.ri-bd-pager .pager-btn {
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.ri-bd-pager .ri-bd-all {
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

@media (max-width: 1200px) {
    .ri-bd-table th,
    .ri-bd-table td {
        padding: 12px 8px;
    }
}

@media (max-width: 720px) {
    .ri-bd-wrap {
        overflow-x: auto;
    }

    .ri-bd-search {
        width: 100%;
    }
}

/* Cancellation Insights' overview tab: its sections stay items of the page's
   grid, spaced like the rest, while the tab can be hidden as one. */
.ri-page-panel {
    display: contents;
}

/* A new period or category on its way (insights-live.js): the figures dim
   under a thin running bar at the top; the filters stay as they are. */
.ri {
    position: relative;
}

.ri.is-loading > :not(.ri-filters):not(.ri-page-tabs),
.ri.is-loading > .ri-page-panel > * {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

.ri.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 30%;
    height: 3px;
    border-radius: 3px;
    background: var(--accent);
    animation: ri-loading 1s ease-in-out infinite;
}

@keyframes ri-loading {
    from {
        left: 0;
    }

    to {
        left: 70%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ri.is-loading::before {
        width: 100%;
        animation: none;
    }
}

/* ============================================================================
   Payments Overview.

   Laid out like a seller portal's, across the full width: the figures in four
   equal bordered cards, each with its split pinned along the foot so the row
   lines up, then Previous Payments in a panel of its own, a chip for each
   recent day over a table that spans the panel. Flat, like the insights
   screens. The cards fall to two a row, then one, as the screen narrows.
   ========================================================================= */

.pay {
    display: grid;
    gap: 28px;
    padding: 18px;
}

.pay-section {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.pay-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.pay-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.pay-section-title .icon {
    width: 20px;
    height: 20px;
}

.pay-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pay-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.pay-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
}

.pay-card-title {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.pay-card-when {
    color: var(--accent-strong);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.pay-card-total {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* The split, or the note, sits along the foot of every card alike. */
.pay-card-foot {
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.pay-card-split {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pay-card-split > div {
    min-width: 0;
}

.pay-card-split > div:last-child {
    text-align: right;
}

.pay-card-split dt {
    color: var(--text-muted);
    font-size: 12.5px;
}

.pay-card-split dd {
    margin: 2px 0 0;
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pay-card-note {
    color: var(--text-muted);
    font-size: 13px;
}

.pay-see-all {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--accent);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.pay-see-all:hover {
    text-decoration: underline;
}

.pay-see-all .icon {
    width: 15px;
    height: 15px;
}

.pay-panel {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 18px 20px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.pay-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pay-day {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.pay-day-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: var(--ok-text);
    font-size: 13.5px;
}

.pay-day-summary .icon {
    width: 16px;
    height: 16px;
}

.pay-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.pay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pay-table th,
.pay-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

.pay-table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.pay-table thead th:first-child,
.pay-table thead th:nth-child(2) {
    width: 22%;
}

.pay-table tbody th {
    font-weight: 600;
}

.pay-table .pay-num,
.pay-settlements .pay-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pay-table tr.is-total > * {
    border-bottom: 0;
    font-weight: 600;
}

.pay-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pay-info {
    display: inline-flex;
    color: var(--text-muted);
}

.pay-info .icon {
    width: 15px;
    height: 15px;
}

.pay-line {
    display: block;
}

.pay-line + .pay-line {
    margin-top: 6px;
}

.pay-settlements .pay-net {
    font-weight: 600;
}

@media (max-width: 1100px) {
    .pay-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .pay {
        padding: 16px 0;
    }

    .pay-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-panel {
        padding: 14px 14px 6px;
    }
}

/* ============================================================================
   Earnings Summary.

   Built on Returns Insights' parts -- the tabs along the top, the segmented
   controls, the dropdowns and the calendar, the tables -- with Payments
   Overview's cards. Its own: the toolbar holding the SKU search, the period,
   the views and the download in one row; the charts; the guide; and the
   picture shown while there is nothing to show.

   The charts are SVG sized by attribute, not by style: the page's
   Content-Security-Policy allows no inline style, so a bar's height cannot be
   set in one. A light bar is a sale amount, the dark bar over it what of it
   was kept.
   ========================================================================= */

.earnings-page {
    --es-sale: #e4dace;
    --es-net: var(--accent);
    --es-cat: #4f5157;
}

:root[data-theme="dark"] .earnings-page {
    --es-sale: #2e3f5c;
    --es-cat: #a3abb9;
}

/* ---- toolbar ---- */

.es-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 28px;
}

.es-search {
    display: grid;
    gap: 6px;
}

.es-search-box {
    position: relative;
    display: block;
    width: 300px;
    max-width: 100%;
}

.es-search-box input {
    width: 100%;
    min-height: 42px;
    padding: 0 42px 0 14px;
    border: 1px solid var(--ri-line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.es-search-box input:focus {
    border-color: var(--accent);
    outline: none;
}

.es-search-box button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 42px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.es-search-box button:hover {
    color: var(--accent);
}

.es-search-box .icon {
    width: 18px;
    height: 18px;
}

.es-period .ri-seg-btn,
.es-views .ri-seg-btn {
    min-height: 42px;
}

/* The days the period covers, beside the month or Custom Dates. */
.es-chip {
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.ri-seg-btn.is-active .es-chip {
    background: var(--surface);
}

.es-views {
    overflow: hidden;
}

.es-download {
    gap: 6px;
    min-height: 42px;
    margin-left: auto;
}

.es-download .icon {
    width: 17px;
    height: 17px;
}

/* A new period or SKU on its way (insights-live.js): the controls stay lit. */
.ri.es.is-loading > .es-toolbar {
    opacity: 1;
    pointer-events: auto;
}

/* ---- the guide, from the page header ---- */

.es-learn-btn {
    gap: 8px;
    list-style: none;
}

.es-learn-btn::-webkit-details-marker {
    display: none;
}

.es-learn-btn .icon {
    width: 16px;
    height: 16px;
}

.es-learn[open] > summary .icon {
    transform: none;
}

.es-learn-panel {
    right: 0;
    left: auto;
    gap: 12px;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: min(80vh, 720px);
    padding: 18px 20px;
    color: var(--text);
    font-size: 14px;
}

.es-learn-panel h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.es-learn-panel ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
}

.es-learn-panel dl {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--ri-line);
}

.es-learn-panel dt {
    font-weight: 600;
}

.es-learn-panel dd {
    margin: 0;
    color: var(--text-muted);
}

.es-learn-foot {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* ---- panels, cards and tables ---- */

.es-panel {
    display: grid;
    gap: 18px;
    min-width: 0;
}

/* Three deductions, one to a line: side by side, a large amount would break
   mid-number. */
.es-card-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.es-card-split > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.es-card-split dd {
    margin: 0;
    overflow-wrap: normal;
    text-align: right;
}

.es-card-net {
    border-color: var(--accent);
}

.es-table th,
.es-table td {
    white-space: nowrap;
}

.es-table tfoot th,
.es-table tfoot td {
    border-top: 1px solid var(--ri-line);
    border-bottom: 0;
    background: var(--ri-head);
    font-weight: 600;
}

.ri-table .es-minus {
    color: var(--text-muted);
}

.ri-table .es-net {
    font-weight: 600;
}

.es-product {
    display: flex;
    align-items: center;
    gap: 14px;
}

.es-product-art {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.es-product-art .icon {
    width: 24px;
    height: 24px;
}

.es-product-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.es-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

.es-product-meta > span + span::before {
    content: "·";
    margin: 0 8px;
}

.es-choose {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--ri-line);
    background: var(--surface);
}

.es-choose p {
    margin: 0;
}

.es-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.es-choices a {
    text-decoration: none;
}

/* ---- charts ---- */

.es-chart {
    display: grid;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 16px 18px 18px;
    border: 1px solid var(--ri-line);
    background: var(--surface);
}

.es-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    color: var(--text);
    font-size: 13.5px;
}

.es-key {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.es-key::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--es-sale);
}

.es-key.is-net::before {
    background: var(--es-net);
}

.es-legend-note {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12.5px;
}

.es-chart-empty {
    margin: 0;
    padding: 40px 0;
    color: var(--text-muted);
    text-align: center;
}

.es-rect-sale {
    fill: var(--es-sale);
}

.es-rect-net {
    fill: var(--es-net);
}

/* Columns over time: the scale down the left, a column for every day or week,
   and dates under every few. The scale is in quarters, so its labels are
   spread evenly against gridlines a quarter of the plot apart. */
.es-columns {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 240px auto;
    column-gap: 10px;
}

.es-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: -8px 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 16px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.es-plot {
    display: flex;
    min-width: 0;
    border-bottom: 1px solid var(--text-muted);
    background: repeating-linear-gradient(to top,
            transparent 0, transparent calc(25% - 1px),
            var(--border) calc(25% - 1px), var(--border) 25%);
}

.es-col {
    display: flex;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
}

.es-col:hover {
    background: var(--surface-2);
}

.es-col svg {
    display: block;
    width: 100%;
    max-width: 56px;
    height: 100%;
}

.es-xaxis {
    grid-column: 2;
    display: flex;
    padding-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

/* A date wider than its column spills evenly either side of it. */
.es-xaxis > span {
    display: flex;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

/* Bars by vertical or brand: the name, the bar, and what it came to. */
.es-bars {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.es-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 200px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.es-bar-label {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.es-bar-track {
    display: block;
    width: 100%;
    height: 22px;
    border-radius: 3px;
    background: var(--surface-2);
}

.es-bar-value {
    min-width: 170px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.es-bar-value small {
    color: var(--text-muted);
    font-size: 12.5px;
}

/* ---- nothing to show ---- */

.es-nothing {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 32px 16px 48px;
    text-align: center;
}

.es-art {
    width: 300px;
    max-width: 80%;
    height: auto;
}

.es-nothing-text {
    margin: 18px 0 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
}

.es-nothing-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.es-art-blob {
    fill: var(--info-bg);
}

.es-art-frame {
    fill: var(--surface);
    stroke: var(--border);
    stroke-width: 3;
}

.es-art-pane {
    fill: var(--surface-2);
}

.es-art-mullion {
    fill: none;
    stroke: var(--border);
    stroke-width: 3;
}

.es-art-light {
    fill: var(--border);
}

.es-art-floor {
    fill: none;
    stroke: var(--border);
    stroke-width: 2;
    stroke-linecap: round;
}

.es-art-pot {
    fill: var(--info-border);
}

.es-art-leaf {
    fill: #5fb98a;
}

.es-art-leaf.is-pale {
    fill: #a6dcbf;
}

.es-art-cat {
    fill: var(--es-cat);
}

.es-art-tail {
    fill: none;
    stroke: var(--es-cat);
    stroke-width: 5;
    stroke-linecap: round;
}

@media (max-width: 720px) {
    .es-toolbar {
        align-items: stretch;
    }

    .es-search,
    .es-search-box {
        width: 100%;
    }

    .es-download {
        margin-left: 0;
    }

    .es-columns {
        grid-template-rows: 200px auto;
    }

    .es-bar-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .es-bar-track {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .es-bar-value {
        min-width: 0;
    }

    .es-legend-note {
        margin-left: 0;
    }
}

/* ============================================================================
   Search Order-wise Settlements: the filter bar.

   The created dates or a search by ID, side by side with an OR between them,
   as a seller portal lays them out. The date box opens the two-month calendar
   (date-range.js). While a search is on, the dates are set aside, so they dim.
   ========================================================================= */

.st-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
    padding: 14px 18px 12px;
}

.st-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.st-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 400;
}

/* The date box and the search box: one look for both. */
.st-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 280px;
    max-width: 100%;
    min-height: 38px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.st-box .icon {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--text-muted);
}

summary.st-box {
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
}

summary.st-box::-webkit-details-marker {
    display: none;
}

.st-dates[open] > .st-box,
summary.st-box:focus-visible,
.st-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

/* A calendar, not a chevron: it stays the right way up when open. */
.st-dates[open] > summary .icon {
    transform: none;
}

.st-box.is-idle {
    color: var(--text-muted);
}

.st-or {
    padding-bottom: 10px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.st-search {
    padding-right: 6px;
}

.st-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    outline: none;
}

.st-search button {
    display: grid;
    place-items: center;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.st-search button:hover,
.st-search button:focus-visible {
    color: var(--text);
}

.st-result {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 0 18px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.st-result a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.st-result a:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .st-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .st-box {
        width: 100%;
    }

    .st-or {
        padding: 0;
        text-align: center;
    }
}
/* ============================================================================
   SPF Claims.

   Built from Returns Insights' and Earnings' parts: the tabs along the top, the
   chips, the search box, the download, the flat table and the guide in the
   page header. Its own: the counts in the tabs and chips, the toolbar row, the
   table's columns, the empty row, and the insides of its two drawers -- the
   choice of issue on a new claim, and a claim's details.
   ========================================================================= */

.spf-page .ri-page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spf-tab-code {
    padding: 0 6px;
    border: 1px solid var(--ri-line);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .04em;
}

.ri-page-tab.is-active .spf-tab-code {
    border-color: currentColor;
    color: var(--accent-strong);
}

.spf-count {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ri-page-tab.is-active .spf-count,
.ri-chip.is-active .spf-count {
    background: var(--accent);
    color: var(--surface);
}

.spf-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spf-new .icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* ---- toolbar: the chips, then the search and the download at the far end ---- */

.spf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.spf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.spf-chips .ri-chip {
    text-decoration: none;
}

.spf-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.spf-search {
    margin: 0;
}

.spf-search .es-search-box {
    width: 300px;
}

.spf-tools .es-download {
    margin-left: 0;
}

.spf-result {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: -8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.spf-result a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.spf-result a:hover {
    text-decoration: underline;
}

/* ---- table ---- */

.spf-table-wrap {
    border-radius: 6px;
}

.spf-table {
    min-width: 940px;
}

/* Nothing to scroll sideways to when the only row is the picture. */
.spf-table.is-empty {
    min-width: 0;
}

.spf-table thead th {
    font-weight: 600;
    white-space: nowrap;
}

.spf-table small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.spf-id {
    font-weight: 600;
    white-space: nowrap;
}

/* IDs are long and unbroken; they wrap anywhere rather than widen the column. */
.spf-code {
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* Tracking IDs are short enough to keep whole; the order IDs beside them give way. */
.spf-tracking {
    white-space: nowrap;
}

.spf-qty {
    margin-right: 2px;
    font-weight: 600;
    white-space: nowrap;
}

.spf-when {
    white-space: nowrap;
}

.spf-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.spf-sort .icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.spf-sort:hover,
.spf-sort:hover .icon {
    color: var(--accent-strong);
}

.spf-action {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.spf-row-btn {
    min-height: 32px;
    padding: 0 14px;
    font-size: 13px;
}

.spf-table .spf-empty td {
    padding: 40px 16px 48px;
    text-align: center;
}

.spf-empty .empty-illustration {
    max-width: 260px;
}

.spf-empty-title {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
}

.spf-empty-hint {
    max-width: 440px;
    margin: 6px auto 0;
    color: var(--text-muted);
    font-size: 14px;
}

.spf-empty .ri-btn {
    margin-top: 16px;
}

/* ---- drawers ---- */

.spf-drawer {
    width: min(640px, 100vw);
}

.spf-drawer-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.spf-drawer .form-field textarea:focus,
.spf-drawer .form-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The two kinds of claim, as cards: the one picked takes the accent. */
.spf-issues {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.spf-issues legend {
    margin-bottom: 10px;
    padding: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.spf-issue {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.spf-issue:hover,
.spf-issue:has(input:checked) {
    border-color: var(--accent);
}

.spf-issue:has(input:checked) {
    background: var(--accent-soft);
}

.spf-issue:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.spf-issue input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--accent);
}

.spf-issue strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.spf-issue small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
}

.spf-drawer-note {
    margin: 22px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* A claim's details: label over value, two to a row. */
.spf-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0 0 22px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.spf-facts > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.spf-facts > .is-wide {
    grid-column: 1 / -1;
}

.spf-facts dt {
    color: var(--text-muted);
    font-size: 12.5px;
}

.spf-facts dd {
    margin: 0;
    color: var(--text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.spf-note {
    margin: 0 0 18px;
}

.spf-note h3 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.spf-note p {
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.spf-reply {
    margin-top: 6px;
}

@media (max-width: 900px) {
    .spf-tools {
        width: 100%;
        margin-left: 0;
    }

    .spf-search {
        flex: 1 1 240px;
    }

    .spf-search .es-search-box {
        width: 100%;
    }
}

@media (max-width: 720px) {
    /* The column heads would hold the empty row as wide as the table, its
       picture scrolled out of sight; there is nothing to label, so they go. */
    .spf-table.is-empty thead {
        display: none;
    }
}

@media (max-width: 560px) {
    .spf-page .ri-page-tabs {
        gap: 4px 18px;
    }

    /* Both tabs on one line: the names say enough without the codes. */
    .spf-tab-code {
        display: none;
    }

    .spf-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .spf-search {
        flex: none;
    }

    .spf-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}