/* MiTschMR Studios customer portal — design tokens and shared styles.
   Ported from the Claude Design prototype "Portal Prototype.dc.html": the token values are the
   THEMES object, the keyframes are copied from its <helmet> block. */

:root {
    color-scheme: light;
    --bg: #f4f5f8;
    --surface: #ffffff;
    --surface2: #f9fafc;
    --border: rgba(20, 32, 43, .11);
    --text: #14202b;
    --muted: #4a5266;
    --faint: #646b75;
    --accent: #127052;
    --accentH: #0f664b;
    /* Text on a filled --accent or --err background, such as a button label. */
    --onFill: #ffffff;
    --accentSoft: rgba(20, 122, 92, .10);
    --hover: rgba(20, 32, 43, .05);
    --chip: #e4e6ee;
    --skel: #e6e8ee;
    --skel2: #f4f5fa;
    --art1: #e7e9f0;
    --art2: #f2f3f8;

    --ok: #2c8f68;
    --okText: #1f6e51;
    --okSoft: rgba(63, 185, 132, .16);
    --warn: #a8762a;
    --warnText: #8a6220;
    --warnSoft: rgba(217, 159, 69, .14);
    --err: #a33a36;
    --errText: #8a4a47;
    --errSoft: rgba(163, 58, 54, .10);
    --sans: 'IBM Plex Sans', system-ui, sans-serif;
    --display: 'Space Grotesk', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* Dark: chosen in the portal, or (below) the device's own setting when nothing was chosen.
   The two blocks must stay identical; ThemeCssTests checks that they do. */
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d161e;
    --surface: #14212c;
    --surface2: #132029;
    --border: rgba(255, 255, 255, .09);
    --text: #eef1f7;
    --muted: #b1bac9;
    --faint: #939eb0;
    --accent: #3cb88a;
    --accentH: #45c595;
    /* Dark text on the bright dark-theme fills: white on them falls short of 4.5:1. */
    --onFill: #0d161e;
    --err: #e5857f;
    --accentSoft: rgba(47, 168, 124, .15);
    --hover: rgba(255, 255, 255, .06);
    --chip: #243541;
    --skel: #1b2b36;
    --skel2: #243541;
    --art1: #1d2b35;
    --art2: #243541;

    --okText: #63d6a6;
    --warnText: #e0b06a;
    --errText: #cf9a97;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0d161e;
        --surface: #14212c;
        --surface2: #132029;
        --border: rgba(255, 255, 255, .09);
        --text: #eef1f7;
        --muted: #b1bac9;
        --faint: #939eb0;
        --accent: #3cb88a;
        --accentH: #45c595;
        /* Dark text on the bright dark-theme fills: white on them falls short of 4.5:1. */
        --onFill: #0d161e;
        --err: #e5857f;
        --accentSoft: rgba(47, 168, 124, .15);
        --hover: rgba(255, 255, 255, .06);
        --chip: #243541;
        --skel: #1b2b36;
        --skel2: #243541;
        --art1: #1d2b35;
        --art2: #243541;

        --okText: #63d6a6;
        --warnText: #e0b06a;
        --errText: #cf9a97;
    }
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

/* Underlined, so a link in a sentence doesn't rely on colour alone (WCAG 1.4.1). Links that look
   like buttons, tags or tabs are already clearly controls and opt out. */
a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a.button,
a.tag,
a.tab,
a.admin-tab,
a.reset-shortcut,
a.reload {
    text-decoration: none;
}

a:hover {
    color: var(--accentH);
}

input, select, textarea, button {
    font-family: inherit;
}

/* A ring on whatever the keyboard is on (WCAG 2.4.7). Only for keyboard focus: a mouse click draws none. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Fields show focus with their own border and glow (.field:focus). */
.field:focus-visible {
    outline: none;
}

/* Blazor moves focus to the page heading after navigation, for screen readers; nothing to draw. */
[tabindex="-1"]:focus {
    outline: none;
}

::placeholder {
    color: var(--faint);
    opacity: 1;
}

