/* Palette: grounded in the real AlexZaxa Solutions mark (the orange "flame" is the logo's own
   orange, not a generic accent) and the physical world this product runs in - a restaurant
   kitchen at night. Dark ink surfaces throughout (the product's own dashboards are dark too),
   with one warm accent instead of a cool system-blue. --paper/--ink-on-paper exist only for the
   receipt-styled pricing panels lower in this file - a deliberate, single warm-light surface
   standing in for an actual printed kitchen ticket, not a second page background.
   Every page shares this one stylesheet, so changing these tokens re-skins the whole site. */
:root {
    --bg: #16171b;
    --surface: #1e2024;
    --surface-2: #282a2f;
    --surface-3: #35373d;
    --border: rgba(243, 239, 230, 0.12);
    --border-muted: rgba(243, 239, 230, 0.07);
    --text: #f3efe6;
    --text-dim: #9d9a93;
    --accent: #eb761c;
    --accent-strong: #ff8a35;
    --accent-deep: #b9590f;
    --accent-text: #1a1204;
    --accent-subtle: rgba(235, 118, 28, 0.16);
    --danger: #e5584a;
    --danger-subtle: rgba(229, 88, 74, 0.16);
    --success: #3fb673;
    --success-subtle: rgba(63, 182, 115, 0.16);
    --warning: #e0a52c;
    --warning-subtle: rgba(224, 165, 44, 0.16);
    --paper: #efe6d3;
    --paper-dim: #ddd0af;
    --ink-on-paper: #292116;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
    --ease: 260ms cubic-bezier(0.4, 0, 0.2, 1);
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--accent-strong); text-decoration: underline; }

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

header.site {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 2.5rem;
    border-bottom: 1px solid var(--border-muted);
    background: rgba(22, 23, 27, 0.78);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
}

header.site .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--text);
}
header.site .brand .mark {
    display: inline-flex;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    background: linear-gradient(155deg, var(--accent-strong), var(--accent-deep));
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}
header.site .brand .brand-logo {
    display: block;
    height: 2.5rem;
    width: auto;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

header.site nav { display: flex; align-items: center; gap: 0.2rem; }
header.site nav a {
    color: var(--text-dim);
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color var(--ease), background var(--ease);
}
header.site nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }

.lang-switch {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    margin-left: 0.8rem;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.lang-switch:hover { background: var(--surface-3); }
.lang-switch:active { transform: scale(0.94); }

main {
    max-width: 1040px;
    margin: 0 auto;
    padding: 4.5rem 2.5rem 7rem;
}

main.narrow { max-width: 460px; padding-top: 5.5rem; }
main.legal { max-width: 720px; }
main.legal p { color: var(--text-dim); }
main.legal code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    background: var(--surface-2);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--text);
}

h1 {
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 0.9rem;
    max-width: 15ch;
}
h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin: 4.25rem 0 1.15rem; color: var(--text); }
h3 { font-weight: 700; letter-spacing: -0.005em; }
p.lead { color: var(--text-dim); font-size: 1.08rem; max-width: 640px; line-height: 1.65; }

.eyebrow {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent-strong);
    margin-bottom: 0.7rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius);
    padding: 1.6rem 1.7rem;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    background: var(--accent-subtle);
    color: var(--accent-strong);
    margin-bottom: 0.85rem;
}
.card .icon svg { width: 1.1rem; height: 1.1rem; }

.card h3 { margin: 0 0 0.45rem; font-size: 1.02rem; }
.card p { margin: 0; color: var(--text-dim); font-size: 0.93rem; }

.price-tag { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.7rem 0 0.9rem; }
.price-tag span { font-size: 0.95rem; font-weight: 500; color: var(--text-dim); }

.card.plain { background: none; border: none; box-shadow: none; padding: 0; }
.card.plain:hover { transform: none; box-shadow: none; }

/* Trust points as a plain, quiet list - a heading and one line each, separated by hairlines.
   No icons, no card backgrounds: the four claims carry themselves without a box around each. */
