@font-face {
  font-family: "Nunito";
  src: url("/ui/fonts/Nunito-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --highlight-1: #e6007e;
  --highlight-2: #2daae1;
  --highlight-3: #96c11f;
  --highlight-4: #e6007e;
  --highlight-1-dark: #bb2172;
  --highlight-2-dark: #187fae;
  --highlight-3-dark: #5f7d13;
  --highlight-4-dark: #bb2172;
  --highlight-1-wash: #fff1f9;
  --highlight-2-wash: #e2eff8;
  --highlight-3-wash: #e0ebde;
  --highlight-4-wash: #fff1f9;
  --fft-pink: var(--highlight-1);
  --fft-deep-pink: var(--highlight-1-dark);
  --fft-blue: var(--highlight-2);
  --fft-blue-dark: var(--highlight-2-dark);
  --fft-green: var(--highlight-3);
  --link-color: var(--fft-blue);
  --button-pink: #e6007e;
  --button-pink-hover: #bb2172;
  --button-blue: #187fae;
  --button-blue-hover: #126b91;
  --ink: #535353;
  --ink-dark: #343434;
  --muted: #747474;
  --line: #e5e5e5;
  --paper: #ffffff;
  --wash: #f3f3f3;
  --pink-wash: #fff1f9;
  --blue-wash: #e2eff8;
  --green-wash: #e0ebde;
  --danger: #a81955;
  --danger-action: #a81955;
  --danger-hover: #7f103e;
  --success-text: #315d17;
  --failed-text: #8b1450;
  --warning-text: #5b3d09;
  --warning-strong-text: #533300;
  --warning-wash: #fff1c7;
  --warning-border: #ebc869;
  --archive-text: #86520b;
  --archive-wash: #fff1d6;
  --info-text: #175f80;
  --control-border: #cfcfcf;
  --control-accent-border: #b9d8eb;
  --blue-border: #cce4f1;
  --viewer-surface: #fbfcfd;
  --shadow-soft: rgba(83, 83, 83, .10);
  --shadow-subtle: rgba(83, 83, 83, .08);
  --focus-ring: rgba(45, 170, 225, .34);
  color-scheme: light;
  font-family: "Nunito", Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--wash);
}

html[data-site-theme="archi"] {
  --highlight-1: #2c9cdb;
  --highlight-2: #f2994a;
  --highlight-3: #27ae60;
  --highlight-4: #eb5757;
  --highlight-1-dark: #1c78ad;
  --highlight-2-dark: #b75e12;
  --highlight-3-dark: #187640;
  --highlight-4-dark: #b52e2e;
  --highlight-1-wash: #e6f4fc;
  --highlight-2-wash: #fff1e5;
  --highlight-3-wash: #e5f6ec;
  --highlight-4-wash: #fdeaea;
  --fft-pink: var(--highlight-1);
  --fft-deep-pink: var(--highlight-1-dark);
  --fft-blue: var(--highlight-2);
  --fft-blue-dark: var(--highlight-2-dark);
  --fft-green: var(--highlight-3);
  --link-color: var(--highlight-1-dark);
  --button-pink: var(--highlight-1);
  --button-pink-hover: var(--highlight-1-dark);
  --button-blue: var(--highlight-2-dark);
  --button-blue-hover: #91490d;
  --pink-wash: var(--highlight-4-wash);
  --blue-wash: var(--highlight-1-wash);
  --green-wash: var(--highlight-3-wash);
  --focus-ring: rgba(44, 156, 219, .38);
}

html[data-theme="dark"] {
  --highlight-1: #ff4fa9;
  --highlight-2: #58c4f2;
  --highlight-3: #b2d75a;
  --highlight-4: #ff4fa9;
  --highlight-1-dark: #ff72b8;
  --highlight-2-dark: #187fae;
  --highlight-3-dark: #789b24;
  --highlight-4-dark: #ff72b8;
  --highlight-1-wash: #3d2031;
  --highlight-2-wash: #1b3544;
  --highlight-3-wash: #28371f;
  --highlight-4-wash: #3d2031;
  --fft-pink: var(--highlight-1);
  --fft-deep-pink: var(--highlight-1-dark);
  --fft-blue: var(--highlight-2);
  --fft-blue-dark: var(--highlight-2-dark);
  --fft-green: var(--highlight-3);
  --link-color: #69cdf5;
  --button-pink: #d41976;
  --button-pink-hover: #ae155f;
  --button-blue: #187fae;
  --button-blue-hover: #126b91;
  --ink: #d5d9df;
  --ink-dark: #f5f7fa;
  --muted: #aeb5c0;
  --line: #4a535f;
  --paper: #222831;
  --wash: #151a21;
  --pink-wash: #3d2031;
  --blue-wash: #1b3544;
  --green-wash: #28371f;
  --danger: #ff8fba;
  --danger-action: #bd1f63;
  --danger-hover: #95184e;
  --success-text: #c4e9a5;
  --failed-text: #ff9ac2;
  --warning-text: #f1d28a;
  --warning-strong-text: #f5d993;
  --warning-wash: #3a301b;
  --warning-border: #806b35;
  --archive-text: #f0c778;
  --archive-wash: #3a2d18;
  --info-text: #9eddf7;
  --control-border: #788391;
  --control-accent-border: #668b9d;
  --blue-border: #577c8e;
  --viewer-surface: #191f27;
  --shadow-soft: rgba(0, 0, 0, .32);
  --shadow-subtle: rgba(0, 0, 0, .22);
  --focus-ring: #69cdf5;
  color-scheme: dark;
}