@keyframes shimmer {
    0% { background-position: -420px 0; }
    100% { background-position: 420px 0; }
}

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

@keyframes bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* ---------- shell ---------- */

.shell {
    min-height: 100vh;
    display: flex;
    background: var(--bg);
}

.sidebar {
    width: 236px;
    flex: none;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 20px;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #a9e5c6;
    color: #14202b;
    display: grid;
    place-items: center;
    font: 700 12px var(--display);
}

.brand-name {
    font: 600 13px var(--display);
    color: var(--text);
    line-height: 1.1;
}

.brand-sub {
    font: 400 10px var(--mono);
    color: var(--faint);
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    transition: background .15s, color .15s, padding-left .15s;
}

.nav-item:hover {
    background: var(--hover);
    padding-left: 14px;
    color: var(--muted);
}

.nav-item.active {
    background: var(--accentSoft);
    color: var(--accent);
    font-weight: 600;
}

.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    flex: none;
    background: rgba(120, 130, 145, .35);
}

.nav-item.active .nav-dot {
    background: var(--accent);
}

.nav-item.admin.active {
    background: rgba(217, 159, 69, .14);
    color: var(--warnText);
}

.nav-item.admin .nav-dot {
    background: #d99f45;
}

.nav-badge {
    margin-left: auto;
    font: 500 10px var(--mono);
    padding: 2px 6px;
    border-radius: 20px;
    color: var(--muted);
    background: var(--chip);
}

.nav-badge.accent {
    color: var(--onFill);
    background: var(--accent);
}

.nav-section {
    margin: 22px 0 8px;
    padding: 0 10px;
    font: 500 10px var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}

.sidebar-user {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 8px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: background .15s;
}

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

.avatar {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--chip);
    color: var(--muted);
    display: grid;
    place-items: center;
    font: 600 11px var(--sans);
}

.sidebar-user-name {
    font: 500 12px var(--sans);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-mail {
    font: 400 10px var(--mono);
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
}

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: 60px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 26px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 5;
}

.topbar-search {
    flex: 1;
    max-width: 340px;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--text);
    transition: border-color .16s, box-shadow .16s;
}

/* The search on every page (GlobalSearch.razor): the box, its shortcut hint and the results under it. */
.global-search {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 420px;
}

.global-search .topbar-search {
    width: 100%;
    max-width: none;
    padding-right: 58px;
}

.search-shortcut {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font: 500 10px var(--mono);
    color: var(--faint);
    pointer-events: none;
}

.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: min(520px, calc(100vw - 28px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    z-index: 20;
}

.search-group {
    padding: 8px 10px 4px;
    font: 500 10px var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
}

.search-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
}

.search-option.active {
    background: var(--accentSoft);
}

.search-title {
    font: 500 12.5px var(--sans);
    color: var(--text);
    overflow-wrap: anywhere;
}

.search-detail {
    font: 400 11px var(--sans);
    color: var(--faint);
}

/* Docs pages and earlier tickets under the ticket form's summary (Support.razor). */
.ticket-suggestions .search-group {
    padding: 10px 0 2px;
}

.ticket-suggestions ul {
    margin: 2px 0 0;
    padding-left: 18px;
    font: 400 12.5px/1.7 var(--sans);
    color: var(--text);
}

.search-empty {
    padding: 12px 10px;
    font: 400 12px var(--sans);
    color: var(--faint);
}

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.icon-button {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, transform .2s;
}

.icon-button:hover {
    background: var(--hover);
}

.icon-button.theme:hover {
    transform: rotate(-16deg);
}

.theme-glyph {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--text) 50%, var(--chip) 50%);
}

.bell-glyph {
    width: 12px;
    height: 12px;
    border: 1.6px solid var(--muted);
    border-radius: 3px 3px 6px 6px;
}

/* Three bars. The button and the backdrop only show on phones, where the sidebar becomes a menu. */
.menu-glyph {
    width: 14px;
    height: 1.6px;
    background: var(--muted);
    box-shadow: 0 -4.5px 0 var(--muted), 0 4.5px 0 var(--muted);
}