.trust-list {
    margin-top: 1.75rem;
    border-top: 1px solid var(--border-muted);
}
.trust-item {
    display: grid;
    grid-template-columns: minmax(0, 15rem) 1fr;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-muted);
}
.trust-item h3 { margin: 0; font-size: 1.05rem; }
.trust-item p { margin: 0; color: var(--text-dim); max-width: 46ch; }
@media (max-width: 700px) {
    .trust-item { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* How it works: a genuine 3-step sequence, so the numbering earns its place. Set large in the
   display face rather than boxed in a rounded card. */
.steps { margin-top: 1.75rem; }
.step {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1.25rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--border-muted);
}
.step:last-child { border-bottom: 1px solid var(--border-muted); }
.step-number {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--accent-strong);
}
.step h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.step p { margin: 0; color: var(--text-dim); max-width: 48ch; }
@media (max-width: 700px) {
    .step { grid-template-columns: 2.4rem 1fr; }
    .step-number { font-size: 1.7rem; }
}

/* The receipt: pricing set as two literal printed tickets, the one moment on this page that
   breaks from the dark surfaces - a warm paper tone standing in for what this product's own
   printers put out every night. Torn top edge via a repeating conic-gradient mask (a row of
   semicircular notches), the way a ticket looks freshly pulled off a perforated roll. */
.receipt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
}
@media (max-width: 760px) {
    .receipt-row { grid-template-columns: 1fr; gap: 2.75rem; }
}
.receipt {
    position: relative;
    background: var(--paper);
    color: var(--ink-on-paper);
    padding: 2.4rem 1.9rem 1.9rem;
    box-shadow: var(--shadow-lg);
}
/* The torn top edge: a row of page-background-colored dots painted over the paper, right at
   the card's top border - reads as punched perforation without any real masking (which, tried
   first, ended up cutting through the entire card instead of just this strip - background-image
   dots in the surrounding page color are a much less fragile way to fake the same bite). */
.receipt::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background-image: radial-gradient(circle 7px at 14px 0, var(--bg) 7px, transparent 7.5px);
    background-repeat: repeat-x;
    background-position: top left;
    background-size: 28px 14px;
}
.receipt-kind {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-on-paper);
    opacity: 0.55;
}
.receipt h3 { margin: 0.3rem 0 0; font-size: 1.2rem; color: var(--ink-on-paper); }
.receipt-total {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1.1;
    margin: 0.6rem 0 1.1rem;
}
.receipt-total span { font-size: 1rem; font-family: var(--font-body); opacity: 0.65; }
.receipt-lines { border-top: 1px dashed rgba(41, 33, 22, 0.35); margin: 0 0 1.1rem; padding-top: 1rem; }
.receipt-lines p {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.55rem;
    font-size: 0.92rem;
    color: var(--ink-on-paper);
    opacity: 0.85;
}
.receipt-lines p:last-child { margin-bottom: 0; }
.receipt-note { font-size: 0.85rem; color: var(--ink-on-paper); opacity: 0.65; margin: 0; }

/* Admin-only pricing edit affordance on the public homepage - only ever shown once index.html
   has confirmed the signed-in session belongs to profiles.role = 'admin' (see the inline script
   at the bottom of this page), same trust boundary as every other admin-gated action in this
   app, just checked client-side here instead of an Edge Function since it's a direct RLS write. */
.pricing-admin-bar[hidden] { display: none; }
.pricing-admin-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0 -1.5rem;
}
.pricing-edit-panel[hidden] { display: none; }
.pricing-edit-panel {
    margin-top: 4.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-muted);
    max-width: 640px;
}
.pricing-visible-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
    font-size: 0.95rem;
    margin: 1rem 0 0;
}
.pricing-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}
@media (max-width: 640px) {
    .pricing-edit-grid { grid-template-columns: 1fr; }
}

