/* Account surfaces extend the public website's site.css tokens, fonts and chrome. */
.account-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.account-main {
  width: min(1080px, calc(100% - clamp(40px, 8vw, 128px)));
  margin: 72px auto 0;
  flex: 1;
  min-width: 0;
}
.account-main-compact { width: min(460px, calc(100% - 40px)); }
.account-main h1 { margin: 0 0 28px; font-size: clamp(38px, 5vw, 64px); }
.account-main-compact h1 { font-size: clamp(38px, 5vw, 56px); }
.account-main h2 { margin: 0 0 20px; font-size: clamp(25px, 3vw, 32px); }
.account-main > h2 { margin-top: 40px; }
.account-main h1, .account-main h2, .account-main a { overflow-wrap: anywhere; }
.account-main p { color: var(--muted); }
.account-main strong, .account-main label { color: var(--paper); }
.account-main .account-description { margin: -10px 0 36px; font-size: 18px; }
.account-navigation { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 32px; font-size: 14px; color: var(--muted); }
.account-navigation a:last-child { margin-left: auto; }
.account-main section { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 28px; }
.account-main form { margin: 0; }
.account-main form + form { margin-top: 20px; }
.account-main form + p { margin-top: 24px; }
.account-main form > label { margin-bottom: 22px; }
.account-main form p { margin-bottom: 22px; }
.account-main label { display: block; font-size: 14px; font-weight: 500; }
.account-main input:not([type=checkbox], [type=hidden]), .account-main select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #111110;
  color: var(--paper);
  font: 16px/1.5 'Instrument Sans', system-ui, sans-serif;
}
.account-main input::placeholder { color: var(--dim); opacity: 1; }
.account-main input:hover, .account-main select:hover { border-color: var(--dim); }
.account-main input:focus-visible, .account-main select:focus-visible { border-color: var(--accent); }
.account-main input[type=checkbox] { width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--accent); }
.account-main button, .account-main .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--paper);
  color: #0a0a0a;
  font: 600 15px/1.5 'Instrument Sans', system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.account-main button:hover, .account-main .button:hover { background: var(--accent); color: #0a0a0a; }
.account-main button:disabled { opacity: .5; cursor: not-allowed; }
.account-main-compact form > button { width: 100%; }
.account-main form[data-google] > button { background: transparent; border-color: var(--line); color: var(--paper); }
.account-main form[data-google] > button:hover { border-color: var(--accent); color: var(--accent); }
.account-main .auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; margin-top: 24px; }
.account-main .auth-divider { margin: 24px 0; text-align: center; color: var(--muted); }
.account-main .auth-resend { margin-top: 24px; font-size: 14px; }
.account-main .auth-resend summary { cursor: pointer; margin-bottom: 16px; }
.account-main .helptext { font-size: 14px; margin-top: 24px; }
.account-main #message:empty { display: none; }
.account-main #message:not(:empty) { border-left: 2px solid var(--accent); background: #171815; padding: 14px 18px; margin: 0 0 24px; color: var(--paper); overflow-wrap: anywhere; }
.account-main pre { padding: 20px; background: #111110; border: 1px solid var(--line); }
.account-main .table-scroll { max-width: 100%; overflow-x: auto; }
.account-main > table { display: block; max-width: 100%; overflow-x: auto; }
.account-main th, .account-main td { font-size: 14px; overflow-wrap: anywhere; }
.account-main .billing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; margin: 32px 0; }
.account-main .billing-plan { display: flex; flex-direction: column; padding: 24px 0 0; border-top: 1px solid var(--line); }
.account-main .billing-plan h2, .account-main .billing-plan h3 { font-size: 25px; }
.account-main .billing-plan form { margin-top: auto; }
.account-main .billing-plan label { margin-bottom: 16px; }
.account-main .billing-plan button { width: 100%; }
.account-main .billing-price { font-size: 36px; font-weight: 500; letter-spacing: -.03em; color: var(--paper); }
.account-main .billing-plan small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.account-main .billing-notice { padding: 20px; background: #171815; border-left: 2px solid var(--accent); }
@media (max-width: 650px) {
  .account-main { margin-top: 40px; }
  .account-main h1 { margin-bottom: 24px; }
  .account-main .account-description { font-size: 17px; margin-bottom: 28px; }
  .account-site .site-footer { margin-top: 56px; }
}

/* Desktop downloads share the site palette, with one illustrated platform row. */
.desktop-downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.account-main .download-platform { margin: 0; padding: 0 0 24px; border-top: 0; min-width: 0; display: flex; flex-direction: column; }
.platform-art { height: 190px; position: relative; display: grid; place-items: center; overflow: hidden; color: var(--paper); }
.download-windows .platform-art { color: #8cc8ef; }
.platform-logo { position: relative; z-index: 1; transition: transform .45s cubic-bezier(.2,.8,.2,1); animation: platform-arrive 1.4s cubic-bezier(.2,.8,.2,1) both; }
.download-platform:hover .platform-logo, .download-platform:focus-within .platform-logo { transform: translateY(-5px); }
.account-main .download-platform h2 { margin: 8px 0 8px; font-size: 30px; }
.account-main .platform-status { font-size: 12px; margin-bottom: 18px; color: var(--dim); }
.account-main .platform-hint { font-size: 15px; margin-bottom: 24px; min-height: 3.3em; }
.download-options { display: grid; gap: 16px; }
.download-file { display: grid; gap: 6px; }
.account-main .download-button { justify-content: space-between; gap: 12px; width: 100%; padding: 13px 16px; text-align: left; font-size: 14px; }
.download-button svg { flex: none; }
.account-main .download-file + .download-file .download-button { background: transparent; border-color: var(--line); color: var(--paper); }
.account-main .download-file + .download-file .download-button:hover { border-color: var(--accent); color: var(--accent); }
.download-size { font-size: 12px; color: var(--dim); }
.account-main .download-unavailable { border: 1px dashed var(--line); padding: 14px; margin: 0; font-size: 14px; }
.account-main .download-help { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; font-size: 15px; max-width: none; }
@keyframes platform-arrive { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) and (min-width: 651px) { .desktop-downloads { gap: 20px; } .account-main .download-button { font-size: 13px; padding-inline: 12px; } }
@media (max-width: 650px) {
  .desktop-downloads { grid-template-columns: 1fr; gap: 16px; }
  .account-main .download-platform { border-top: 1px solid var(--line); }
  .platform-art { height: 160px; }
  .account-main .platform-hint { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .platform-logo { animation: none; transition: none; }
  .download-platform:hover .platform-logo, .download-platform:focus-within .platform-logo { transform: none; }
}

/* Owner-only operations share the normal account typography and login. */
.admin-sections,.admin-pagination{display:flex;flex-wrap:wrap;gap:20px;margin:24px 0}.admin-section-head{display:flex;align-items:center;justify-content:space-between;gap:24px}.admin-section-head form{display:flex;gap:12px;align-items:flex-end;max-width:480px}.admin-section-head form label{margin:0}.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}.admin-stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-stats>div{border:1px solid var(--line);padding:20px}.admin-stats span{display:block;font-size:13px;color:var(--dim)}.admin-stats strong{display:block;font-size:40px;font-weight:500;margin-top:8px;color:var(--accent)}.account-main .admin-note{font-size:13px;line-height:1.6;color:var(--dim);max-width:none}.admin-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.admin-two>div{min-width:0}.admin-users{display:grid;gap:16px}.admin-user{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:24px;border:1px solid var(--line);padding:24px}.account-main .admin-user h3{margin-top:0;overflow-wrap:anywhere}.admin-user p{overflow-wrap:anywhere}.admin-user-actions form+form{margin-top:24px}.admin-user-actions form{max-width:none}.admin-badge{font-size:11px;color:var(--accent);border:1px solid var(--accent);padding:3px 6px;margin-left:8px;white-space:nowrap}.admin-dashboard code{overflow-wrap:anywhere}.admin-dashboard td{max-width:360px;overflow-wrap:anywhere}.admin-dashboard section{scroll-margin-top:90px}
@media(max-width:760px){.admin-stats,.admin-stats-3{grid-template-columns:1fr 1fr}.admin-section-head{align-items:stretch;flex-direction:column;gap:12px}.admin-two,.admin-user{grid-template-columns:1fr}.admin-section-head form{flex-wrap:wrap}.admin-user{padding:18px}.admin-stats>div{padding:14px}.admin-stats strong{font-size:32px}}

/* Admin monitoring: live tiles, single-hue SVG bar charts and the day-by-hour heatmap. Colours are tokens only. */
.admin-live .admin-section-head{align-items:flex-start}.admin-window{flex-shrink:0}.admin-stats-live{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.admin-stats-live>div{padding:14px 14px 12px}.admin-stats-live strong{font-size:30px;margin-top:4px;font-variant-numeric:tabular-nums}.admin-stats-live small,.admin-chart-card small{display:block;font-size:12px;color:var(--dim);margin-top:4px}.admin-stats-live>div:first-child{border-color:var(--accent)}
.admin-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-chart-card{margin:16px 0 0;border:1px solid var(--line);padding:16px 16px 12px;min-width:0}.admin-chart-card figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px;font-size:13px;color:var(--dim)}.admin-chart-card figcaption strong{font-size:22px;font-weight:500;color:var(--paper);font-variant-numeric:tabular-nums}.admin-chart-card figcaption small{margin:0;flex-basis:100%}
.admin-chart{display:block;width:100%;height:auto;overflow:visible}.admin-chart .chart-bar,.admin-spark .chart-bar{fill:var(--accent);fill-opacity:.85}.admin-chart .chart-bar:hover{fill-opacity:1}.admin-chart .chart-bar-empty{fill:var(--line)}.admin-chart .chart-base,.admin-spark .chart-base{stroke:var(--line);stroke-width:1}.admin-chart-card .chart-axis{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}.admin-spark{display:block;vertical-align:middle}
.account-main .admin-heat{border-collapse:separate;border-spacing:2px;width:auto;font-variant-numeric:tabular-nums}.admin-heat th,.admin-heat td{padding:0;border:0;min-width:0;font-size:11px;color:var(--dim);text-align:center;white-space:nowrap}.admin-heat thead th{height:18px;font-weight:400}.admin-heat tbody th{text-align:left;padding-right:10px;font-weight:400;color:var(--muted)}.admin-heat td.heat{width:30px;min-width:30px;height:30px;border:1px solid var(--line);background:transparent;color:var(--dim)}.admin-heat td.heat span{display:none}.admin-heat td.heat-total{padding-left:10px;text-align:right;color:var(--paper);min-width:52px}
.admin-heat td.heat-1{background:color-mix(in oklab,var(--accent) 22%,transparent);border-color:transparent}.admin-heat td.heat-2{background:color-mix(in oklab,var(--accent) 40%,transparent);border-color:transparent}.admin-heat td.heat-3{background:color-mix(in oklab,var(--accent) 58%,transparent);border-color:transparent}.admin-heat td.heat-4{background:color-mix(in oklab,var(--accent) 78%,transparent);border-color:transparent}.admin-heat td.heat-5{background:var(--accent);border-color:transparent}.admin-heat td.heat-4 span,.admin-heat td.heat-5 span{display:inline;color:#0a0a0a;font-weight:500}.admin-heat td.heat-3 span{display:inline;color:#0a0a0a}
@media(max-width:1100px){.admin-stats-live{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.admin-stats-live{grid-template-columns:1fr 1fr}.admin-stats-live strong{font-size:26px}.admin-charts{grid-template-columns:1fr}.admin-chart-card{padding:12px 12px 8px}.admin-heat td.heat{width:24px;min-width:24px;height:24px}}
/* Keep the platform heading below the fixed, wrapping site navigation. */
.admin-dashboard #platforms{scroll-margin-top:100px}
@media(max-width:600px){.admin-dashboard #platforms{scroll-margin-top:180px}}

.admin-map{margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:12px;background:#10171b}
.admin-map figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--dim);font-size:13px}.admin-map h3{margin:0;color:var(--paper)}
.admin-map svg{display:block;width:100%;height:auto;margin:20px 0}.map-ocean{fill:#0c1216}
.map-country{stroke:#0c1216;stroke-width:.6;stroke-linejoin:round}.map-country:hover{stroke:var(--paper);stroke-width:1.2}
.map-level-0{fill:#303b42;background:#303b42}.map-level-1{fill:#254c63;background:#254c63}.map-level-2{fill:#296b8a;background:#296b8a}.map-level-3{fill:#348ead;background:#348ead}.map-level-4{fill:#5cbbd1;background:#5cbbd1}.map-level-5{fill:#a0e4ef;background:#a0e4ef}
.map-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.map-legend i{width:18px;height:10px;border-radius:2px}.map-legend span:last-child{margin-left:5px}
@media(max-width:600px){.admin-map{padding:12px}.admin-map figcaption{display:block}.admin-map svg{margin:12px 0}}

.admin-dashboard .admin-map,.admin-dashboard #errors{scroll-margin-top:100px}
.admin-dashboard #installation-health h3{margin-top:28px}
@media(max-width:600px){.admin-dashboard .admin-map,.admin-dashboard #errors,.admin-dashboard #installation-health{scroll-margin-top:180px}}