.menu-button,
.menu-backdrop {
    display: none;
}

.unread-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
}

.content {
    flex: 1;
    padding: 28px;
    width: 100%;
    box-sizing: border-box;
}

.page {
    animation: fadeUp .24s ease both;
}

/* Single-column forms and feeds (verify, support, notifications, profile) stay a comfortable
   reading/typing width instead of stretching edge to edge now that .content fills the page. */
.page.narrow {
    max-width: 760px;
}

/* ---------- typography ---------- */

.page-title {
    font: 600 24px var(--display);
    color: var(--text);
    margin: 0;
}

.page-sub {
    font: 400 13px var(--sans);
    color: var(--muted);
    margin-top: 6px;
    max-width: 640px;
}

.page-meta {
    font: 400 12px var(--mono);
    color: var(--faint);
}

.section-title {
    font: 600 15px var(--display);
    color: var(--text);
}

.label {
    font: 500 11.5px var(--sans);
    color: var(--muted);
    margin-bottom: 6px;
    display: block;
}

.hint {
    font: 400 11.5px var(--sans);
    color: var(--faint);
    margin-top: 8px;
}

.hint.bad {
    color: var(--err);
}

.mono {
    font-family: var(--mono);
}

.header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

/* A header's right-hand side when it holds more than one line, e.g. counts and a link. */
.header-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* ---------- controls ---------- */

.button {
    padding: 9px 15px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--onFill);
    font: 600 12.5px var(--sans);
    cursor: pointer;
    transition: background .16s, transform .16s, box-shadow .16s;
}

.button:hover:not(:disabled) {
    background: var(--accentH);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 122, 92, .28);
}

.button:disabled {
    opacity: .6;
    cursor: default;
}

.button.ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--muted);
}

.button.ghost:hover {
    background: var(--hover);
    box-shadow: none;
    transform: none;
}

.button.large {
    padding: 12px 18px;
    font-size: 13.5px;
    width: 100%;
}

.button.danger {
    background: var(--err);
}

.button.danger:hover:not(:disabled) {
    background: var(--errText);
    box-shadow: 0 6px 16px rgba(163, 58, 54, .28);
}

.chip {
    padding: 6px 12px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font: 600 11.5px var(--sans);
    background: var(--chip);
    color: var(--muted);
    transition: background .15s, color .15s;
}

.chip:hover {
    background: var(--hover);
}

.chip.active {
    background: var(--accentSoft);
    color: var(--accent);
}

/* A version's SHA-256, shortened; the full value is in the tooltip and copied on click. */
.chip.checksum {
    padding: 2px 8px;
    margin-left: 6px;
    font: 500 10px var(--mono);
    vertical-align: 1px;
}

/* What changed since the customer's version, read from the docs site's release notes. */
.release-notes .release {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.release-notes .release summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}

.release-notes .release summary::-webkit-details-marker {
    display: none;
}

/* The newest release starts open; older ones fold away behind this arrow. */
.release-notes .release summary::before {
    content: "▸";
    color: var(--faint);
    transition: transform .15s;
}

.release-notes .release[open] > summary::before {
    transform: rotate(90deg);
}

.release-section {
    margin-top: 10px;
}

.release-section-title {
    font: 600 12px var(--sans);
    color: var(--muted);
}

.release-section.attention .release-section-title {
    color: var(--warnText);
}

.release-list {
    margin: 4px 0 0;
    padding-left: 18px;
    font: 400 12.5px/1.6 var(--sans);
    color: var(--text);
}

.release-list ul {
    padding-left: 16px;
}

.release-text {
    margin: 8px 0 0;
    font: 400 12.5px/1.6 var(--sans);
    color: var(--text);
}

.release-notes code {
    font: 400 11.5px var(--mono);
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--chip);
}

/* Files picked for a new ticket, before it is sent. */
.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.attachment-list .list-row {
    padding: 6px 10px;
    font: 500 12.5px var(--sans);
}

.log-paths {
    margin-top: 8px;
    font: 400 11.5px var(--sans);
    color: var(--faint);
}