.hero-cta { margin-top: 1.6rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.hero-demo-link { margin-top: 1.1rem; }
.hero-demo-link-secondary { margin-top: 0.5rem; }
.link-btn {
    background: none;
    border: none;
    color: var(--accent-strong);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color var(--ease);
}
.link-btn:hover { color: var(--accent); text-decoration: underline; }

.window-frame {
    display: block;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-muted);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
}
.window-bar { display: flex; align-items: center; gap: 6px; padding: 0.75rem 0.95rem; background: var(--surface-2); }
.window-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.window-bar .dot.red { background: #ff5f57; }
.window-bar .dot.yellow { background: #febc2e; }
.window-bar .dot.green { background: #28c840; }
.window-frame img { width: 100%; height: auto; display: block; }
.hero-shot { margin-top: 3.5rem; }

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-top: 6rem;
}
.feature-row.reverse .feature-copy { order: 2; }
.feature-row.reverse .feature-shot { order: 1; }
.feature-copy h2 { margin-top: 0; }
.feature-copy p.lead { max-width: none; }
.story-demo-link { margin: 1.4rem 0 0; }
.story-demo-link a { font-weight: 700; }
.story-demo-note { margin: 0.35rem 0 0; color: var(--text-dim); font-size: 0.82rem; }

@media (max-width: 760px) {
    .feature-row { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3.5rem; }
    .feature-row.reverse .feature-copy, .feature-row.reverse .feature-shot { order: initial; }
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1rem;
    font-size: 0.9rem;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius);
    /* No overflow:hidden here on purpose - it used to clip the header's square corners to match
       the rounded border, but it also clipped the row-action dropdown menu (.menu-list, which
       opens downward via position:absolute) whenever it belonged to the last row, since that
       menu has nowhere to open but past the table's bottom edge. That made the last row of any
       table using the kebab-menu pattern (e.g. Stores) impossible to act on. */
}
thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
thead th { background: var(--surface); }
th, td {
    text-align: left;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-muted);
}
th { color: var(--text-dim); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.01em; }
tbody tr { transition: background var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: none; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--accent);
    color: var(--accent-text);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.68rem 1.3rem;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease), border-color var(--ease), opacity var(--ease);
    box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--accent-strong); }
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: none; }
.btn.secondary:hover { background: var(--surface-3); border-color: var(--border); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: #ff6b61; }
.btn.xl { padding: 0.85rem 1.5rem; font-size: 1rem; }

.release-list { margin-top: 1.5rem; }
.release-row { padding: 1.4rem 0; border-bottom: 1px solid var(--border-muted); }
.release-row:first-child { padding-top: 0; }
.release-row:last-child { border-bottom: none; }
.release-meta { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.4rem; }
.release-version { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.release-date { color: var(--text-dim); font-size: 0.86rem; }
.release-notes { margin: 0; color: var(--text-dim); font-size: 0.93rem; max-width: 640px; }

.quick-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
}
.quick-nav a {
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 500;
    transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.quick-nav a:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); text-decoration: none; }

.faq-list { margin-top: 1.5rem; border-top: 1px solid var(--border-muted); }
.faq-item { border-bottom: 1px solid var(--border-muted); padding: 1.15rem 0; }
.faq-item summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.98rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--text-dim);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1;
    transition: transform var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0.9rem 0 0; color: var(--text-dim); font-size: 0.93rem; }

input, select, textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color var(--ease), box-shadow var(--ease);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-subtle);
}
textarea { resize: vertical; }

label { display: block; font-size: 0.86rem; color: var(--text-dim); margin: 1rem 0 0.4rem; }

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

.msg { margin-top: 1.1rem; font-size: 0.9rem; }
.msg.error { color: var(--danger); }
.msg.success { color: var(--success); }

.badge[hidden] { display: none; }
.badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.badge.admin { color: var(--accent-strong); border-color: transparent; background: var(--accent-subtle); }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.menu {
    position: relative;
    display: inline-block;
}
.menu-trigger {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease);
}
.menu-trigger:hover { background: var(--surface-2); }
.menu-trigger:focus, .menu-trigger:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.menu-list {
    display: block;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 175px;
    z-index: 10;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.menu-list.open { opacity: 1; visibility: visible; transform: none; }
.menu-list button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    padding: 0.65rem 0.95rem;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background var(--ease);
}
.menu-list button:hover { background: var(--surface-3); }
.menu-list button.danger { color: var(--danger); }

.reveal {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-all;
    margin-top: 0.75rem;
}

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius);
    padding: 1.35rem 1.5rem;
    transition: border-color var(--ease);
}
.stat-tile:hover { border-color: var(--border); }
.stat-tile .stat-label {
    display: block;
    color: var(--text-dim);
    font-size: 0.84rem;
    margin-bottom: 0.45rem;
}
.stat-tile .stat-value {
    display: block;
    font-size: 2.1rem;
    font-weight: 700;
    font-variant-numeric: proportional-nums;
    letter-spacing: -0.02em;
}