html[data-site-theme="archi"][data-theme="dark"] {
  --highlight-1: #58b7e9;
  --highlight-2: #f7ad69;
  --highlight-3: #55c984;
  --highlight-4: #f27a7a;
  --highlight-1-dark: #2c9cdb;
  --highlight-2-dark: #d9741b;
  --highlight-3-dark: #229853;
  --highlight-4-dark: #d33f3f;
  --highlight-1-wash: #173647;
  --highlight-2-wash: #422d1b;
  --highlight-3-wash: #1d3b29;
  --highlight-4-wash: #462326;
  --link-color: #69c8f5;
  --button-pink: #2c9cdb;
  --button-pink-hover: #207eaf;
  --button-blue: #c46516;
  --button-blue-hover: #9d4e0f;
  --pink-wash: var(--highlight-4-wash);
  --blue-wash: var(--highlight-1-wash);
  --green-wash: var(--highlight-3-wash);
  --focus-ring: #69c8f5;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(230, 0, 126, .09), transparent 27rem),
    radial-gradient(circle at 88% 88%, rgba(45, 170, 225, .12), transparent 30rem),
    var(--wash);
  font-family: "Nunito", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.shell { width: min(100% - 2rem, 1120px); margin: 0 auto; }
.auth-shell { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.auth-card, .panel {
  background: var(--paper);
  border: 1px solid var(--shadow-soft);
  border-radius: 20px;
  box-shadow: 0 18px 50px var(--shadow-soft);
}
.auth-card { width: min(100%, 460px); padding: 2.6rem; border-top: 7px solid var(--fft-deep-pink); }
.login-logo { display: inline-block; max-width: 100%; line-height: 0; }
.login-logo img { display: block; width: auto; max-width: 100%; height: 86px; object-fit: contain; object-position: left center; }
.topbar-logo { display: inline-flex; min-width: 0; align-items: center; gap: .65rem; color: var(--ink-dark); font-size: 1.15rem; font-weight: 800; }
.topbar-logo:hover { text-decoration: none; }
.topbar-logo img { width: 56px; height: auto; display: block; }
.topbar-logo span { max-width: 18rem; padding-left: .65rem; overflow: hidden; border-left: 1px solid var(--line); text-overflow: ellipsis; white-space: nowrap; }

.eyebrow {
  margin-top: 1rem;
  color: var(--fft-deep-pink);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2, h3 { color: var(--ink-dark); font-weight: 700; line-height: 1.1; }
h1 { margin: 1.1rem 0 .75rem; font-size: clamp(2rem, 5vw, 2.75rem); }
h2 { font-size: 1.55rem; }
p { color: var(--muted); line-height: 1.55; }
label { display: block; margin: 1.35rem 0 .45rem; color: var(--ink-dark); font-size: .92rem; font-weight: 700; }

.email-field { display: flex; align-items: stretch; width: 100%; }
.email-field input {
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 8px 0 0 8px;
  border-right: 0;
}
.email-field span {
  display: flex;
  align-items: center;
  padding: 0 .9rem;
  color: var(--ink);
  background: var(--blue-wash);
  border: 1px solid var(--control-accent-border);
  border-radius: 0 8px 8px 0;
  font-weight: 700;
  white-space: nowrap;
}
input {
  width: 100%;
  padding: .86rem 1rem;
  color: var(--ink-dark);
  background: var(--paper);
  border: 1px solid var(--control-border);
  border-radius: 8px;
}
input:focus { outline: 3px solid var(--focus-ring); border-color: var(--fft-blue); }

button, .button {
  display: inline-block;
  padding: .78rem 1.35rem;
  color: #fff;
  background: var(--button-pink);
  border: 0;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}
button:hover, .button:hover { color: #fff; background: var(--button-pink-hover); text-decoration: none; }
button:disabled { cursor: not-allowed; opacity: .45; }
.button-wide { width: 100%; margin-top: 1.5rem; }
.button-secondary { color: #fff; background: var(--button-blue); }
.button-secondary:hover { background: var(--button-blue-hover); }
.notice { padding: .85rem 1rem; border-left: 5px solid var(--fft-pink); border-radius: 5px; color: var(--danger); background: var(--pink-wash); font-size: .92rem; }
.notice.success { border-color: var(--fft-green); color: var(--success-text); background: var(--green-wash); }
.fine-print { margin-top: 1.5rem; font-size: .84rem; }

.topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar-inner { height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 1rem; }
.nav-email { color: var(--muted); font-size: .9rem; }
a.nav-email { text-decoration: none; }
a.nav-email:hover { color: var(--link-color); text-decoration: underline; }
.logout { padding: .55rem 1rem; color: var(--fft-pink); background: var(--paper); border: 2px solid var(--fft-pink); }
.logout:hover { color: #fff; background: var(--button-pink); }
.page { padding: 3rem 0 5rem; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.page-header p { max-width: 620px; margin-bottom: 0; }
.page-header > a { font-weight: 700; }
.panel { padding: 1.6rem; margin-bottom: 1.3rem; }
.panel:nth-of-type(3n+1) { border-top: 6px solid var(--highlight-1); }
.panel:nth-of-type(3n+2) { border-top: 6px solid var(--highlight-2); }
.panel:nth-of-type(3n+3) { border-top: 6px solid var(--highlight-3); }
html[data-site-theme="archi"] .panel:nth-of-type(4n+1) { border-top-color: var(--highlight-1); }
html[data-site-theme="archi"] .panel:nth-of-type(4n+2) { border-top-color: var(--highlight-2); }
html[data-site-theme="archi"] .panel:nth-of-type(4n+3) { border-top-color: var(--highlight-3); }
html[data-site-theme="archi"] .panel:nth-of-type(4n+4) { border-top-color: var(--highlight-4); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-title h2 { margin: 0; }
.panel-intro { margin: .35rem 0 0; }
.publishing-secret-content { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.publishing-secret-content h3 { margin: 0; font-size: 1.2rem; }
.guid-value { color: var(--fft-deep-pink); font: 700 1.1rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; word-break: break-all; }
.guid-meta { color: var(--muted); font-size: .86rem; }
.guid-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.impersonation-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -1rem 0 1.3rem; padding: 1rem 1.2rem; color: var(--warning-strong-text); background: var(--warning-wash); border: 1px solid var(--warning-border); border-radius: 14px; }
.impersonation-banner div { display: grid; gap: .15rem; }
.impersonation-banner strong { color: var(--ink-dark); }
.impersonation-banner span { font-size: .88rem; }
.impersonation-banner form { margin: 0; }
.impersonation-banner button { padding: .55rem .8rem; color: var(--warning-strong-text); background: var(--paper); border: 1px solid var(--warning-border); border-radius: 8px; font-size: .82rem; white-space: nowrap; }
.impersonate-form { display: grid; grid-template-columns: auto minmax(16rem, 1fr) auto; align-items: center; gap: .75rem; margin-top: 1.2rem; }
.impersonate-form label { color: var(--muted); font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.impersonate-form select { min-width: 0; padding: .65rem .75rem; color: var(--ink-dark); background: var(--paper); border: 1px solid var(--control-accent-border); border-radius: 8px; }
.impersonate-form button { white-space: nowrap; }
.denied-page { max-width: 850px; }
.denied-panel h1 { max-width: 18ch; }
.admin-contact-list { display: grid; gap: .5rem; margin: 1rem 0 1.5rem; padding-left: 1.25rem; }
.admin-contact-list a { font-weight: 700; }
.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.data-table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .92rem; }
.data-table th, .data-table td { padding: .85rem .65rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: middle; }
.data-table th { color: var(--ink); background: var(--blue-wash); font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.status { font-weight: 800; }
.deployment-status, .storage-status { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .28rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.status-success, .storage-live { color: var(--success-text); background: var(--green-wash); }
.status-failed, .storage-deleted { color: var(--failed-text); background: var(--pink-wash); }
.storage-archived { color: var(--archive-text); background: var(--archive-wash); }
.storage-cell { display: flex; align-items: center; gap: .45rem; }
.storage-cell form { margin: 0; }
.release-cell, .current-release-row { display: flex; align-items: center; gap: .55rem; }
.release-cell > span { max-width: 32rem; overflow-wrap: anywhere; }
.release-download { display: inline-grid; flex: 0 0 auto; place-items: center; width: 1.9rem; height: 1.9rem; color: var(--fft-blue-dark); background: var(--paper); border: 1px solid #9dcfe6; border-radius: 50%; }
.release-download:hover { color: #fff; background: var(--fft-blue-dark); text-decoration: none; }
.release-download svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deployment-delete { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; color: var(--danger); background: var(--paper); border: 1px solid #d9a2b9; border-radius: 50%; font-size: 1.2rem; line-height: 1; }
.deployment-delete:hover { color: #fff; background: var(--danger-action); }
.role-form { display: flex; align-items: center; gap: .45rem; }
.role-form select { width: 8rem; min-width: 0; padding: .5rem .65rem; color: var(--ink-dark); background: var(--paper); border: 1px solid var(--control-border); border-radius: 8px; }
.users td:last-child { min-width: 17rem; white-space: normal; }
.user-actions { display: grid; gap: .55rem; width: min(100%, 18rem); }
.user-actions button { width: auto; padding: .5rem .75rem; border-radius: 8px; font-size: .8rem; line-height: 1.2; white-space: nowrap; }
.user-action-primary { background: var(--button-pink); }
.user-action-primary:hover { background: var(--button-pink-hover); }
.user-action-links { display: flex; align-items: center; gap: .35rem; }
.user-action-links form { margin: 0; }
.user-action-secondary { color: var(--fft-blue-dark); background: var(--paper); border: 1px solid #9dcfe6; }
.user-action-secondary:hover { color: #fff; background: var(--fft-blue-dark); }
.user-action-danger { color: var(--danger); background: var(--paper); border: 1px solid #d9a2b9; }
.user-action-danger:hover { color: #fff; background: var(--danger-action); }
.no-user-actions { color: var(--muted); font-size: .85rem; }
.button-danger { color: #fff; background: var(--danger-action); }
.button-danger:hover { background: var(--danger-hover); }
.role-badge, .current-user, .impersonated-user { display: inline-block; border-radius: 999px; font-size: .75rem; font-weight: 800; text-transform: capitalize; }
.role-badge { padding: .28rem .62rem; white-space: nowrap; }
.role-admin { color: var(--failed-text); background: var(--pink-wash); }
.role-publisher { color: var(--warning-text); background: var(--warning-wash); }
.role-viewer { color: var(--info-text); background: var(--blue-wash); }
.current-user, .impersonated-user { margin-left: .5rem; padding: .2rem .5rem; }
.current-user { color: var(--success-text); background: var(--green-wash); }
.impersonated-user { color: var(--warning-text); background: var(--warning-wash); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.empty { padding: 1rem 0; color: var(--muted); }
.page-header-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem; font-weight: 700; }
.usage-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: -1rem 0 1.5rem; }
.period-filter { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.period-filter span, .usage-user-filter label { color: var(--muted); font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.period-filter a { padding: .45rem .8rem; border: 1px solid var(--control-accent-border); border-radius: 999px; background: var(--paper); font-size: .86rem; font-weight: 700; }
.period-filter a[aria-current="page"] { color: #fff; background: var(--fft-blue-dark); border-color: var(--fft-blue-dark); }
.period-filter .period-refresh { display: inline-flex; width: 2.1rem; height: 2.1rem; padding: .45rem; align-items: center; justify-content: center; border-radius: 50%; }
.period-refresh svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.usage-user-filter { display: flex; align-items: center; gap: .55rem; }
.usage-user-filter label { display: flex; align-items: center; align-self: stretch; }
.usage-user-filter select { min-width: 14rem; padding: .48rem .65rem; color: var(--ink-dark); background: var(--paper); border: 1px solid var(--control-accent-border); border-radius: 8px; }
.usage-user-filter button { padding: .48rem .8rem; color: #fff; background: var(--fft-blue-dark); border: 1px solid var(--fft-blue-dark); border-radius: 8px; cursor: pointer; font-weight: 700; }
.usage-disabled code { color: inherit; }
.usage-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.usage-summary article { padding: 1.25rem; background: var(--paper); border: 1px solid var(--shadow-soft); border-radius: 16px; box-shadow: 0 10px 30px var(--shadow-subtle); }
.usage-summary article:nth-child(4n+1) { border-top: 5px solid var(--highlight-1); }
.usage-summary article:nth-child(4n+2) { border-top: 5px solid var(--highlight-2); }
.usage-summary article:nth-child(4n+3) { border-top: 5px solid var(--highlight-3); }
.usage-summary article:nth-child(4n+4) { border-top: 5px solid var(--highlight-4); }
.usage-summary span { display: block; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.usage-summary strong { display: block; margin-top: .35rem; color: var(--ink-dark); font-size: 2rem; }
.usage-table td { vertical-align: top; }
.usage-table td small { display: block; margin-top: .2rem; color: var(--muted); }
.usage-table details { min-width: 15rem; }
.usage-table summary { color: var(--link-color); cursor: pointer; font-weight: 700; }
.breakdown-table { width: 100%; margin-top: .65rem; border-collapse: collapse; font-size: .78rem; }
.breakdown-table th, .breakdown-table td { padding: .45rem; border-bottom: 1px solid var(--line); text-align: left; }
.breakdown-table th { color: var(--muted); background: var(--wash); text-transform: uppercase; }
.usage-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1rem; font-size: .9rem; font-weight: 700; }
.usage-pagination a:last-child { text-align: right; }

.admin-tabs {
  display: flex;
  align-items: stretch;
  gap: .25rem;
  margin: -1rem 0 1.5rem;
  padding: .3rem;
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px var(--shadow-subtle);
  scrollbar-width: thin;
}
.admin-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .65rem 1rem;
  color: var(--muted);
  border-radius: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.admin-tabs a:hover { color: var(--fft-deep-pink); background: var(--pink-wash); text-decoration: none; }
.admin-tabs a[aria-current="page"] { color: #fff; background: var(--button-pink-hover); }
.admin-tabs + .impersonation-banner { margin-top: 0; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.admin-overview-grid article { display: flex; min-width: 0; min-height: 10rem; padding: 1.25rem; flex-direction: column; align-items: flex-start; background: var(--paper); border: 1px solid var(--shadow-soft); border-top: 5px solid var(--highlight-2); border-radius: 16px; box-shadow: 0 10px 30px var(--shadow-subtle); }
.admin-overview-grid article:nth-child(4n+1) { border-top-color: var(--highlight-1); }
.admin-overview-grid article:nth-child(4n+2) { border-top-color: var(--highlight-2); }
.admin-overview-grid article:nth-child(4n+3) { border-top-color: var(--highlight-3); }
.admin-overview-grid article:nth-child(4n+4) { border-top-color: var(--highlight-4); }
.admin-overview-grid span { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.admin-overview-grid strong { display: block; max-width: 100%; margin-top: .45rem; color: var(--ink-dark); font-size: 1.7rem; line-height: 1.15; }
.admin-overview-grid small { color: var(--muted); }
.admin-overview-grid a { margin-top: auto; padding-top: 1rem; font-weight: 800; }
.admin-overview-grid .overview-release { overflow-wrap: anywhere; font-size: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.current-release-row { margin-top: 1.2rem; }
.current-release-id { margin: 0; color: var(--ink-dark); overflow-wrap: anywhere; }
.current-release-id code { font-size: 1rem; font-weight: 700; }

@media (max-width: 800px) {
  .page-header { display: block; }
  .page-header > a { display: inline-block; margin-top: 1rem; }
  .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .auth-shell { padding: 1rem; }
  .auth-card { padding: 1.6rem; }
  .email-field span { padding: 0 .65rem; font-size: .88rem; }
  .page { padding-top: 2rem; }
  .page-header { display: block; }
  .page-header-links { justify-content: flex-start; margin-top: 1rem; }
  .admin-tabs { margin: -.5rem -1rem 1.3rem; padding: .3rem 1rem; border-right: 0; border-left: 0; border-radius: 0; scroll-snap-type: x proximity; }
  .admin-tabs a { flex: 0 0 auto; scroll-snap-align: start; }
  .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .admin-overview-grid article { min-height: 9rem; padding: 1rem; }
  .admin-overview-grid strong { font-size: 1.45rem; }
  .admin-overview-grid .overview-release { font-size: .82rem; }
  .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-filters { align-items: stretch; }
  .period-filter { width: calc(100% + 2rem); margin-inline: -1rem; padding: 0 1rem .45rem; flex-wrap: nowrap; overflow-x: auto; }
  .period-filter > * { flex: 0 0 auto; }
  .usage-user-filter { width: 100%; flex-wrap: wrap; }
  .usage-user-filter select { flex: 1; min-width: 10rem; }
  .guid-actions { display: grid; grid-template-columns: 1fr; }
  .guid-actions form, .guid-actions button { width: 100%; }
  .impersonation-banner { align-items: flex-start; flex-direction: column; }
  .impersonate-form { grid-template-columns: 1fr; }
  .impersonate-form button { width: 100%; }
  .nav-email { display: none; }
  .panel-title { align-items: flex-start; flex-direction: column; }
  .deployments { font-size: .82rem; }
}

.login-form{max-width:340px;margin-top:1.4rem}.login-form .button-wide{width:100%}.login-form .email-field{width:100%}
.code-login { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.code-login summary { color: var(--muted); cursor: pointer; font-size: .86rem; }
.code-login[open] summary { margin-bottom: 1rem; }
.code-form { margin-top: 1rem; }
.code-form > label, .code-fieldset legend { color: var(--muted); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.code-form .email-field { margin-top: .45rem; }
.code-fieldset { margin: 1rem 0 0; padding: 0; border: 0; }
.code-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; margin-top: .55rem; }
.code-inputs input { padding: .7rem .2rem; text-align: center; font-size: 1.35rem; font-weight: 800; }
.resend-form { margin-top: 1.2rem; }
.resend-form button { width: 100%; font-size: .88rem; }
.subtle-link { display: block; margin-top: 1rem; color: var(--muted); font-size: .84rem; text-align: center; }

/* Administrator login UI customisation */
.customise-page [hidden] { display: none !important; }
.customise-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 24rem); align-items: end; gap: 1.5rem; }
.customise-toolbar h2, .customise-reset-panel h2 { margin: 0; }
.customise-toolbar label { margin: 0 0 .45rem; }
.customise-toolbar select { width: 100%; padding: .75rem .9rem; color: var(--ink-dark); background: var(--paper); border: 1px solid var(--control-accent-border); border-radius: 8px; }
.customise-workspace { position: relative; min-height: 42rem; padding: 1.5rem; overflow: hidden; background: rgba(255,255,255,.48); border: 1px solid var(--line); border-radius: 20px; }
.customise-preview { display: grid; place-items: start center; }
.customise-preview-state { width: 100%; }
.customise-preview-label { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1rem; color: var(--muted); font-size: .85rem; }
.customise-preview-label strong { color: var(--ink-dark); }
.customise-preview .auth-card { margin: 0 auto; }
.customise-preview .auth-card h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.admin-header-preview { width: 100%; overflow: visible; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(52,52,52,.08); }
.admin-header-preview .topbar-inner { min-height: 6.4rem; padding: 0 1.5rem; }
.admin-header-preview .topbar-logo > .customise-logo-target { display: inline-flex; align-items: center; }
.admin-header-preview .customise-logo-badge { right: -.4rem; bottom: -.7rem; padding: .28rem .45rem; border-left: 0; }
.admin-header-preview .nav-actions { pointer-events: none; }
.preview-form { pointer-events: auto; }
.preview-form input { cursor: default; }
.customise-target { position: relative; border-radius: 5px; cursor: pointer; transition: box-shadow .15s ease, background .15s ease; }
.customise-target:hover, .customise-target:focus-visible, .customise-target.is-selected { background: rgba(45,170,225,.10); box-shadow: 0 0 0 2px var(--fft-blue); outline: 0; }
.customise-target:empty { min-width: 3rem; min-height: 1.4em; display: inline-block; }
.customise-target:empty::after { content: "Empty text"; color: var(--muted); font-size: .75rem; font-style: italic; }
button.customise-target { transition: box-shadow .15s ease, filter .15s ease; }
button.customise-target:hover, button.customise-target:focus-visible, button.customise-target.is-selected { color: #fff; background: var(--button-pink); box-shadow: 0 0 0 4px rgba(45,170,225,.55); }
.customise-locked { display: inline; padding: 0 .12rem; color: var(--ink-dark); text-decoration: underline dotted; text-underline-offset: .2rem; }
.customise-logo-target { position: relative; display: inline-block; width: auto; max-width: 100%; height: auto; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 5px; line-height: 0; text-align: left; }
.customise-logo-target:hover, .customise-logo-target:focus-visible, .customise-logo-target.is-selected { background: transparent; box-shadow: 0 0 0 3px var(--fft-blue); outline: 0; }
.customise-logo-badge { position: absolute; right: -.55rem; bottom: -.55rem; padding: .28rem .45rem; color: #fff; background: var(--fft-blue-dark); border-radius: 999px; font-size: .65rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.customise-preview summary.customise-target { display: list-item; }
.customise-preview .resend-form button span.customise-target { display: inline; }
.customise-reset-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.3rem; }
.customise-reset-panel form { flex: 0 0 auto; }
.customise-editor { position: fixed; z-index: 20; top: 6rem; right: 1.25rem; width: min(25rem, calc(100vw - 2.5rem)); max-height: calc(100vh - 7.25rem); padding: 1.25rem; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--fft-blue); border-radius: 16px; box-shadow: 0 24px 70px rgba(52,52,52,.24); }
.customise-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.customise-editor-header .eyebrow { margin: 0 0 .35rem; }
.customise-editor-header h2 { margin: 0; font-size: 1.25rem; }
.customise-editor-close { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 50%; font-size: 1.35rem; line-height: 1; }
.customise-editor-close:hover { color: #fff; background: var(--danger-action); }
.customise-editor form { margin-top: 1rem; }
.customise-editor textarea { width: 100%; padding: .8rem; resize: vertical; color: var(--ink-dark); border: 1px solid var(--control-border); border-radius: 8px; font: inherit; }
.customise-editor textarea:focus { outline: 3px solid var(--focus-ring); border-color: var(--fft-blue); }
.customise-editor form > button { width: 100%; margin-top: .9rem; }
.customise-default { margin: .65rem 0 0; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.customise-logo-form input[type="file"] { padding: .7rem; }
.email-preview-card { width: min(680px, 100%); max-width: 680px; padding: 0; overflow: hidden; background: #f3f4f6; border-radius: 10px; }
.email-preview-meta { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: baseline; padding: .85rem 1.1rem; color: var(--muted); background: var(--paper); border-bottom: 1px solid var(--line); font-size: .85rem; }
.email-preview-meta strong { color: var(--ink-dark); font-size: .95rem; }
.email-preview-body { max-width: 560px; margin: 1.4rem auto; padding: 24px; color: #343434; background: var(--paper); font-family: Arial, sans-serif; box-shadow: 0 4px 18px rgba(52,52,52,.09); }
.email-preview-body h1 { margin: 0 0 1rem; font-size: 24px; }
.email-preview-button { display: inline-block; width: auto; padding: 12px 18px; color: #fff; background: #e6007e; border: 0; border-radius: 24px; }
.email-preview-code-label { margin: 24px 0 0; color: #667085; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.email-preview-code { margin-top: 4px; font-size: 32px; font-weight: 700; letter-spacing: .22em; }
.email-preview-code .customise-locked { text-decoration: none; }
.email-preview-footer { color: #667085; font-size: 13px; }

@media (max-width: 650px) {
  .customise-toolbar { grid-template-columns: 1fr; gap: 1rem; }
  .customise-workspace { min-height: 38rem; margin-inline: -1rem; padding: 1rem; border-right: 0; border-left: 0; border-radius: 0; }
  .customise-preview .auth-card { padding: 1.35rem; }
  .customise-reset-panel { align-items: stretch; flex-direction: column; }
  .customise-reset-panel button { width: 100%; }
  .customise-editor { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 78vh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 18px 18px 0 0; }
  .customise-editor-open { padding-bottom: 16rem; }
}

/* Site settings */
.site-address-copy { display: flex; align-items: stretch; gap: .75rem; margin-top: 1.25rem; }
.site-address-copy code { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; padding: .8rem 1rem; overflow-wrap: anywhere; color: var(--ink-dark); background: var(--blue-wash); border: 1px solid var(--blue-border); border-radius: 8px; font-size: .94rem; }
.site-address-copy button { flex: 0 0 auto; }
.site-address-details { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.25rem 0 0; }
.site-address-details div { display: grid; gap: .2rem; }
.site-address-details dt { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.site-address-details dd { margin: 0; color: var(--ink-dark); font-weight: 700; }
.site-address-setting .fine-print { margin-bottom: 0; }
@media (max-width: 650px) { .site-address-copy { align-items: stretch; flex-direction: column; } .site-address-copy button { width: 100%; } }
.auth-method-setting form, .analytics-setting form { margin-top: 1.25rem; }
.auth-method-options { display: grid; gap: .75rem; margin: 0; padding: 0; border: 0; }
.auth-method-options legend { margin-bottom: .7rem; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.auth-method-options label { display: flex; align-items: flex-start; gap: .8rem; margin: 0; padding: 1rem; background: var(--blue-wash); border: 1px solid var(--blue-border); border-radius: 10px; cursor: pointer; }
.auth-method-options input { width: 1.2rem; height: 1.2rem; margin-top: .12rem; accent-color: var(--fft-blue); }
.auth-method-options span { display: grid; gap: .2rem; }
.auth-method-options strong { color: var(--ink-dark); }
.auth-method-options small { color: var(--muted); font-size: .88rem; font-weight: 400; }
.auth-method-options:disabled label { cursor: default; opacity: .82; }
.auth-method-setting button { margin-top: 1rem; }
.auth-settings-history td:nth-child(2), .auth-settings-history td:nth-child(3) { white-space: normal; }
.settings-domain-form { max-width: 34rem; margin-top: 1.25rem; }
.settings-domain-form label { margin-top: 0; }
.domain-setting-field { display: flex; align-items: stretch; }
.domain-setting-field > span { display: grid; place-items: center; padding: 0 .85rem; color: var(--ink-dark); background: var(--blue-wash); border: 1px solid var(--control-accent-border); border-right: 0; border-radius: 8px 0 0 8px; font-weight: 800; }
.domain-setting-field input { border-radius: 0 8px 8px 0; }
.settings-domain-form button { margin-top: 1rem; }
.settings-current-domain { display: grid; gap: .25rem; margin: 1.25rem 0 0; }
.settings-current-domain span { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.settings-current-domain strong { color: var(--ink-dark); font-size: 1.4rem; }
.settings-history td:nth-child(2), .settings-history td:nth-child(3) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.email-field select { min-width: 9rem; max-width: 15rem; padding: .75rem .8rem; color: var(--ink-dark); background: var(--blue-wash); border: 1px solid var(--control-accent-border); border-radius: 0 8px 8px 0; font: inherit; font-weight: 700; }
.email-field select:focus { outline: 3px solid var(--focus-ring); border-color: var(--fft-blue); }
.domain-card-list { display: grid; gap: .75rem; margin-top: 1.25rem; }
.domain-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--blue-wash); border: 1px solid var(--blue-border); border-radius: 10px; }
.domain-card > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.domain-card strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.domain-actions { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.domain-actions form { margin: 0; }
.domain-actions summary { color: var(--danger); cursor: pointer; font-weight: 700; }
.domain-retire-form { width: min(25rem, 70vw); margin-top: .8rem; padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.domain-retire-form label { margin-top: .7rem; }
.domain-retire-form select { width: 100%; padding: .75rem; border: 1px solid var(--control-border); border-radius: 8px; }
.domain-retire-form button { margin-top: 1rem; }
@media (max-width: 650px) { .email-field select { min-width: 7rem; max-width: 11rem; font-size: .82rem; } .domain-card { flex-direction: column; } .domain-actions { justify-content: flex-start; } }

/* Self-service site domain migration */
.status-pending { color: var(--warning-text); background: var(--warning-wash); }
.status-danger { color: var(--failed-text); background: var(--pink-wash); }
.domain-waiting { color: var(--warning-text); background: var(--warning-wash); border-color: var(--warning-border); }
.storage-empty { color: var(--muted); background: var(--blue-wash); }
.domain-steps { display: grid; gap: .6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.domain-step { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; background: var(--blue-wash); border: 1px solid var(--blue-border); border-radius: 10px; }
.domain-step > div { display: grid; gap: .2rem; }
.domain-step strong { color: var(--ink-dark); }
.domain-step p { margin: 0; }
.site-domain-form select, .site-domain-form input { width: 100%; padding: .75rem; border: 1px solid var(--control-border); border-radius: 8px; font: inherit; }
.site-domain-form input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.site-domain-name-field { display: flex; align-items: stretch; }
.site-domain-name-field input { min-width: 0; border-radius: 8px 0 0 8px; }
.site-domain-name-field > span { display: grid; place-items: center; flex: 0 0 auto; padding: 0 .85rem; color: var(--ink-dark); background: var(--blue-wash); border: 1px solid var(--control-border); border-left: 0; border-radius: 0 8px 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; white-space: nowrap; }
.site-domain-form code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.domain-migration-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .9rem; margin-top: 1.25rem; }
.domain-migration-actions form { margin: 0; }
.domain-migration-actions summary { cursor: pointer; font-weight: 700; }
.domain-commit summary { color: var(--danger); }
.domain-commit-progress { margin-top: 1rem; color: var(--warning-text); background: var(--warning-wash); border-color: var(--warning-border); }
.domain-commit-progress::before { content: ""; display: inline-block; width: .85rem; height: .85rem; margin-right: .55rem; vertical-align: -.08rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: domain-commit-spin .75s linear infinite; }
.domain-commit-progress.domain-commit-error { color: var(--danger); background: var(--pink-wash); border-color: var(--fft-pink); }
.domain-commit-progress.domain-commit-error::before { display: none; }
@keyframes domain-commit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .domain-commit-progress::before { animation: none; border-right-color: currentColor; } }
.domain-acknowledge { display: flex; align-items: flex-start; gap: .6rem; margin-top: .9rem; }
.domain-acknowledge input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--fft-blue); }
.domain-acknowledge span { color: var(--muted); font-size: .88rem; }
.domain-acknowledge code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.domain-history-title { margin: 1.6rem 0 0; font-size: 1rem; }
.domain-migration-history td:nth-child(3) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.domain-migration-history td:nth-child(4), .domain-migration-history td:nth-child(5) { white-space: normal; }
@media (max-width: 650px) { .domain-step { flex-direction: column; } }

/* Live release content browser */
.content-page { width: min(100% - 2rem, 1500px); }
.public-content-notice { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1rem; padding: .8rem 1rem; color: var(--success-text); background: var(--green-wash); border: 1px solid var(--fft-green); border-radius: 10px; font-size: .9rem; }
.public-content-notice strong { flex: 0 0 auto; }
.public-content-notice code { color: inherit; font-weight: 800; }
.content-browser {
  --content-tree-width: 320px;
  display: grid;
  grid-template-columns: minmax(220px, var(--content-tree-width)) 10px minmax(360px, 1fr);
  min-height: 620px;
  height: min(72vh, 820px);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--shadow-soft);
  border-radius: 18px;
  box-shadow: 0 18px 50px var(--shadow-soft);
}
.content-tree-pane { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); }
.content-tree-header { display: grid; gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.content-tree-header > div { display: grid; min-width: 0; gap: .2rem; }
.content-tree-header strong { color: var(--ink-dark); }
.content-tree-header code { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.content-tree-search { margin: 0; }
.content-tree-search input { padding: .62rem .75rem; font-size: .88rem; }
.content-tree { min-height: 0; padding: .55rem; overflow: auto; }
.content-tree ul { margin: 0; padding: 0 0 0 1rem; list-style: none; }
.content-tree > ul { padding-left: 0; }
.content-tree-item[hidden] { display: none; }
.content-tree button {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: .42rem;
  padding: .42rem .5rem;
  color: var(--ink);
  background: transparent;
  border-radius: 7px;
  font-size: .84rem;
  font-weight: 650;
  text-align: left;
}
.content-tree button:hover { color: var(--ink-dark); background: var(--blue-wash); }
.content-tree button:focus-visible { outline-offset: 0; }
.content-tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-tree-folder.is-public-root { color: var(--success-text); background: var(--green-wash); }
.content-tree-folder.is-public-root:hover { color: var(--success-text); background: var(--green-wash); }
.content-public-badge { flex: 0 0 auto; margin-left: auto; padding: .12rem .42rem; color: var(--success-text); background: var(--paper); border: 1px solid var(--fft-green); border-radius: 999px; font-size: .65rem; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.content-tree-file.is-active { color: #fff; background: var(--fft-blue-dark); }
.content-tree-file.is-active:hover { color: #fff; background: var(--fft-blue-dark); }
.tree-chevron { width: 0; height: 0; flex: 0 0 auto; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid currentColor; transition: transform .12s ease; }
.content-tree-folder[aria-expanded="true"] .tree-chevron { transform: rotate(90deg); }
.tree-folder-icon { position: relative; width: 14px; height: 10px; flex: 0 0 auto; background: #f1bd39; border-radius: 2px; }
.tree-folder-icon::before { position: absolute; top: -3px; left: 1px; width: 7px; height: 4px; content: ""; background: #f1bd39; border-radius: 2px 2px 0 0; }
.tree-file-icon { position: relative; width: 11px; height: 14px; margin-left: 12px; flex: 0 0 auto; background: var(--paper); border: 1px solid #8aa8b8; border-radius: 1px; }
.tree-file-icon::after { position: absolute; right: 1px; bottom: 3px; left: 1px; height: 1px; content: ""; background: #8aa8b8; box-shadow: 0 -3px #8aa8b8; }
.content-tree-file.is-active .tree-file-icon { background: transparent; border-color: #fff; }
.content-tree-file.is-active .tree-file-icon::after { background: #fff; box-shadow: 0 -3px #fff; }
.content-filter-empty { margin: 0; padding: 1rem; border-top: 1px solid var(--line); font-size: .86rem; }
.content-resizer { position: relative; z-index: 1; cursor: col-resize; background: var(--wash); touch-action: none; }
.content-resizer::after { position: absolute; top: 50%; left: 50%; width: 3px; height: 46px; content: ""; background: #b8b8b8; border-radius: 4px; transform: translate(-50%, -50%); }
.content-resizer:hover, .content-resizer.is-dragging, .content-resizer:focus-visible { background: var(--blue-wash); outline: 0; }
.content-resizer:hover::after, .content-resizer.is-dragging::after, .content-resizer:focus-visible::after { background: var(--fft-blue-dark); }
.content-viewer { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--viewer-surface); }
.content-viewer-header { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.content-file-heading { display: grid; min-width: 0; gap: .12rem; }
.content-file-heading strong { color: var(--ink-dark); font-size: 1.05rem; }
.content-file-heading span { color: var(--muted); font-size: .76rem; }
.content-file-heading .content-access-badge { width: fit-content; padding: .14rem .46rem; border: 1px solid currentColor; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.content-access-badge.is-public { color: var(--success-text); background: var(--green-wash); }
.content-access-badge.is-protected { color: var(--info-text); background: var(--blue-wash); }
.content-file-heading code { overflow: hidden; color: var(--link-color); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.content-file-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.content-file-actions .button { padding: .48rem .72rem; border-radius: 8px; font-size: .76rem; }
.content-file-actions a[aria-disabled="true"] { pointer-events: none; opacity: .45; }
.content-viewer-options { padding: .48rem 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.content-viewer-options label { display: inline-flex; align-items: center; gap: .42rem; margin: 0; color: var(--muted); font-size: .78rem; }
.content-viewer-options input { width: auto; margin: 0; }
.content-viewer-body { position: relative; min-width: 0; min-height: 0; flex: 1; overflow: auto; }
.content-viewer-message { margin: 0; padding: 1.4rem; }
.content-viewer-body pre[class*="language-"] { min-height: 100%; margin: 0; padding-top: 1.25rem; padding-bottom: 1.25rem; border-radius: 0; font-size: .82rem; line-height: 1.55; }
.content-viewer-body pre.wrap-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.content-viewer-body pre.wrap-lines code { white-space: inherit; }
.content-image-preview { display: grid; min-height: 100%; place-items: center; padding: 2rem; background-image: linear-gradient(45deg,#edf0f2 25%,transparent 25%),linear-gradient(-45deg,#edf0f2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf0f2 75%),linear-gradient(-45deg,transparent 75%,#edf0f2 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
.content-image-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(52,52,52,.16)); }

@media (max-width: 1000px) {
  .content-viewer-header { align-items: flex-start; flex-direction: column; }
  .content-file-actions { justify-content: flex-start; }
}
@media (max-width: 800px) {
  .content-page { width: min(100% - 2rem, 1120px); }
  .content-browser { display: grid; height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(260px, 38vh) minmax(460px, 65vh); }
  .content-tree-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .content-resizer { display: none; }
  .content-viewer-header { min-height: 0; }
}
@media (max-width: 520px) {
  .content-file-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .content-file-actions .button { width: 100%; }
  .content-file-actions [data-open-live] { grid-column: 1 / -1; }
}


/* Administration colour theme */
.theme-control {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.theme-control select {
  width: auto;
  min-width: 6.2rem;
  padding: .48rem 1.8rem .48rem .65rem;
  color: var(--ink-dark);
  background-color: var(--paper);
  border: 1px solid var(--control-accent-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
}

.colour-theme-panel form { margin-top: 1.2rem; }
.colour-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1rem; padding: 0; border: 0; }
.colour-theme-option { margin: 0; cursor: pointer; }
.colour-theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.colour-theme-choice { display: grid; height: 100%; gap: .75rem; padding: 1rem; background: var(--wash); border: 2px solid transparent; border-radius: 14px; }
.colour-theme-option input:checked + .colour-theme-choice { border-color: var(--highlight-1); box-shadow: 0 0 0 3px var(--highlight-1-wash); }
.colour-theme-option input:focus-visible + .colour-theme-choice { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.colour-theme-swatches { display: flex; overflow: hidden; height: 2rem; border-radius: 999px; }
.colour-theme-swatches i { min-width: 0; flex: 1; }
[data-colour-theme-option="fft"] .colour-theme-swatches i:nth-child(1) { background: #e6007e; }
[data-colour-theme-option="fft"] .colour-theme-swatches i:nth-child(2) { background: #2daae1; }
[data-colour-theme-option="fft"] .colour-theme-swatches i:nth-child(3) { background: #96c11f; }
[data-colour-theme-option="archi"] .colour-theme-swatches i:nth-child(1) { background: #2c9cdb; }
[data-colour-theme-option="archi"] .colour-theme-swatches i:nth-child(2) { background: #f2994a; }
[data-colour-theme-option="archi"] .colour-theme-swatches i:nth-child(3) { background: #27ae60; }
[data-colour-theme-option="archi"] .colour-theme-swatches i:nth-child(4) { background: #eb5757; }
.colour-theme-panel button { width: auto; }

.preview-force-light {
  --highlight-1: #e6007e;
  --highlight-2: #2daae1;
  --highlight-3: #96c11f;
  --highlight-4: #e6007e;
  --highlight-1-dark: #bb2172;
  --highlight-2-dark: #187fae;
  --highlight-3-dark: #5f7d13;
  --highlight-4-dark: #bb2172;
  --highlight-1-wash: #fff1f9;
  --highlight-2-wash: #e2eff8;
  --highlight-3-wash: #e0ebde;
  --highlight-4-wash: #fff1f9;
  --fft-pink: var(--highlight-1);
  --fft-deep-pink: var(--highlight-1-dark);
  --fft-blue: var(--highlight-2);
  --fft-blue-dark: var(--highlight-2-dark);
  --fft-green: var(--highlight-3);
  --link-color: #2daae1;
  --button-pink: #e6007e;
  --button-pink-hover: #bb2172;
  --button-blue: #187fae;
  --button-blue-hover: #126b91;
  --ink: #535353;
  --ink-dark: #343434;
  --muted: #747474;
  --line: #e5e5e5;
  --paper: #ffffff;
  --wash: #f3f3f3;
  --pink-wash: #fff1f9;
  --blue-wash: #e2eff8;
  --green-wash: #e0ebde;
  --danger: #a81955;
  --danger-action: #a81955;
  --danger-hover: #7f103e;
  --success-text: #315d17;
  --failed-text: #8b1450;
  --warning-text: #5b3d09;
  --warning-strong-text: #533300;
  --warning-wash: #fff1c7;
  --warning-border: #ebc869;
  --archive-text: #86520b;
  --archive-wash: #fff1d6;
  --info-text: #175f80;
  --control-border: #cfcfcf;
  --control-accent-border: #b9d8eb;
  --blue-border: #cce4f1;
  --viewer-surface: #fbfcfd;
  --shadow-soft: rgba(83, 83, 83, .10);
  --shadow-subtle: rgba(83, 83, 83, .08);
  --focus-ring: rgba(45, 170, 225, .34);
  color: var(--ink);
  color-scheme: light;
}

html[data-site-theme="archi"] .preview-force-light {
  --highlight-1: #2c9cdb;
  --highlight-2: #f2994a;
  --highlight-3: #27ae60;
  --highlight-4: #eb5757;
  --highlight-1-dark: #1c78ad;
  --highlight-2-dark: #b75e12;
  --highlight-3-dark: #187640;
  --highlight-4-dark: #b52e2e;
  --highlight-1-wash: #e6f4fc;
  --highlight-2-wash: #fff1e5;
  --highlight-3-wash: #e5f6ec;
  --highlight-4-wash: #fdeaea;
  --fft-pink: var(--highlight-1);
  --fft-deep-pink: var(--highlight-1-dark);
  --fft-blue: var(--highlight-2);
  --fft-blue-dark: var(--highlight-2-dark);
  --fft-green: var(--highlight-3);
  --link-color: var(--highlight-1-dark);
  --button-pink: var(--highlight-1);
  --button-pink-hover: var(--highlight-1-dark);
  --button-blue: var(--highlight-2-dark);
  --button-blue-hover: #91490d;
  --pink-wash: var(--highlight-4-wash);
  --blue-wash: var(--highlight-1-wash);
  --green-wash: var(--highlight-3-wash);
  --focus-ring: rgba(44, 156, 219, .38);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 12%, rgba(230, 0, 126, .10), transparent 27rem),
    radial-gradient(circle at 88% 88%, rgba(45, 170, 225, .10), transparent 30rem),
    var(--wash);
}
html[data-theme="dark"] .logout { color: #ff83c1; border-color: #d83b8d; }
html[data-theme="dark"] .logout:hover { color: #fff; }
html[data-theme="dark"] .release-download,
html[data-theme="dark"] .user-action-secondary { color: #69cdf5; border-color: #477a91; }
html[data-theme="dark"] .release-download:hover,
html[data-theme="dark"] .user-action-secondary:hover { color: #fff; }
html[data-theme="dark"] .deployment-delete,
html[data-theme="dark"] .user-action-danger { border-color: #8a4963; }
html[data-theme="dark"] .impersonation-banner button { color: var(--warning-strong-text); }
html[data-theme="dark"] .customise-workspace { background: rgba(34, 40, 49, .62); }
html[data-theme="dark"] .customise-editor { box-shadow: 0 24px 70px rgba(0, 0, 0, .48); }
html[data-theme="dark"] .admin-header-preview { box-shadow: 0 8px 30px rgba(0, 0, 0, .26); }
html[data-theme="dark"] .content-resizer::after { background: #687382; }
html[data-theme="dark"] .content-image-preview {
  background-image:
    linear-gradient(45deg, #303743 25%, transparent 25%),
    linear-gradient(-45deg, #303743 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #303743 75%),
    linear-gradient(-45deg, transparent 75%, #303743 75%);
}
html[data-theme="dark"] .tree-folder-icon,
html[data-theme="dark"] .tree-folder-icon::before { background: #d2a63c; }
html[data-theme="dark"] .tree-file-icon { border-color: #7e9eae; }
html[data-theme="dark"] .tree-file-icon::after { background: #7e9eae; box-shadow: 0 -3px #7e9eae; }

@media (max-width: 650px) {
  .topbar-inner { gap: .55rem; }
  .nav-actions { gap: .45rem; }
  .topbar-logo span { max-width: 7rem; }
  .theme-control select { min-width: 5.4rem; padding-right: 1.45rem; }
  .logout { padding: .5rem .72rem; }
}

@media (max-width: 520px) {
  .topbar-logo img { width: 44px; }
  .topbar-logo span { display: none; }
}


/* Passkeys */
.passkey-login { display: grid; gap: .65rem; margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.passkey-login p { margin: 0; }
.account-passkey-registration { display: grid; gap: .55rem; margin-top: 1rem; padding: 1rem; background: var(--pink-wash); border: 1px solid var(--line); border-radius: 12px; }
.account-passkey-registration > div { display: flex; gap: .55rem; }
.account-passkey-registration input { min-width: 0; }
.account-passkey-registration button { flex: 0 0 auto; }
.account-passkey-registration p { margin: 0; }

/* Account & Security */
.account-identity-link { color: var(--link-color); font-weight: 800; }
.account-identity-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25rem; }
.account-identity-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; padding: 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--shadow-soft); border-left: 6px solid var(--fft-blue); border-radius: 16px; box-shadow: 0 10px 30px var(--shadow-subtle); }
.account-identity-card > div { display: grid; min-width: 0; gap: .2rem; }
.account-identity-card > div > span { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.account-identity-card strong { overflow-wrap: anywhere; color: var(--ink-dark); font-size: 1.2rem; }
.account-verification-notice { margin-bottom: 1.3rem; padding: 1.15rem 1.3rem; color: var(--warning-text); background: var(--warning-wash); border: 1px solid var(--warning-border); border-radius: 14px; }
.account-verification-notice h2 { margin: 0; font-size: 1.15rem; }
.account-verification-notice p { margin: .35rem 0 0; color: inherit; }
.account-card-list { display: grid; gap: .75rem; margin-top: 1.25rem; }
.account-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; background: var(--blue-wash); border: 1px solid var(--blue-border); border-radius: 12px; }
.account-item.is-current { background: var(--green-wash); border-color: var(--fft-green); }
.account-item-main { display: grid; min-width: 0; gap: .2rem; }
.account-item-main > strong, .account-item-heading strong { overflow-wrap: anywhere; color: var(--ink-dark); font-size: 1rem; }
.account-item-main > span { color: var(--muted); font-size: .84rem; }
.session-expiry-countdown { color: var(--ink-dark); font-variant-numeric: tabular-nums; font-weight: 800; }
.session-expiry-countdown.is-expired { color: var(--danger); }
.account-item-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.account-item-heading .current-user { margin-left: 0; }
.account-item-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.account-item-actions form, .account-sessions .panel-title form, .account-item > form { margin: 0; }
.account-small-button { padding: .52rem .78rem; border-radius: 8px; font-size: .8rem; white-space: nowrap; }
.account-rename-form { grid-column: 1 / -1; padding-top: .9rem; border-top: 1px solid var(--control-accent-border); }
.account-rename-form[hidden] { display: none; }
.account-rename-form label { margin: 0 0 .4rem; }
.account-rename-form > div { display: flex; gap: .55rem; }
.account-rename-form input { min-width: 0; }
.account-rename-form button { flex: 0 0 auto; padding: .7rem 1rem; border-radius: 8px; }
.account-events-table td:last-child { min-width: 16rem; white-space: normal; }
.account-events-table td:first-child { font-variant-numeric: tabular-nums; }

@media (max-width: 650px) {
  .account-identity-card { align-items: flex-start; flex-direction: column; }
  .account-item { grid-template-columns: 1fr; align-items: stretch; }
  .account-item-actions { justify-content: flex-start; }
  .account-item > form .account-small-button { width: 100%; }
  .account-rename-form { grid-column: 1; }
  .account-rename-form > div { align-items: stretch; flex-direction: column; }
  .account-rename-form button { width: 100%; }
  .account-passkey-registration > div { align-items: stretch; flex-direction: column; }
  .account-passkey-registration button { width: 100%; }
  .account-sessions .panel-title form, .account-sessions .panel-title button { width: 100%; }
}

/* Published site account control settings */
.published-control-health { display: grid; gap: .35rem; }
.published-control-health span, .published-control-health small { display: block; }
.published-control-workspace { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(340px, 1.15fr); gap: 1.5rem; align-items: start; }
.published-control-settings { display: grid; gap: 1rem; }
.published-control-settings fieldset { margin: 0; }
.published-appearance { display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.published-appearance legend { padding: 0 .35rem; font-weight: 700; }
.published-appearance label { font-weight: 700; }
.published-appearance .fine-print { margin: 0; }
.published-offsets { display: grid; gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.published-offsets legend { padding: 0 .35rem; font-weight: 700; }
.published-offsets label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.published-offsets label span { white-space: nowrap; }
.published-offsets input { width: 6rem; }
.published-offsets button { justify-self: start; }
.published-disable-confirm { display: flex; gap: .7rem; align-items: start; padding: .85rem; border: 1px solid #d88484; border-radius: 8px; color: var(--danger); }
.published-disable-confirm[hidden] { display: none; }
.published-disable-confirm input { margin-top: .2rem; }
.published-preview-section { min-width: 0; }
.published-preview-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.published-preview-heading h3, .published-preview-heading p { margin: 0; }
.published-preview-heading p { color: var(--muted); font-size: .9rem; }
.published-preview-heading > span { padding: .25rem .55rem; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .78rem; font-weight: 700; }
.published-preview { position: relative; height: 430px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(circle at 25% 20%, #324248, #111719 62%); color: #d8e1dc; }
.published-preview-page { position: absolute; left: 7%; top: 24%; display: grid; gap: .55rem; opacity: .68; }
.published-preview-page span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.published-preview-page strong { max-width: 220px; font-size: 1.5rem; line-height: 1.05; }
.published-preview-control { position: absolute; top: 16px; right: 16px; min-height: 44px; max-width: calc(100% - 24px); display: flex; align-items: center; gap: .5rem; padding: .55rem .72rem; border: 1px solid #c8d0d8; border-radius: 999px; background: #fff; color: #17212b; box-shadow: 0 6px 24px rgba(0,0,0,.3); cursor: grab; user-select: none; touch-action: none; }
.published-preview-control:active { cursor: grabbing; }
.published-preview-control:focus-visible { outline: 3px solid #71b7f0; outline-offset: 2px; }
.published-preview-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #17212b; color: #fff; }
.published-preview-icon > .fft-profile-avatar { width: 100%; height: 100%; }
.published-preview-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.published-preview-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.published-preview-mobile-label { display: none; font-weight: 700; }
.published-preview-role { padding: .1rem .4rem; border-radius: 999px; background: #e8edf2; color: #45525f; font-size: .7rem; font-weight: 700; }
.published-preview-menu { position: absolute; top: calc(100% + 8px); right: 0; width: min(270px, calc(100vw - 50px)); display: grid; gap: .3rem; padding: .85rem; border: 1px solid #c8d0d8; border-radius: 12px; background: #fff; color: #17212b; box-shadow: 0 14px 40px rgba(0,0,0,.3); cursor: default; }
.published-preview-menu small { color: #65727f; }
.published-preview-menu strong { overflow-wrap: anywhere; }
.published-preview-menu hr { width: 100%; border: 0; border-top: 1px solid #e3e8ed; }
.published-preview-menu > span { padding: .35rem .2rem; font-weight: 650; }
.published-preview-menu .published-preview-signout { color: #b42318; }
.published-preview-dark .published-preview-control { border-color: #526171; background: #17212b; color: #f4f7fa; }
.published-preview-dark .published-preview-icon { background: #f4f7fa; color: #17212b; }
.published-preview-dark .published-preview-role { background: #344352; color: #e7edf3; }
.published-preview-dark .published-preview-menu { border-color: #526171; background: #17212b; color: #f4f7fa; }
.published-preview-dark .published-preview-menu small { color: #aebac6; }
.published-preview-dark .published-preview-menu hr { border-color: #344352; }
.published-preview-dark .published-preview-menu .published-preview-signout { color: #ff9f99; }
@media (max-width: 850px) {
  .published-control-workspace { grid-template-columns: 1fr; }
  .published-preview { height: 360px; }
}
@media (max-width: 560px) {
  .published-preview-control > [data-preview-email], .published-preview-control > [data-preview-role], .published-preview-control > :last-child { display: none !important; }
  .published-preview-control { min-width: 44px; width: auto; padding: .55rem .7rem; justify-content: center; }
  .published-preview-control.published-preview-has-icon { width: 44px; padding-inline: .55rem; }
  .published-preview-control.published-preview-has-icon .published-preview-icon { display: inline-flex !important; }
  .published-preview-control:not(.published-preview-has-icon) .published-preview-icon { display: none !important; }
  .published-preview-control:not(.published-preview-has-icon) .published-preview-mobile-label { display: inline; }
}

/* Account summary and profile image editor */
.account-tabs + .impersonation-banner { margin-top: 0; }
.account-summary-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.3rem; margin-bottom: 1.3rem; padding: 1.4rem; background: var(--paper); border: 1px solid var(--shadow-soft); border-left: 6px solid var(--fft-blue); border-radius: 16px; box-shadow: 0 10px 30px var(--shadow-subtle); }
.account-avatar-button { display: grid; justify-items: center; gap: .45rem; padding: .3rem; border: 0; background: transparent; color: var(--link-color); font-size: .76rem; font-weight: 800; cursor: pointer; }
.account-avatar-button:hover { background: transparent; color: var(--fft-deep-pink); }
.account-avatar-button:focus-visible { outline: 3px solid var(--fft-blue); outline-offset: 3px; border-radius: 12px; }
.account-summary-avatar-image { width: 84px; height: 84px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--control-accent-border); }
.account-summary-avatar-image svg { width: 52px; height: 52px; }
.account-summary-identity { display: grid; min-width: 0; justify-items: start; gap: .25rem; }
.account-summary-identity > span:first-child, .account-membership-details dt { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.account-summary-identity > strong { max-width: 100%; overflow-wrap: anywhere; color: var(--ink-dark); font-size: 1.35rem; }
.account-membership-details { display: grid; gap: .8rem; margin: 0; min-width: 13rem; }
.account-membership-details div { display: grid; gap: .18rem; }
.account-membership-details dd { margin: 0; color: var(--ink-dark); font-weight: 750; }
.account-summary-verification { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-timezone form { display: grid; gap: .75rem; margin-top: 1rem; }
.account-timezone form > label:not(.account-timezone-value) { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; font-weight: 800; }
.account-timezone form > label span { grid-column: 2; color: var(--muted); font-size: .86rem; font-weight: 500; }
.account-timezone-value { margin: .25rem 0 -.35rem; font-weight: 800; }
.account-timezone-controls { display: flex; gap: .65rem; }
.account-timezone-controls input { flex: 1; min-width: 0; padding: .72rem .8rem; color: var(--ink-dark); background: var(--paper); border: 1px solid var(--control-border); border-radius: 8px; }
.account-timezone-controls input:disabled { opacity: .65; }
.account-timezone .fine-print { margin: 0; }
.account-summary-verification a { flex: 0 0 auto; color: inherit; font-weight: 800; }
.account-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.account-overview-grid article { display: flex; min-height: 10rem; padding: 1.25rem; flex-direction: column; align-items: flex-start; background: var(--paper); border: 1px solid var(--shadow-soft); border-top: 5px solid var(--highlight-2); border-radius: 16px; box-shadow: 0 10px 30px var(--shadow-subtle); }
.account-overview-grid article:nth-child(3n+1) { border-top-color: var(--highlight-1); }
.account-overview-grid article:nth-child(3n+2) { border-top-color: var(--highlight-2); }
.account-overview-grid article:nth-child(3n+3) { border-top-color: var(--highlight-3); }
.account-overview-grid article > span { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.account-overview-grid article > strong { margin-top: .4rem; color: var(--ink-dark); font-size: 2rem; }
.account-overview-grid article > small { color: var(--muted); }
.account-overview-grid article > a { margin-top: auto; padding-top: 1rem; font-weight: 800; }
.account-overview-grid .account-latest-event { overflow-wrap: anywhere; font-size: 1.15rem; line-height: 1.25; }
.avatar-dialog { width: min(760px, calc(100vw - 2rem)); max-height: min(820px, calc(100dvh - 2rem)); padding: 0; overflow: hidden; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 28px 90px rgba(0,0,0,.35); }
.avatar-dialog::backdrop { background: rgba(7, 13, 22, .7); backdrop-filter: blur(3px); }
.avatar-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin: 0; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--line); }
.avatar-dialog-header h2, .avatar-dialog-header p { margin: 0; }
.avatar-dialog-close { width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border-radius: 50%; color: var(--muted); background: var(--wash); font-size: 1.7rem; line-height: 1; }
.avatar-dialog-body { max-height: calc(100dvh - 9rem); padding: 1.4rem; overflow-y: auto; }
.avatar-dialog-body h3 { margin: 0; }
.avatar-dialog-body section > p { margin: .35rem 0 1rem; color: var(--muted); }
.avatar-palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.avatar-palette form { margin: 0; }
.avatar-palette button { width: 100%; display: flex; align-items: center; gap: .65rem; padding: .65rem; color: var(--ink-dark); background: var(--wash); border: 2px solid transparent; border-radius: 12px; text-align: left; }
.avatar-palette button:hover { color: var(--ink-dark); background: var(--blue-wash); }
.avatar-palette button[aria-pressed="true"] { border-color: var(--fft-pink); box-shadow: 0 0 0 2px var(--pink-wash); }
.avatar-palette-swatch { width: 38px; height: 38px; flex: 0 0 auto; }
.avatar-palette-swatch svg { width: 25px; height: 25px; }
.avatar-upload { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.avatar-file-button { position: relative; display: inline-flex; overflow: hidden; cursor: pointer; }
.avatar-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-crop-workspace { display: grid; justify-items: center; gap: .65rem; margin-top: 1rem; }
.avatar-crop-workspace[hidden] { display: none; }
.avatar-crop-workspace canvas { width: min(320px, 75vw); height: min(320px, 75vw); border-radius: 50%; background: var(--wash); box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px var(--fft-blue); cursor: grab; touch-action: none; }
.avatar-crop-workspace canvas:active { cursor: grabbing; }
.avatar-crop-workspace p { margin: .2rem 0 0; color: var(--muted); font-size: .85rem; }
.avatar-crop-workspace label { justify-self: stretch; margin: .2rem 0 0; }
.avatar-crop-workspace input[type="range"] { width: min(360px, 100%); }
.avatar-upload-actions { display: flex; gap: .65rem; margin-top: 1rem; }
.avatar-upload-actions [hidden] { display: none; }

@media (max-width: 700px) {
  .account-summary-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .account-membership-details { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
  .account-overview-grid { grid-template-columns: 1fr; }
  .account-summary-verification { align-items: flex-start; flex-direction: column; }
  .account-overview-grid article { min-height: 8.5rem; }
  .account-timezone-controls { align-items: stretch; flex-direction: column; }
  .account-timezone-controls button { width: 100%; }
  .avatar-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .account-summary-card { grid-template-columns: 1fr; }
  .account-avatar-button { justify-self: start; }
  .account-membership-details { grid-column: 1; grid-template-columns: 1fr; }
  .avatar-palette { grid-template-columns: 1fr; }
  .avatar-upload-actions { align-items: stretch; flex-direction: column; }
  .avatar-upload-actions button { width: 100%; }
}

.availability-current { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.availability-current div { display: grid; gap: .35rem; }
.availability-current span:not(.storage-status) { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.availability-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.availability-summary small { display: block; margin-top: .35rem; color: var(--muted); }
@media (max-width: 980px) { .availability-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .availability-current { align-items: flex-start; flex-direction: column; } }

/* Changelog */
.changelog-page { max-width: 980px; }
.changelog-list { display: grid; gap: 1rem; }
.changelog-release { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px var(--shadow-subtle); scroll-margin-top: 6rem; }
.changelog-release > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; cursor: pointer; list-style: none; }
.changelog-release > summary::-webkit-details-marker { display: none; }
.changelog-release > summary:hover { background: var(--blue-wash); }
.changelog-release-heading { display: grid; min-width: 0; gap: .28rem; }
.changelog-release-heading > strong { color: var(--ink-dark); font-size: 1.25rem; }
.changelog-date { color: var(--fft-deep-pink); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.changelog-counts { color: var(--muted); font-size: .88rem; }
.changelog-release-meta { display: grid; justify-items: end; gap: .3rem; color: var(--muted); font-size: .78rem; }
.changelog-release-meta code { max-width: 25rem; overflow-wrap: anywhere; text-align: right; }
.changelog-status { display: inline-flex; width: fit-content; min-height: 1.7rem; align-items: center; padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 800; text-decoration: none; }
.changelog-ready { color: var(--success-text); background: var(--green-wash); }
.changelog-failed { color: var(--failed-text); background: var(--pink-wash); }
.changelog-pending, .changelog-regenerating { color: var(--warning-text); background: var(--warning-wash); }
.changelog-release-body { padding: 0 1.4rem 1.4rem; border-top: 1px solid var(--line); }
.changelog-summary { margin: 1.2rem 0; color: var(--ink-dark); font-size: 1.02rem; }
.changelog-changes { display: grid; gap: .8rem; }
.changelog-change { padding: 1rem 1.05rem; background: var(--wash); border: 1px solid var(--line); border-left: 5px solid var(--fft-blue); border-radius: 12px; }
.changelog-change.change-added { border-left-color: var(--fft-green); }
.changelog-change.change-removed { border-left-color: var(--fft-pink); }
.changelog-change-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.changelog-change h3 { margin: 0; font-size: 1.05rem; }
.change-label { padding: .22rem .48rem; border-radius: 999px; color: var(--info-text); background: var(--blue-wash); font-size: .7rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.change-added .change-label { color: var(--success-text); background: var(--green-wash); }
.change-removed .change-label { color: var(--failed-text); background: var(--pink-wash); }
.changelog-url { display: block; margin-top: .55rem; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.removed-url { color: var(--muted); }
.changelog-change > p:last-child { margin: .7rem 0 0; }
.changelog-show-all { margin-top: 1rem; }
.changelog-recovery { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.changelog-recovery > span { color: var(--muted); font-size: .85rem; }
.changelog-recovery form { margin: 0; }
.changelog-pagination { display: flex; justify-content: center; margin-top: 1.3rem; }
.changelog-pagination .button { text-decoration: none; }
@media (max-width: 650px) {
  .changelog-release > summary { grid-template-columns: 1fr; }
  .changelog-release-meta { justify-items: start; }
  .changelog-release-meta code { text-align: left; }
  .changelog-recovery { align-items: stretch; flex-direction: column; }
  .changelog-recovery button { width: 100%; }
}
.availability-update-status { margin: -.7rem 0 1rem; color: var(--muted); font-size: .85rem; }
.period-refresh.is-refreshing svg { animation: availability-spin .8s linear infinite; }
.period-refresh[aria-disabled="true"] { cursor: wait; opacity: .65; }
@keyframes availability-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .period-refresh.is-refreshing svg { animation: none; } }