.log-paths summary {
    cursor: pointer;
    width: fit-content;
}

.log-paths dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 8px 0 0;
}

.log-paths dd {
    margin: 0;
    font-family: var(--mono);
    color: var(--muted);
    overflow-wrap: anywhere;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.field {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text);
    transition: border-color .16s, box-shadow .16s;
}

.field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accentSoft);
}

textarea.field {
    resize: vertical;
    line-height: 1.55;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    color: var(--text);
    font: 400 12.5px var(--sans);
}

.toggle-track {
    width: 34px;
    height: 20px;
    border-radius: 20px;
    background: var(--chip);
    display: flex;
    align-items: center;
    padding: 2px;
    box-sizing: border-box;
    justify-content: flex-start;
    transition: background .16s;
}

.toggle-track.on {
    background: var(--accent);
    justify-content: flex-end;
}

.toggle-knob {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

/* ---------- surfaces ---------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.split {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Two-column page layout: a wider primary column beside a narrower secondary one — the admin
   console's catalogue vs. its account panels, a list vs. its settings, a form vs. its history.
   Panels stacked within a column pick up their spacing from .panel + .panel. Override
   grid-template-columns inline where the default 1.3:1 ratio doesn't fit the content. */
.two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 18px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
    gap: 16px;
}

/* The admin console's four numbers across the top. */
.card-grid.stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* An asset page's key art beside its name, description and actions. */
.asset-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.asset-hero > .key-art {
    width: 220px;
    flex: none;
    border-radius: 10px;
}

/* The profile's avatar beside the name and email fields. */
.profile-head {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.asset-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    text-align: left;
    display: block;
    width: 100%;
    transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s, border-color .2s;
}

.asset-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(20, 32, 43, .12);
    border-color: var(--accent);
}

.key-art {
    height: 112px;
    position: relative;
    background: repeating-linear-gradient(135deg, var(--art1) 0 8px, var(--art2) 8px 16px);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.key-art span.placeholder {
    font: 400 9.5px var(--mono);
    color: var(--faint);
}

.key-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.key-art .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font: 500 10px var(--mono);
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--muted);
    background: var(--surface);
}

.key-art .badge.update {
    color: var(--okText);
    background: var(--okSoft);
}

.key-art .badge.deprecated {
    color: var(--warnText);
    background: var(--warnSoft);
}

.asset-card-body {
    padding: 15px;
}

.asset-name {
    font: 600 15px var(--display);
    color: var(--text);
}

.asset-tagline {
    font: 400 12px/1.5 var(--sans);
    color: var(--muted);
    margin-top: 6px;
    height: 36px;
    overflow: hidden;
}

.tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.tag {
    font: 500 11px var(--mono);
    color: var(--accent);
    background: var(--accentSoft);
    padding: 4px 8px;
    border-radius: 6px;
}

.tag.plain {
    color: var(--faint);
    background: transparent;
    padding: 4px 0;
}

.empty {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
}

.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .16s, background .16s, box-shadow .16s;
    /* Long emails and file names break rather than push the row's buttons off a narrow screen. */
    overflow-wrap: anywhere;
}

.list-row > :not(button):not(.button):not(.tag):not(.chip) {
    min-width: 0;
}

.list-row + .list-row {
    margin-top: 8px;
}