.tabs {
    display: flex;
    gap: 0.15rem;
    border-bottom: 1px solid var(--border-muted);
    margin-top: 1rem;
    overflow-x: auto;
}
.tab-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 0.8rem 1.05rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.tab-btn:hover { color: var(--text); background: var(--surface-2); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-badge {
    background: var(--danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
}
.tab-panel h2:first-child { margin-top: 1.75rem; }

.notif-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin-bottom: 0.8rem;
    transition: border-color var(--ease);
}
.notif-card:hover { border-color: var(--border); }
.notif-card.status-resolved { opacity: 0.75; }
.notif-card .notif-body { flex: 1; min-width: 0; }
.notif-card h4 { margin: 0.15rem 0 0.35rem; font-size: 0.98rem; }
.notif-card p { margin: 0 0 0.5rem; color: var(--text); white-space: pre-wrap; }
.notif-meta { color: var(--text-dim); font-size: 0.82rem; }
.notif-actions select { width: auto; min-width: 150px; }

.notif-reply-sent {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.9rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
}
.notif-reply-sent-label { font-size: 0.76rem; color: var(--text-dim); margin-bottom: 0.3rem; }
.notif-reply-sent p { margin: 0; color: var(--text); font-size: 0.9rem; }

.ticket-reply-form { margin-top: 0.85rem; }
.ticket-reply-form textarea { font-size: 0.88rem; }
.ticket-reply-row { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.5rem; }
.ticket-reply-row .msg { margin-top: 0; }
.notif-status-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 600;
}
.notif-status-label .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-open { border-left-color: var(--danger); }
.status-open .notif-status-label { color: var(--danger); }
.status-open .dot { background: var(--danger); }
.status-in_progress { border-left-color: var(--warning); }
.status-in_progress .notif-status-label { color: var(--warning); }
.status-in_progress .dot { background: var(--warning); }
.status-resolved { border-left-color: var(--success); }
.status-resolved .notif-status-label { color: var(--success); }
.status-resolved .dot { background: var(--success); }

.resolved-toggle { margin-top: 1.5rem; }
.resolved-toggle summary {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.resolved-toggle[open] summary { margin-bottom: 1rem; }

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius);
    padding: 2.2rem 2.2rem 1.9rem;
    box-shadow: var(--shadow);
}

.callout {
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.35rem 1.6rem;
    margin-top: 1.5rem;
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.status-dot.online { background: var(--success); box-shadow: 0 0 0 2px var(--success-subtle); }
.status-dot.offline { background: var(--text-dim); }

.muted-note {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

.notes-cell { max-width: 320px; }
.notes-cell .notes-display { white-space: pre-wrap; }
.notes-cell .notes-edit textarea { min-width: 240px; }

footer.site {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
    padding: 3rem 2rem;
    border-top: 1px solid var(--border-muted);
}
footer.site .footer-brand { color: var(--text); font-weight: 500; margin-bottom: 0.35rem; }
footer.site .footer-contact { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
footer.site a { color: var(--text-dim); }
footer.site a:hover { color: var(--accent-strong); }

@media (max-width: 640px) {
    header.site { padding: 1.1rem 1.35rem; }
    main { padding: 2.5rem 1.35rem 4rem; }
    h1 { font-size: 2rem; }
    h2 { margin: 3rem 0 1rem; }
}

/* Motion: scroll-reveal, skeleton loading, spinners.
   Named .reveal-up, not .reveal - that name was already taken (see the monospace secret-reveal
   box above, used for install commands/SHA-256 hashes). Reusing it silently applied that
   styling (monospace font, border, background) to every scroll-reveal element - caught in
   testing before this ever shipped.
   Scoped under .js (set by assets/motion.js) so pages render fully visible with no JS at all -
   without that guard, a JS error or disabled JS would leave .reveal-up elements stuck at opacity:0. */
.js .reveal-up {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal-up.is-visible { opacity: 1; transform: none; }
.js .grid > .reveal-up:nth-child(1) { transition-delay: 0s; }
.js .grid > .reveal-up:nth-child(2) { transition-delay: 0.08s; }
.js .grid > .reveal-up:nth-child(3) { transition-delay: 0.16s; }
.js .grid > .reveal-up:nth-child(4) { transition-delay: 0.24s; }

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton-text {
    display: inline-block;
    height: 0.85em;
    width: 100%;
    max-width: 140px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-block {
    display: block;
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: -0.15em;
    margin-right: 0.5em;
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal-up { opacity: 1; transform: none; transition: none; }
    .skeleton-text, .skeleton-block, .spinner { animation: none; }
    .menu-list { transition: opacity 0.01ms, visibility 0.01ms; }
}

/* Top-of-page progress bar for page navigations, and a generic labeled progress bar for
   real upload/download byte progress (release publish, release download). */
#page-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    z-index: 9999;
    opacity: 0;
    transition: width 0.4s ease, opacity 0.3s ease;
    pointer-events: none;
}
#page-progress.active { opacity: 1; width: 80%; }

.progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin-top: 0.75rem;
}
.progress-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    transition: width 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    #page-progress { transition: none; }
}