.list-row.interactive:hover {
    border-color: var(--accent);
    background: var(--accentSoft);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- compatibility matrix ---------- */

.matrix-scroll {
    overflow-x: auto;
}

.matrix {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.matrix-row {
    display: grid;
    grid-template-columns: 96px repeat(9, minmax(56px, 1fr));
    align-items: center;
    min-width: 680px;
}

.matrix-row + .matrix-row {
    border-top: 1px solid var(--border);
}

.matrix-row.head {
    background: var(--surface2);
}

.matrix-row.latest {
    background: var(--accentSoft);
}

.matrix-head-cell {
    padding: 10px 12px;
    font: 500 11px var(--mono);
    color: var(--faint);
    text-align: center;
}

.matrix-head-cell.first {
    text-align: left;
}

.lts-label {
    font: 600 8.5px var(--mono);
    color: var(--accent);
    letter-spacing: .03em;
    margin-top: 2px;
}

.matrix-cell {
    padding: 11px 12px;
    text-align: center;
    font: 600 12.5px var(--sans);
}

.matrix-cell.version {
    text-align: left;
    font: 500 12px var(--mono);
    color: var(--text);
}

.lvl-yes { color: var(--okText); }
.lvl-caveat { color: var(--warnText); }
.lvl-no { color: rgba(120, 130, 145, .6); }

.legend {
    display: flex;
    gap: 18px;
    margin-top: 10px;
    font: 400 11px var(--sans);
    color: var(--faint);
}

/* ---------- banners ---------- */

.banner {
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    border: 1px solid var(--border);
    animation: fadeUp .2s ease both;
}

.banner-title {
    font: 600 13px var(--sans);
}

.banner-body {
    font: 400 12.5px/1.6 var(--sans);
    margin-top: 6px;
}

.banner.ok {
    background: var(--okSoft);
    border-color: rgba(63, 185, 132, .35);
}

.banner.ok .banner-title { color: var(--okText); }
.banner.ok .banner-body { color: var(--okText); }

.banner.warn {
    background: var(--warnSoft);
    border-color: rgba(217, 159, 69, .35);
}

.banner.warn .banner-title { color: var(--warnText); }
.banner.warn .banner-body { color: var(--warnText); }

.banner.err {
    background: var(--errSoft);
    border-color: rgba(163, 58, 54, .3);
}

.banner.err .banner-title { color: var(--err); }
.banner.err .banner-body { color: var(--errText); }

.progress {
    height: 3px;
    border-radius: 3px;
    background: var(--chip);
    overflow: hidden;
    margin-top: 10px;
}

.progress-bar {
    width: 30%;
    height: 100%;
    background: var(--accent);
    animation: bar 1.1s ease-in-out infinite;
}

.spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent), transparent);
    mask: radial-gradient(circle, transparent 5px, #000 6px);
    -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
    animation: spin .9s linear infinite;
}

/* ---------- code ---------- */

.code {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px 16px;
    font: 400 12px/1.7 var(--mono);
    color: var(--text);
    white-space: pre-wrap;
    overflow-x: auto;
    margin-top: 14px;
}

.note {
    margin-top: 14px;
    font: 400 12px/1.6 var(--sans);
    color: var(--muted);
    border-left: 2px solid var(--accent);
    padding-left: 12px;
}

/* ---------- skeleton ---------- */

.skel {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--skel) 25%, var(--skel2) 50%, var(--skel) 75%);
    background-size: 840px 100%;
    animation: shimmer 1.4s linear infinite;
}

.skel-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

.loading-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    font: 400 11.5px var(--mono);
    color: var(--faint);
}

/* ---------- toast ---------- */

/* Centred by margins, not a transform: the entry animation ends on transform: none, which would undo one. */
.toast {
    position: fixed;
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;
    bottom: 26px;
    background: #14202b;
    color: #fff;
    padding: 11px 18px;
    border-radius: 10px;
    font: 500 12.5px var(--sans);
    box-shadow: 0 12px 30px rgba(20, 32, 43, .3);
    animation: toastIn .2s ease both;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
}

/* Undo and the like: light on the toast's fixed dark background, in both themes. */
.toast-action {
    flex: none;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: #a9e5c6;
    font: 600 12.5px var(--sans);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.toast-action:focus-visible {
    outline-color: #a9e5c6;
}

/* ---------- blazor error ui ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 20px;
    background: var(--errSoft);
    color: var(--errText);
    border-top: 1px solid rgba(163, 58, 54, .3);
    font: 400 12.5px var(--sans);
    box-shadow: 0 -12px 30px rgba(20, 32, 43, .15);
    z-index: 50;
}

#blazor-error-ui .reload {
    color: var(--err);
    font-weight: 600;
    margin-left: 8px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* ---------- auth ---------- */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
}

.auth-brand {
    background: #14202b;
    padding: 46px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.auth-glow {
    position: absolute;
    inset: auto -80px -110px auto;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(169, 229, 198, .34), transparent 70%);
}

.auth-headline {
    font: 600 30px/1.25 var(--display);
    color: #fff;
    margin-top: auto;
}

.auth-lede {
    font: 400 14px/1.7 var(--sans);
    color: rgba(255, 255, 255, .68);
    margin-top: 14px;
    max-width: 380px;
}

.auth-pills {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.auth-pill {
    font: 500 11px var(--mono);
    color: #a9e5c6;
    border: 1px solid rgba(169, 229, 198, .35);
    border-radius: 20px;
    padding: 5px 11px;
}

/* The brand panel is dark in both themes, so its footer has its own light colours. */
.auth-footer {
    margin-top: 26px;
    font: 400 11px var(--mono);
    color: rgba(255, 255, 255, .66);
}

.auth-footer a {
    color: #a9e5c6;
}

.auth-form-side {
    display: grid;
    place-items: center;
    padding: 46px;
    background: var(--bg);
}

.auth-form {
    width: 100%;
    max-width: 380px;
}

.auth-title {
    font: 600 22px var(--display);
    color: var(--text);
}

.auth-switch {
    font: 400 12.5px var(--sans);
    color: var(--muted);
    margin-top: 8px;
    margin-bottom: 22px;
}

.auth-switch strong {
    color: var(--text);
    font-weight: 600;
}

.auth-switch button {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.auth-field {
    margin-bottom: 14px;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: 500 11.5px var(--sans);
    color: var(--accent);
    cursor: pointer;
}

.link-button:hover {
    color: var(--accentH);
}

.auth-fine {
    font: 400 11px/1.6 var(--sans);
    color: var(--faint);
    margin-top: 16px;
}

.auth-back {
    font: 400 12px var(--sans);
    color: var(--muted);
    text-align: center;
    margin-top: 18px;
}

.auth-back a {
    font-weight: 600;
}

a.button.large {
    display: block;
    box-sizing: border-box;
    text-align: center;
}

/* a:hover would otherwise turn the label the colour of the filled background. */
a.button:not(.ghost):hover {
    color: var(--onFill);
}

.reset-shortcut {
    display: block;
    margin-top: 12px;
    padding: 13px 15px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    transition: border-color .16s, background .16s;
}

.reset-shortcut:hover {
    border-color: var(--accent);
    background: var(--accentSoft);
}

.reset-shortcut-label {
    font: 500 10px var(--mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint);
}

.reset-shortcut-body {
    font: 400 12px/1.6 var(--sans);
    color: var(--muted);
    margin-top: 5px;
}

.reset-shortcut-cta {
    color: var(--accent);
    font-weight: 600;
}

.auth-done {
    animation: fadeUp .3s ease both;
}

.auth-done .auth-title {
    text-align: center;
}

.auth-done-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(63, 185, 132, .16);
    color: #2c8f68;
    display: grid;
    place-items: center;
    font: 700 18px var(--sans);
    margin: 0 auto 16px;
}

.strength {
    display: flex;
    gap: 5px;
    margin-top: 9px;
}

.strength span {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--chip);
}

.strength span.on {
    background: #3fb984;
}

.validation {
    font: 400 11.5px/1.5 var(--sans);
    color: var(--err);
    margin-top: 10px;
}

.validation-errors {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.validation-message {
    font: 400 11.5px/1.5 var(--sans);
    color: var(--err);
}

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

    .auth-brand {
        display: none;
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split {
        grid-template-columns: minmax(0, 1fr);
    }

    .two-col {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    /* The sidebar becomes a slide-over menu, opened from the top bar. */
    .sidebar {
        display: none;
    }

    .sidebar.open {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        width: min(280px, 85vw);
        box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    }

    .menu-button {
        display: grid;
        flex: none;
    }

    .menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        border: none;
        padding: 0;
        background: rgba(13, 22, 30, .45);
    }

    .topbar {
        padding: 0 12px;
        gap: 8px;
    }

    .topbar-search {
        min-width: 0;
    }

    /* No keyboard on a phone to press Ctrl+K with, and the box is short. */
    .search-shortcut {
        display: none;
    }

    .global-search .topbar-search {
        padding-right: 12px;
    }

    /* The results take the screen's width, just under the top bar. */
    .search-results {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
    }

    .topbar-actions {
        gap: 6px;
    }

    /* "Verify a purchase" is in the menu; the top bar keeps the icons and sign-out. */
    .topbar-verify {
        display: none;
    }

    .content {
        padding: 18px 14px;
    }

    .card-grid.stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asset-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .asset-hero > .key-art {
        width: 100%;
    }

    .profile-head {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .header-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .header-aside {
        align-items: flex-start;
    }
}

/* ---------- ticket list: the studio's latest reply ---------- */

.ticket-reply {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--accent);
}

.ticket-reply-text {
    font: 400 12px/1.55 var(--sans);
    color: var(--muted);
    margin: 2px 0 3px;
    white-space: pre-line;
}

/* Field explanations as a tooltip instead of a line of text under the field (see InfoTip.razor). */
.info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border: 1px solid var(--faint);
    border-radius: 50%;
    font: 600 9px var(--sans);
    color: var(--faint);
    cursor: help;
    vertical-align: 1px;
}

.info:hover,
.info:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}

.info::after {
    content: attr(data-tip);
    position: absolute;
    left: -6px;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    font: 400 11.5px/1.45 var(--sans);
    color: var(--muted);
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
}

.info:hover::after,
.info:focus::after {
    opacity: 1;
    visibility: visible;
}

/* A tooltip beside a label near the right edge would stick out of the screen, even while hidden,
   so on phones it spans the screen just under the top bar. After the rules above, so it wins. */
@media (max-width: 700px) {
    .info::after {
        position: fixed;
        top: 72px;
        bottom: auto;
        left: 14px;
        right: 14px;
        width: auto;
        max-width: none;
    }
}

/* Tabs between a page's sections: the admin console (AdminHeader.razor) and the profile (ProfileTabs.razor). */
.admin-tabs,
.tabs {
    display: flex;
    gap: 4px;
    margin-top: 18px;
    border-bottom: 1px solid var(--border);
}

.admin-tab,
.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font: 500 13px var(--sans);
    color: var(--muted);
    text-decoration: none;
}

.admin-tab:hover,
.tab:hover {
    color: var(--text);
}

.admin-tab.active,
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Five admin sections don't fit a phone's width: they wrap, so the current one always shows. */
@media (max-width: 700px) {
    .admin-tabs {
        flex-wrap: wrap;
    }

    .admin-tab {
        padding: 8px 10px;
        white-space: nowrap;
    }
}

/* ---------- my Unity version (UnityLinePicker.razor) ---------- */

.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 18px;
}

.unity-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.unity-picker {
    width: auto;
    min-width: 150px;
}

.tag.warn {
    color: var(--warnText);
    background: var(--warnSoft);
}

.tag.ok {
    color: var(--okText);
    background: var(--okSoft);
}

.tag.err {
    color: var(--err);
    background: var(--errSoft);
}

/* The upgrade check's verdict tags line up, whatever their text. */
.upgrade-check .list-row > .tag:first-child {
    min-width: 104px;
    text-align: center;
}

/* ---------- first-run checklist on the assets page (SetupChecklist.razor) ---------- */

.setup-checklist {
    margin-top: 16px;
}

.setup-step {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.setup-checklist .header-row + .setup-step {
    margin-top: 12px;
}

.setup-mark {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 600 12px var(--sans);
    color: var(--faint);
    background: var(--chip);
}

.setup-mark.done {
    color: var(--okText);
    background: var(--okSoft);
}

.setup-title {
    font: 600 12.5px var(--sans);
    color: var(--text);
    margin-bottom: 2px;
}

/* ---------- known issues, as owners see them (KnownIssueList.razor) ---------- */

.known-issue {
    align-items: flex-start;
}

.known-issue-title {
    font: 600 12.5px var(--sans);
    color: var(--text);
}

.known-issue .tag-row {
    margin-top: 6px;
    flex-wrap: wrap;
}

/* ---------- a ticket opened up: progress, conversation, reply (TicketThread.razor) ---------- */

.ticket + .ticket {
    margin-top: 8px;
}

.ticket-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.ticket-toggle:hover span:first-child {
    color: var(--accent);
}

.ticket-thread {
    margin-top: 6px;
    padding: 14px 16px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
}

.ticket-steps {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.ticket-steps li {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    border-top: 3px solid var(--chip);
    color: var(--faint);
}

.ticket-steps li.done {
    border-top-color: var(--accent);
    color: var(--text);
}

.step-name {
    font: 600 11.5px var(--sans);
}

.step-date {
    font: 400 11px var(--sans);
    color: var(--faint);
    min-height: 14px;
}

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

.msg {
    max-width: 88%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.msg.mine {
    align-self: flex-end;
    background: var(--accentSoft);
    border-color: transparent;
}

.msg-head {
    font: 500 11px var(--sans);
    color: var(--faint);
    margin-bottom: 3px;
}

.msg-body {
    font: 400 12.5px/1.55 var(--sans);
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-reply,
.solved-question {
    margin-top: 14px;
}

.solved-question > span {
    flex: 1 0 100%;
}

.solved-question {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- rating a closed ticket (TicketRating.razor) ---------- */

.ticket-rating {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font: 400 12.5px var(--sans);
    color: var(--text);
}

.rating-question,
.rating-given {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.rating-question > span {
    font-weight: 500;
}

.star-input {
    display: flex;
}

.star {
    padding: 2px 3px;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--faint);
    cursor: pointer;
}

/* Hovering lights the stars up to the one under the pointer, as a preview of the click. */
.star.lit,
.star-input:hover .star {
    color: var(--warnText);
}

.star-input .star:hover ~ .star {
    color: var(--faint);
}

.star:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: 4px;
}

.stars {
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--warnText);
}

/* ---------- two-factor setup (TwoFactorPanel.razor) ---------- */

.two-factor-setup {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* Dark on white in both themes: a scanner needs the contrast. */
.qr {
    width: 172px;
    flex: none;
    padding: 6px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    line-height: 0;
}

.qr svg {
    width: 100%;
    height: auto;
}

.two-factor-key {
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: .06em;
    overflow-wrap: anywhere;
    color: var(--text);
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text);
}

/* ---------- community (home page) ---------- */

.panel.community {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    flex-wrap: wrap;
    margin: 24px 0 0;
}

/* ---------- end of life (EndOfLifePanel.razor) ---------- */

.end-of-life {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.end-of-life-fields {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 10px;
}

.end-of-life-fields .field {
    width: 170px;
}

.end-of-life-actions {
    display: flex;
    gap: 9px;
}

/* ---------- proof of licence ---------- */

.licence-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.licence-holder {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 18px;
    margin: 18px 0;
    font: 400 12.5px var(--sans);
}

.licence-holder dt {
    color: var(--muted);
}

.licence-holder dd {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

.licence-table-wrap {
    overflow-x: auto;
}

.licence-table {
    width: 100%;
    border-collapse: collapse;
    font: 400 12.5px var(--sans);
    color: var(--text);
}

.licence-table th {
    text-align: left;
    font-weight: 500;
    color: var(--muted);
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--border);
}

.licence-table td {
    padding: 9px 12px 9px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

/* Printing shows the page's content only: no menu, search, toasts or buttons. */
@media print {
    .sidebar,
    .topbar,
    .menu-backdrop,
    .toast-region,
    .licence-actions {
        display: none !important;
    }

    .shell,
    .content {
        display: block;
        padding: 0;
        background: none;
    }

    body,
    .shell {
        background: none;
    }

    .page,
    .page.narrow {
        animation: none;
        max-width: none;
    }

    .panel.licence {
        border: none;
        padding: 0;
        margin: 0;
        background: none;
    }
}