:root {
  color-scheme: dark;
  --page: #07111c;
  --panel: #122637;
  --line: #38566a;
  --text: #f5f8fb;
  --muted: #acc0cb;
  --accent: #baf26d;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--page);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  background: #132637;
}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{inset:-24px;background:url("/images/dashboard-banner.png?v=sunrise-global-1") 72% center/cover no-repeat;filter:blur(1px);transform:scale(1.01)}
body::after{background:linear-gradient(180deg,#07162238,#07162272)}
.dashboard-shell,.history-page,.account-shell,.landing-shell,.legal-page{position:relative;z-index:1}
button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #0b1a22;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
button:hover, .button:hover { transform: translateY(-1px); }
button:active, .button:active { transform: translateY(0); }
button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.secondary { border-color: #5b788a; background: #1a3547; color: var(--text); }
.secondary:hover { background: #27485a; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
}
.brand-ball {
  display: inline-block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: url("/images/padeltoad-icon.png") center / contain no-repeat;
  filter: drop-shadow(0 0 7px #baf26d55);
}
.account-shell {
  width: min(100%, 480px);
  margin: 0 auto;
  padding: max(42px, 6vh) 18px 48px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 900; letter-spacing: .14em; }
.brand b { color: var(--accent); }
.landing-intro { margin: 36px 0 25px; }
.landing-intro h1 { margin: 9px 0 8px; font-size: clamp(35px, 9vw, 54px); line-height: 1.02; letter-spacing: -.055em; }
.landing-intro p { max-width: 36ch; margin: 0; color: var(--muted); line-height: 1.5; }
.account-card, .dashboard-card {
  min-width: 0;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(150deg, #1b3447ee, #0f2131ef 70%);
  box-shadow: 0 20px 50px #0003;
}
.account-card + .account-card { margin-top: 16px; }
.account-card h1, .account-card h2, .dashboard-card h2 { margin: 0 0 8px; font-size: clamp(22px, 5vw, 28px); letter-spacing: -.025em; }
.account-card p, .dashboard-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.account-card .account-help { margin-top: 14px; font-size: 13px; }
.account-help a, .account-shell a:not(.button):not(.brand) { color: var(--accent); }
.legal-page { width: min(100% - 32px, 780px); margin: 0 auto; padding: 45px 0 70px; line-height: 1.6; }
.legal-page h1 { margin: 0 0 18px; font-size: clamp(32px, 6vw, 52px); }
.legal-page h2 { margin: 34px 0 8px; font-size: 23px; }
.legal-page p { color: var(--muted); }
.legal-page address { font-style: normal; line-height: 1.8; }
.legal-page a { color: var(--accent); }
.legal-page footer { margin-top: 45px; padding-top: 20px; border-top: 1px solid var(--line); }
.landing-footer nav { display: flex; flex-wrap: wrap; gap: 12px; }
.landing-footer a { color: var(--muted); }
.account-card form { display: grid; gap: 17px; margin-top: 22px; }
label { font-weight: 800; }
label small { color: var(--muted); font-weight: 500; }
input:not([type=checkbox]):not([type=range]), select, textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid #698394;
  border-radius: 9px;
  background: #0c1d2b;
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: #8ea6b3; }
.account-card form > button { width: 100%; margin-top: 4px; }
.message { min-height: 1.3em; margin-top: 13px !important; color: #ffbd9d; font-weight: 700; overflow-wrap: anywhere; }
.dashboard-shell { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 70px; }
.dashboard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 27px; }
.dashboard-head h1 { margin: 8px 0 7px; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.05em; }
.dashboard-head p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.head-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dashboard-grid, .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dashboard-card { display: flex; flex-direction: column; align-items: flex-start; }
.dashboard-card > .button { margin-top: auto; }
.primary-card { grid-column: 1 / -1; border-color: #719565; background: linear-gradient(140deg, #22443f, #152c3b 55%, #0e2030); }
.card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  margin-bottom: 18px;
  border: 1px solid #557768;
  border-radius: 12px;
  background: #baf26d12;
  color: var(--accent);
}
.card-icon svg, .button-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.button-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.dashboard-card p { margin-bottom: 22px; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.action-row .button { background: var(--accent); }
.link-management { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 18px; }
.text-button { min-height: 30px; padding: 2px 0; border: 0; background: transparent; color: #b6cbd3; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--accent); background: transparent; }
.admin-grid { margin-bottom: 16px; }
.admin-section { margin-bottom: 16px; }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-heading .card-icon { width: 37px; height: 37px; margin: 0; }
.section-heading .card-icon svg { width: 20px; height: 20px; }
.section-heading h2 { margin: 0; }
.health-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 8px; width: 100%; }
.health-tile { padding: 10px 12px; border: 1px solid #557a68; border-radius: 9px; background: #1d3b3b; color: #d9ffb5; font-size: 13px; font-weight: 800; }
.health-tile.bad { border-color: #9b605e; background: #472d32; color: #ffd5c9; }
.switch-line { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.switch-line input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.user-list { display: grid; gap: 10px; width: 100%; }
.user-row { display: grid; grid-template-columns: minmax(180px,1fr) 110px minmax(330px,1.5fr); gap: 10px; align-items: end; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #0b1e2dcc; }
.user-row small { display: block; margin-top: 6px; color: var(--muted); overflow-wrap: anywhere; }
.user-row input, .user-row select { margin: 0; }
.user-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.user-actions button { min-height: 38px; padding: 7px 9px; font-size: 11px; }
.event-log { width: 100%; max-height: 420px; overflow: auto; padding: 12px 14px; border: 1px solid #3a596d; border-radius: 11px; background: #081724; color: #e8f5f4; font: 12px/1.5 ui-monospace, Consolas, monospace; }
.event-entry { padding: 6px 0; border-bottom: 1px solid #29475a; overflow-wrap: anywhere; }
.event-entry time { color: #a2c4c3; margin-right: 8px; }
@media (max-width: 960px) {
  .user-row { grid-template-columns: minmax(0,1fr) 130px; }
  .user-actions { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .account-shell { padding-top: max(26px, env(safe-area-inset-top)); }
  .landing-intro { margin: 28px 0 22px; }
  .dashboard-shell { width: calc(100% - 24px); padding: max(20px, env(safe-area-inset-top)) 0 38px; }
  .dashboard-head { flex-direction: column; gap: 15px; margin-bottom: 21px; }
  .head-actions { width: 100%; justify-content: stretch; }
  .head-actions > * { flex: 1 1 auto; }
  .dashboard-grid, .admin-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .primary-card { grid-column: auto; }
  .account-card, .dashboard-card { padding: 19px; border-radius: 16px; }
  .card-icon { margin-bottom: 14px; }
  .action-row { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .action-row .button { grid-column: 1 / -1; }
  .action-row button { padding: 8px; font-size: 12px; }
  .dashboard-card > .button { width: 100%; }
  .health-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .user-row { grid-template-columns: minmax(0,1fr); }
  .user-actions { grid-column: 1; }
}
@media (max-width: 380px) {
  .health-tiles { grid-template-columns: 1fr; }
  .user-actions button { flex: 1 1 130px; }
}
@media (prefers-reduced-motion: reduce) {
  button, .button { transition: none; }
}

/* Account-wide scoreboard designs; the previews use the same palette as the score page. */
.theme-section { grid-column: 1 / -1; width: 100%; }
.theme-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; width: 100%; margin-bottom: 19px; }
.theme-heading h2 { margin-top: 5px; }
.theme-heading p { margin-bottom: 0; }
.theme-account-note { color: var(--muted); font-size: 12px; font-weight: 700; text-align: right; }
.theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; width: 100%; }
.theme-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  min-width: 0; min-height: 0; padding: 8px; border: 2px solid #496677;
  border-radius: 15px; background: #102737; color: var(--text); text-align: left;
}
.theme-card:hover { border-color: #9bc78c; background: #193747; }
.theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px #baf26d3b; }
.theme-card:disabled { cursor: progress; opacity: .76; }
.theme-preview {
  --preview-bg: #fff; --preview-card: #fff; --preview-fg: #050505;
  --preview-line: #050505; --preview-accent: #050505;
  display: flex; flex-direction: column; gap: 7px; width: 100%; aspect-ratio: 1.72;
  padding: 9px; overflow: hidden; border: 1px solid var(--preview-line);
  border-radius: 6px; background: var(--preview-bg); color: var(--preview-fg);
}
.theme-card[data-theme="mono-dark"] .theme-preview { --preview-bg: #07090b; --preview-card: #07090b; --preview-fg: #fff; --preview-line: #fff; --preview-accent: #fff; }
.theme-card[data-theme="padel-live"] .theme-preview { --preview-bg: #0c1d2a; --preview-card: #182f40; --preview-fg: #f4f8fa; --preview-line: #426175; --preview-accent: #baf26d; }
.theme-card[data-theme="modern"] .theme-preview { --preview-bg: #e8f2f4; --preview-card: #fff; --preview-fg: #173448; --preview-line: #b3cad3; --preview-accent: #087f85; border-radius: 11px; }
.theme-preview-top { display: flex; justify-content: space-between; gap: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--preview-line); color: var(--preview-accent); font-size: clamp(7px,.7vw,10px); font-weight: 900; letter-spacing: .06em; }
.theme-preview-scores { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; flex: 1; }
.theme-preview-scores > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; border: 1px solid var(--preview-line); border-radius: 2px; background: var(--preview-card); }
.theme-card[data-theme="padel-live"] .theme-preview-scores > span, .theme-card[data-theme="modern"] .theme-preview-scores > span { border-radius: 8px; }
.theme-preview-scores small { font-size: clamp(7px,.8vw,11px); font-weight: 900; letter-spacing: .04em; }
.theme-preview-scores b { color: var(--preview-accent); font-size: clamp(25px,3.8vw,48px); line-height: .95; letter-spacing: -.08em; }
.theme-card[data-theme="padel-live"] .theme-preview-scores > span:last-child b, .theme-card[data-theme="modern"] .theme-preview-scores > span:last-child b { color: var(--preview-fg); }
.theme-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; width: 100%; padding: 2px 3px 3px; font-size: 13px; }
.theme-check { display: grid; place-items: center; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #10202a; font-weight: 900; opacity: 0; }
.theme-card[aria-pressed="true"] .theme-check { opacity: 1; }
.theme-message { min-height: 1.2em; margin: 12px 0 0 !important; color: #d9ffb5 !important; font-size: 12px; font-weight: 700; }
@media (max-width: 800px) { .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .theme-preview-top { font-size: 9px; } .theme-preview-scores small { font-size: 9px; } .theme-preview-scores b { font-size: clamp(29px,7vw,54px); } }
@media (max-width: 430px) { .theme-heading { display: block; } .theme-account-note { display: block; margin-top: 8px; text-align: left; } .theme-grid { gap: 8px; } .theme-card { padding: 6px; } .theme-preview { padding: 5px; gap: 4px; } .theme-preview-scores b { font-size: 27px; } .theme-card-footer { font-size: 11px; } }

/* Dashboard: keep the design chooser with the scoreboard controls. */
.primary-card .theme-section { width: 100%; margin-top: 24px; padding-top: 22px; border-top: 1px solid #648779; }
.primary-card .theme-heading h3 { margin: 5px 0 5px; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.025em; }
.primary-card .theme-heading p { margin: 0; }
.history-card { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; }
.history-card .card-icon { margin: 0; }
.history-card .history-copy p { margin: 0; }
.history-card > .button { margin: 0; }

/* Profile and password settings. */
.account-dialog {
  width: min(92vw, 650px); max-height: min(90dvh, 900px); overflow: auto;
  padding: 0; border: 1px solid #557486; border-radius: 20px;
  background: #112638; color: var(--text); box-shadow: 0 25px 85px #0009;
}
.account-dialog::backdrop { background: #030b13c9; }
.account-dialog-head { position: sticky; z-index: 1; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 25px; border-bottom: 1px solid var(--line); background: #173246; }
.account-dialog-head h2 { margin: 5px 0 0; font-size: 29px; letter-spacing: -.03em; }
.dialog-close-button { width: 37px; height: 37px; min-height: 0; padding: 0; border-color: #648496; border-radius: 50%; background: #203e51; color: var(--text); font-size: 28px; line-height: 1; }
.remote-setup-dialog { width: min(92vw, 760px); }
.remote-setup-body { padding: 24px 25px 27px; }
.remote-setup-body p { margin: 0; color: #d0e0e6; line-height: 1.5; }
.remote-setup-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.remote-setup-option { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 18px; border: 1px solid #4b6b7a; border-radius: 14px; background: #0d2232; }
.remote-setup-option h3 { margin: 9px 0 7px; font-size: 21px; }
.remote-setup-option p { margin-bottom: 18px; font-size: 14px; }
.remote-setup-option .button, .remote-setup-option button { margin-top: auto; }
.remote-setup-security { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 17px 0 0; border-top: 1px solid var(--line); }
.remote-setup-security strong { display: block; margin-bottom: 3px; font-size: 15px; }
.remote-setup-security p { font-size: 13px; }
.remote-setup-security button { flex: 0 0 auto; }
.remote-setup-body .message { margin-top: 12px; overflow-wrap: anywhere; }
.account-settings-section { padding: 23px 25px 26px; }
.account-settings-section + .account-settings-section { border-top: 1px solid var(--line); }
.account-settings-section h3 { margin: 0 0 5px; font-size: 20px; }
.account-settings-section > p:not(.message) { margin: 0; color: var(--muted); line-height: 1.45; }
.account-settings-section form { display: grid; gap: 14px; margin-top: 17px; }
.account-settings-section form > button { justify-self: start; }
.account-export { margin-top: 17px; }
.account-danger { background: #291f2a; }
.account-danger h3 { color: #ffd7d4; }
.profile-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.account-settings-section .message { margin-bottom: 0; }

/* PadelToad watch-design favorites: keep the watch menu to three clear choices. */
.remote-favorite-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:16px; }
.remote-favorite-card { display:grid; grid-template-columns:52px minmax(0,1fr) 20px; align-items:center; gap:10px; min-width:0; min-height:70px; padding:8px 10px; border:1px solid #496677; border-radius:12px; background:#0e2231; color:var(--text); text-align:left; }
.remote-favorite-card:hover { border-color:#a9d67f; background:#173244; }
.remote-favorite-card[aria-pressed="true"] { border:2px solid var(--accent); background:#193b37; box-shadow:0 0 0 2px #baf26d22; }
.remote-favorite-card:disabled { cursor:default; opacity:.5; }
.remote-favorite-card>span:nth-child(2) { display:grid; gap:4px; min-width:0; }
.remote-favorite-card strong { font-size:12px; line-height:1.2; }
.remote-favorite-card small { color:var(--muted); font-size:10px; line-height:1.2; }
.remote-favorite-swatch { display:grid; grid-template-columns:1fr 1fr; align-items:center; justify-items:center; height:45px; overflow:hidden; border:1px solid #617580; border-radius:7px; background:#fff; color:#111; font-style:normal; }
.remote-favorite-swatch b,.remote-favorite-swatch i { font-size:13px; font-weight:900; font-style:normal; }
.remote-favorite-invert { background:#07090b; color:#fff; }
.remote-favorite-live { border-color:#597889; background:linear-gradient(135deg,#102637,#173a4a); color:#baf26d; }
.remote-favorite-modern { border-color:#a8c5cd; background:#e8f2f4; color:#087f85; }
.remote-favorite-shell { border:2px solid #baf26d; background-color:#0d2532; background-image:linear-gradient(90deg,transparent 48%,#baf26d 49%,#baf26d 51%,transparent 52%),linear-gradient(0deg,transparent 67%,#8db6bb 68%,#8db6bb 70%,transparent 71%); color:#fff; }
.remote-favorite-check { display:grid; place-items:center; width:19px; height:19px; border:1px solid #78909b; border-radius:50%; color:transparent; font-size:12px; font-weight:900; }
.remote-favorite-card[aria-pressed="true"] .remote-favorite-check { border-color:var(--accent); background:var(--accent); color:#13212a; }
@media(max-width:560px) { .remote-favorite-grid { grid-template-columns:1fr; } }

/* Administration: traffic-light health checks and compact info metrics. */
.health-summary { width: 100%; margin: 3px 0 14px !important; padding: 12px 14px; border: 1px solid #688a68; border-radius: 10px; font-size: 14px; font-weight: 800; }
.health-summary.is-ok { background: #1c3c38; color: #d9ffc7; }
.health-summary.is-info { border-color: #ad9157; background: #3a3429; color: #ffe4ae; }
.health-summary.is-fault { border-color: #b46063; background: #4a2834; color: #ffe0dd; }
.health-legend { display: flex; flex-wrap: wrap; gap: 7px 15px; width: 100%; margin: 0 0 14px; color: var(--muted); font-size: 11px; font-weight: 800; }
.health-legend span { display: inline-flex; align-items: center; gap: 6px; }
.health-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.health-tile { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 57px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.health-tile.is-ok { border-color: #568b72; background: #193c37; color: #dcffe7; }
.health-tile.is-info { border-color: #a08749; background: #403825; color: #ffebbc; }
.health-tile.is-fault { border-color: #b76870; background: #472b35; color: #ffe0df; }
.health-tile span { display: grid; min-width: 0; gap: 2px; }
.health-tile small { color: inherit; font-size: 11px; font-weight: 700; opacity: .82; }
.health-tile strong { color: inherit; font-size: 15px; line-height: 1.1; overflow-wrap: anywhere; }
.signal-dot { display: inline-block; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.signal-dot.ok { background: #78df9c; box-shadow: 0 0 0 3px #78df9c24; }
.signal-dot.info { background: #ffd166; box-shadow: 0 0 0 3px #ffd16624; }
.signal-dot.fault { background: #ff777d; box-shadow: 0 0 0 3px #ff777d24; }

/* Administration: each user has a readable identity, fields and action row. */
.user-list { gap: 13px; }
.user-row { display: flex; flex-direction: column; align-items: stretch; gap: 15px; padding: 17px; border-color: #4b687a; background: #0d2131; }
.user-summary { display: flex; align-items: center; gap: 11px; min-width: 0; }
.user-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid #648c77; border-radius: 12px; background: #23453f; color: #d6ffaf; font-size: 18px; font-weight: 900; }
.user-identity { display: grid; min-width: 0; gap: 3px; }
.user-identity strong { overflow-wrap: anywhere; font-size: 15px; }
.user-identity small { margin: 0; font-size: 11px; }
.user-badge { flex: 0 0 auto; margin-left: auto; padding: 5px 9px; border: 1px solid #748b95; border-radius: 99px; color: #e7f2f6; font-size: 11px; font-weight: 900; }
.user-badge.is-active { border-color: #5f9c77; background: #21453e; color: #d5ffe0; }
.user-badge.is-idle { border-color: #a08749; background: #403825; color: #ffebbc; }
.user-badge.is-locked { border-color: #b76870; background: #472b35; color: #ffe0df; }
.user-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,180px); gap: 12px; width: 100%; }
.user-fields label { color: #c3d3da; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
.user-fields input, .user-fields select { width: 100%; margin-top: 6px; }
.user-actions { display: flex; align-items: center; gap: 7px; padding-top: 12px; border-top: 1px solid #395467; }
.user-actions button { min-height: 36px; padding: 7px 11px; border-radius: 8px; font-size: 12px; }
.user-actions .user-save { margin-right: auto; }
.user-actions .user-delete { border-color: #915f66; background: #3a2631; color: #ffd8d8; }
.user-actions button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* The console is only loaded while expanded. */
.console-details { display: block; }
.console-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; list-style: none; cursor: pointer; }
.console-details summary::-webkit-details-marker { display: none; }
.console-heading { display: flex; align-items: center; gap: 12px; }
.console-heading .card-icon { width: 37px; height: 37px; margin: 0; }
.console-heading .card-icon svg { width: 20px; height: 20px; }
.console-heading strong { display: block; font-size: 23px; }
.console-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.console-chevron { color: var(--accent); font-size: 27px; transition: transform .18s ease; }
.console-details[open] .console-chevron { transform: rotate(180deg); }
.console-content { width: 100%; margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.console-content p { margin-bottom: 13px; }

@media (max-width: 700px) {
  .remote-setup-options { grid-template-columns: 1fr; }
  .remote-setup-security { align-items: stretch; flex-direction: column; }
  .history-card { grid-template-columns: auto minmax(0,1fr); gap: 11px; }
  .history-card > .button { grid-column: 1 / -1; width: 100%; }
  .primary-card .theme-section { margin-top: 21px; padding-top: 19px; }
  .account-dialog-head, .account-settings-section, .remote-setup-body { padding-left: 18px; padding-right: 18px; }
  .user-actions { flex-wrap: wrap; }
  .user-actions .user-save { flex-basis: 100%; margin-right: 0; }
}
@media (max-width: 480px) {
  .profile-fields, .user-fields { grid-template-columns: 1fr; }
  .health-tiles { grid-template-columns: 1fr 1fr; }
  .health-tile { padding: 8px; gap: 7px; }
  .health-tile strong { font-size: 13px; }
  .user-badge { margin-left: 0; }
  .user-summary { flex-wrap: wrap; }
}

/* Dashboard scoreboard card and design dialog. */
.scoreboard-card-head { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.scoreboard-card-head .card-icon { margin-bottom: 12px; }
.scoreboard-card-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: center; gap: 28px; width: 100%; }
.scoreboard-card-copy { min-width: 0; }
.scoreboard-card-copy h2 { font-size: clamp(27px,3.2vw,39px); }
.scoreboard-card-copy p { margin-bottom: 26px; }
.scoreboard-card-copy .action-row { margin-top: 0; }
.scoreboard-card-visual { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #628578; border-radius: 16px; background: #0b1d2b; box-shadow: 0 22px 42px #0005; }
.scoreboard-card-visual img { display: block; width: 100%; height: 100%; max-height: 350px; object-fit: cover; object-position: center; }
.guide-card { grid-column: 1 / -1; }
.guide-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; width: 100%; margin-bottom: 20px; }
.guide-heading h2 { margin: 7px 0 5px; font-size: clamp(25px,3vw,36px); }
.guide-heading p { margin: 0; }
.guide-heading-mark { color: var(--accent); font-size: 39px; line-height: 1; }
.guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; width: 100%; }
.guide-item { min-width: 0; overflow: hidden; border: 1px solid #456777; border-radius: 14px; background: #0d2232; }
.guide-item img { display: block; width: 100%; height: 175px; object-fit: cover; }
.guide-copy { padding: 17px 18px 20px; }
.guide-step { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.guide-copy h3 { margin: 8px 0 7px; font-size: clamp(18px,1.7vw,22px); line-height: 1.15; letter-spacing: -.025em; }
.guide-copy p { margin: 0; color: #c3d6df; font-size: 14px; line-height: 1.55; }
.guide-copy p strong { color: var(--text); }
.theme-dialog { width: min(94vw, 960px); }
.theme-dialog-body { padding: 23px 25px 26px; }
.theme-dialog .theme-heading { align-items: center; }
.theme-dialog .theme-heading p { margin: 0; color: var(--muted); }
.theme-dialog .theme-preview-top { font-size: 9px; }
.theme-dialog .theme-preview-scores small { font-size: 10px; }
.theme-dialog .theme-preview-scores b { font-size: clamp(30px,4vw,48px); }

/* Login and feature impressions. */
.landing-shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.landing-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; }
.landing-header .brand { gap: 12px; font-size: clamp(18px,2vw,23px); letter-spacing: .11em; }
.landing-header .brand-ball { width: 44px; height: 44px; }
.landing-header .landing-logo-lockup { display: flex; flex: 0 0 auto; width: 126px; height: 122px; align-items: center; justify-content: center; overflow: hidden; padding: 4px; border: 1px solid #e5e8d4; border-radius: 18px; background: linear-gradient(145deg,#fff9e8,#e8f0d9); box-shadow: 0 12px 30px #07111c55; }
.landing-header .landing-logo-lockup img { display: block; width: 100%; height: 100%; object-fit: contain; }
.landing-footer .brand { gap: 8px; font-size: 13px; }
.landing-footer .brand img { display:block; width:28px; height:28px; object-fit:contain; }
.landing-footer .brand-ball { width: 28px; height: 28px; }
.landing-header-actions{display:flex;align-items:center;gap:14px}
.landing-header-actions select{border:1px solid var(--line);border-radius:8px;background:#152e40;color:var(--text);padding:7px 9px;font:inherit;font-weight:700}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.landing-header-link { color: var(--text); font-size: 13px; font-weight: 800; text-decoration: none; }
.landing-header-link:hover { color: var(--accent); }
.landing-hero { display: grid; grid-template-areas: "copy auth" "visual auth"; grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr); align-items: start; gap: 0 clamp(25px,4vw,60px); padding: 28px 0 80px; }
.landing-hero-copy { grid-area: copy; min-width: 0; }
.landing-hero h1 { margin: 16px 0 21px; font-size: clamp(49px,7.1vw,105px); line-height: .94; letter-spacing: -.075em; }
.landing-hero h1 em { color: var(--accent); font-style: normal; }
.landing-lead { max-width: 53ch; margin: 0; color: #d0dfe5; font-size: clamp(16px,1.55vw,20px); line-height: 1.52; }
.landing-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.landing-pills span { padding: 8px 12px; border: 1px solid #486779; border-radius: 99px; background: #193447; color: #dce8ed; font-size: 12px; font-weight: 800; }
.landing-discover { display: inline-flex; align-items: center; gap: 11px; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid #a7d56c; color: #dcffac; font-size: 13px; font-weight: 900; text-decoration: none; }
.landing-discover:hover { color: #fff; border-color: #fff; }
.landing-discover span { font-size: 19px; line-height: 1; }
.landing-hero-visual { position: relative; grid-area: visual; margin: 29px 0 0; overflow: hidden; border: 1px solid #4c6a78; border-radius: 22px; background: #132838; box-shadow: 0 20px 60px #0006; }
.landing-hero-visual img { display: block; width: 100%; height: auto; }
.landing-hero-visual figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; border: 1px solid #a7d56c55; border-radius: 99px; background: #0b1a22d9; color: #eaffd2; font-size: 12px; font-weight: 900; backdrop-filter: blur(8px); }
.landing-auth { grid-area: auth; padding-top: clamp(26px,7vw,92px); scroll-margin-top: 24px; }
.landing-login-card { border-color: #7aa86c; background: linear-gradient(150deg,#24453e,#132d3e 65%,#102332); box-shadow: 0 24px 65px #0008; }
.landing-login-card h2 { margin-top: 10px; font-size: clamp(27px,2.5vw,37px); }
.landing-login-card form { margin-top: 26px; }
.landing-login-card button[type=submit] { min-height: 49px; }
.landing-benefits { padding: 58px 0 75px; border-top: 1px solid #365668; scroll-margin-top: 24px; }
.landing-benefits .landing-section-intro { max-width: 800px; }
.landing-benefits .landing-section-intro h2 { max-width: 12ch; }
.benefit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.benefit-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 285px; overflow: hidden; padding: 24px; border: 1px solid #406473; border-radius: 18px; background: linear-gradient(150deg,#1c3a4b,#112637 75%); }
.benefit-card::before { content: ""; position: absolute; top: -78px; right: -63px; width: 160px; height: 160px; border: 1px solid #a2dc6840; border-radius: 50%; box-shadow: 0 0 0 28px #a2dc6808,0 0 0 58px #a2dc6805; pointer-events: none; }
.benefit-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: auto; border: 1px solid #628970; border-radius: 13px; background: #baf26d15; color: var(--accent); }
.benefit-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.benefit-card h3 { position: relative; margin: 22px 0 8px; font-size: clamp(20px,2vw,27px); line-height: 1.12; letter-spacing: -.035em; }
.benefit-card p { position: relative; margin: 0; color: #c3d7e0; font-size: 14px; line-height: 1.55; }
.landing-features { padding: 35px 0 70px; }
.landing-section-intro { max-width: 660px; margin-bottom: 27px; }
.landing-section-intro h2, .landing-finale h2 { margin: 10px 0 12px; font-size: clamp(35px,4.7vw,65px); line-height: 1.02; letter-spacing: -.055em; }
.landing-section-intro p, .landing-finale p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.feature-card { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); min-height: 365px; margin: 17px 0; overflow: hidden; border: 1px solid #3e6172; border-radius: 22px; background: linear-gradient(120deg,#193648,#112536); }
.feature-card-reverse { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.feature-card-reverse .feature-copy { order: 2; }
.feature-card-reverse figure { order: 1; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(25px,4vw,56px); }
.feature-number { color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.feature-copy h3 { max-width: 13ch; margin: 15px 0 13px; font-size: clamp(28px,3.4vw,46px); line-height: 1.04; letter-spacing: -.045em; }
.feature-copy p { max-width: 45ch; margin: 0; color: #c9d9e1; font-size: 16px; line-height: 1.6; }
.feature-tag { margin-top: 25px; padding: 8px 12px; border: 1px solid #608276; border-radius: 99px; color: #d6f7ac; font-size: 12px; font-weight: 800; }
.feature-card figure { min-width: 0; min-height: 100%; margin: 0; }
.feature-card img { display: block; width: 100%; height: 100%; min-height: 365px; object-fit: cover; }
.landing-finale { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: clamp(30px,5vw,70px); padding: 70px 0 85px; }
.landing-finale-copy p { max-width: 51ch; }
.landing-finale-copy .button { margin-top: 25px; }
.moment-preview { position: relative; min-height: 370px; overflow: hidden; padding: 24px; border: 1px solid #77a661; border-radius: 22px; background: radial-gradient(circle at 22% 20%,#1f4551,#102536 60%,#0a1827); box-shadow: 0 25px 65px #0006; }
.moment-preview::before, .moment-preview::after { content: "✦"; position: absolute; color: #baf26d; font-size: 42px; opacity: .7; }
.moment-preview::before { top: 26%; left: 17%; animation: moment-spark 2.3s ease-in-out infinite; }
.moment-preview::after { right: 16%; bottom: 22%; color: #ffca68; animation: moment-spark 2.3s ease-in-out 1.15s infinite; }
.moment-top, .moment-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #bed3dd; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.moment-top > span:first-child { display: flex; align-items: center; gap: 8px; color: #d8ffb9; }
.moment-score { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; gap: 9px; margin: 35px 0 27px; text-align: center; }
.moment-score > div { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 15px 0; border: 1px solid #476675; border-radius: 14px; background: #152f40; }
.moment-score small { color: #bed3dd; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.moment-score strong { color: var(--accent); font-size: clamp(60px,7vw,104px); line-height: .9; letter-spacing: -.08em; }
.moment-score > div:last-child strong { color: #fff; }
.moment-ball { display: block; width: 54px; height: 54px; border: 5px solid #294a2a; border-radius: 50%; background: radial-gradient(circle at 35% 28%,#e2ff82,#b3e84d 70%); box-shadow: 0 0 35px #baf26d66; animation: moment-ball 2.3s ease-in-out infinite; }
.moment-call { position: relative; z-index: 1; margin-bottom: 30px; padding: 13px; border: 1px solid #baf26d; border-radius: 10px; background: #a7e65f; color: #102638; font-size: 16px; font-weight: 1000; text-align: center; letter-spacing: .05em; }
.moment-call span { color: #326449; }
.moment-bottom { padding-top: 16px; border-top: 1px solid #476675; }
.moment-bottom b { margin-left: 7px; color: #fff; font-size: 18px; }
.landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0 40px; border-top: 1px solid #365668; color: var(--muted); font-size: 12px; }
@keyframes moment-ball { 0%,100% { transform: translateX(-10px) rotate(-20deg); } 50% { transform: translateX(10px) rotate(20deg); } }
@keyframes moment-spark { 0%,100% { opacity: .25; transform: scale(.65) rotate(-20deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
@media (max-width: 960px) {
  .landing-hero { grid-template-columns: minmax(0,1fr) minmax(290px,.72fr); gap: 25px; }
  .benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .benefit-card { min-height: 245px; }
  .guide-item img { height: 145px; }
  .scoreboard-card-layout { grid-template-columns: 1fr; }
  .scoreboard-card-visual img { max-height: 380px; }
}
@media (max-width: 700px) {
  .landing-shell { width: calc(100% - 28px); }
  .landing-header { padding: 20px 0; }
  .landing-header .landing-logo-lockup { width: 94px; height: 91px; padding: 3px; border-radius: 14px; }
  .landing-hero { grid-template-areas: "copy" "auth" "visual"; grid-template-columns: 1fr; gap: 0; padding: 21px 0 55px; }
  .landing-hero h1 { font-size: clamp(49px,12vw,78px); }
  .landing-hero-visual { margin-top: 25px; }
  .landing-auth { padding-top: 20px; }
  .landing-benefits { padding: 50px 0 48px; }
  .benefit-grid { gap: 10px; }
  .benefit-card { min-height: 0; padding: 21px; }
  .benefit-icon { margin-bottom: 0; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-item { display: grid; grid-template-columns: 42% minmax(0,1fr); align-items: stretch; }
  .guide-item img { height: 100%; min-height: 140px; }
  .guide-copy { align-self: center; padding: 15px; }
  .landing-features { padding-top: 25px; }
  .feature-card, .feature-card-reverse { grid-template-columns: 1fr; }
  .feature-card-reverse .feature-copy, .feature-card-reverse figure { order: initial; }
  .feature-copy { padding: 30px; }
  .feature-card img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .landing-finale { grid-template-columns: 1fr; padding: 55px 0; }
  .theme-dialog-body { padding: 18px; }
  .landing-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 430px) {
  .landing-pills { gap: 6px; }
  .landing-pills span { font-size: 10px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-card { min-height: 0; }
  .guide-item { grid-template-columns: 37% minmax(0,1fr); }
  .guide-item img { min-height: 155px; }
  .guide-copy h3 { font-size: 17px; }
  .guide-copy p { font-size: 13px; }
  .landing-hero-visual figcaption { font-size: 10px; }
  .feature-copy { padding: 25px; }
  .moment-preview { min-height: 315px; padding: 15px; }
  .moment-score { grid-template-columns: 1fr 42px 1fr; gap: 4px; margin: 28px 0 23px; }
  .moment-ball { width: 40px; height: 40px; }
  .moment-score strong { font-size: 58px; }
  .moment-call { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .moment-ball, .moment-preview::before, .moment-preview::after { animation: none; } }
.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.admin-form-grid label{display:grid;gap:7px;color:#d8e9f3;font-weight:700;font-size:.9rem}
.admin-form-grid input,.admin-content-editor textarea,.admin-content-editor select{width:100%;min-width:0;border:1px solid #426176;border-radius:9px;background:#0c2030;color:#f8fbff;padding:12px;font:inherit}
.admin-form-actions{display:flex;align-items:end;flex-wrap:wrap;gap:10px}
.admin-content-editor{display:grid;gap:12px;margin-top:16px}
.admin-content-editor textarea{min-height:180px;resize:vertical;line-height:1.5}
.legal-body{white-space:pre-wrap;line-height:1.7;color:var(--muted)}
.marketing-table-wrap{overflow-x:auto;margin-top:18px}
.marketing-table{width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
.marketing-table th,.marketing-table td{padding:12px;border-bottom:1px solid var(--line)}
.marketing-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
@media(max-width:620px){.admin-form-grid{grid-template-columns:1fr}}

/* Compact dashboard preview: match actions stay visible on small screens. */
body[data-page="dashboard"] .dashboard-shell{width:min(1050px,calc(100% - 32px));padding-top:25px}
body[data-page="dashboard"] .dashboard-head{align-items:center;margin-bottom:18px}
body[data-page="dashboard"] .dashboard-head h1{font-size:clamp(28px,4vw,39px);line-height:1.08;margin:8px 0 0}
body[data-page="dashboard"] .head-actions .button,
body[data-page="dashboard"] .head-actions button{min-height:38px;padding:8px 12px;font-size:12px}
.compact-dashboard{display:grid;gap:10px}
.compact-score-card{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px 22px;padding:22px;border-color:#759c71;background:linear-gradient(130deg,#193a3c,#112a39 60%,#102434)}
.compact-card-title{display:flex;align-items:start;justify-content:space-between;gap:14px;min-width:0}
.compact-card-title h2{font-size:clamp(23px,3vw,30px);margin:6px 0 3px}
.compact-card-title p{font-size:14px}
.compact-score-visual{grid-column:2;grid-row:1 / span 3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;align-self:center;min-height:122px;padding:12px;border:1px solid #5e857e;border-radius:12px;background:#0a1b28;box-shadow:0 12px 24px #0004;text-align:center}
.compact-score-visual span{display:grid;gap:5px;color:#a9d0cf;font-size:9px;font-weight:900;letter-spacing:.07em;white-space:nowrap}
.compact-score-visual b{color:#fff;font-size:32px;line-height:1}
.compact-score-visual i{display:grid;gap:4px;color:var(--accent);font-size:14px;font-style:normal;font-weight:900;white-space:nowrap}
.compact-score-visual small{font-size:8px;color:#8eadae;letter-spacing:.1em}
.compact-main-action{justify-self:start;width:max-content;margin:0}
.compact-quick-actions{display:flex;flex-wrap:wrap;gap:8px}
.compact-quick-actions button{min-height:38px;padding:7px 11px;font-size:12px}
.compact-score-card .link-management{grid-column:1 / -1;margin:0}
.compact-score-card .text-button{font-size:11px;min-height:21px}
.compact-history-link,.compact-guide{padding:14px 17px;border-radius:13px;background:#112939;box-shadow:none}
.compact-history-link{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;color:var(--text);text-decoration:none}
.compact-history-link:hover,.compact-guide:hover{border-color:#6e9584;background:#173447}
.compact-history-link strong,.compact-guide strong{display:block;font-size:15px}
.compact-history-link small,.compact-guide small{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:400}
.compact-history-icon,.compact-guide-symbol{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#baf26d18;color:var(--accent);font-size:21px;font-weight:700}
.compact-chevron{color:var(--accent);font-size:20px}
.compact-guide{display:block}
.compact-guide summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;cursor:pointer;list-style:none}
.compact-guide summary::-webkit-details-marker{display:none}
.compact-guide[open] summary{padding-bottom:12px;border-bottom:1px solid var(--line)}
.compact-guide-symbol svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.guide-chevron{transition:transform .2s ease}
.compact-guide[open] .guide-chevron{transform:rotate(180deg)}
.guide-carousel{overflow:hidden;margin-top:14px}
.guide-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;scroll-behavior:smooth}
.guide-track::-webkit-scrollbar{display:none}
.guide-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;padding:5px 3px 2px;display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;align-items:start}
.guide-step-label{grid-column:2;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em}
.guide-illustration{grid-column:1;grid-row:1 / span 3;display:grid;place-items:center;width:60px;height:60px;border:1px solid #baf26d4d;border-radius:16px;background:#baf26d12;color:var(--accent)}
.guide-illustration svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.guide-slide h3{margin:5px 0 4px;font-size:16px}
.guide-slide p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.guide-controls{display:flex;align-items:center;gap:10px;margin:14px 3px 0;padding-top:11px;border-top:1px solid #ffffff19;color:var(--muted);font-size:11px;font-weight:800}
.guide-arrow{width:34px;min-height:34px;padding:4px;border-radius:9px}
.guide-arrow:disabled{opacity:.4;cursor:default;transform:none}
.guide-dots{display:flex;align-items:center;gap:6px;margin-left:auto}
.guide-dots button{width:8px;min-width:8px;height:8px;min-height:8px;padding:0;border:0;border-radius:50%;background:#718693;transition:width .2s ease,background .2s ease}
.guide-dots button[aria-current="step"]{width:19px;border-radius:9px;background:var(--accent)}
@media(prefers-reduced-motion:reduce){.guide-track{scroll-behavior:auto}.guide-chevron,.guide-dots button{transition:none}}
@media(max-width:700px){
 body[data-page="dashboard"] .dashboard-shell{width:calc(100% - 24px);padding-top:max(14px,env(safe-area-inset-top))}
 body[data-page="dashboard"] .dashboard-head{flex-direction:row;align-items:center;gap:10px;margin-bottom:14px}
 body[data-page="dashboard"] .dashboard-head .eyebrow{font-size:10px}
 body[data-page="dashboard"] .dashboard-head h1{font-size:clamp(22px,6.4vw,29px)}
 body[data-page="dashboard"] .head-actions{width:auto;flex:0 0 auto;gap:5px;justify-content:flex-end}
 body[data-page="dashboard"] .head-actions>*{flex:none}
 body[data-page="dashboard"] .head-actions button,body[data-page="dashboard"] .head-actions .button{min-height:34px;padding:6px 8px;font-size:11px}
 .compact-score-card{grid-template-columns:minmax(0,1fr);gap:10px;padding:15px}
 .compact-card-title h2{font-size:24px}
 .compact-card-title p{font-size:12px}
 .compact-score-visual{grid-column:1;grid-row:auto;min-height:69px;padding:8px 12px}
 .compact-score-visual b{font-size:25px}
 .compact-main-action{width:100%}
 .compact-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .compact-quick-actions button{min-width:0;padding:7px 5px;font-size:11px}
 .compact-score-card .link-management{grid-column:1}
}
@media(max-width:390px){
 body[data-page="dashboard"] .dashboard-head{flex-direction:column;align-items:stretch}
 body[data-page="dashboard"] .head-actions{width:100%;justify-content:flex-start}
 body[data-page="dashboard"] .head-actions .button,body[data-page="dashboard"] .head-actions button{font-size:10px;padding:6px}
}

/* The photo gives the dashboard an immediate sense of the match without adding a tall hero. */
body[data-page="dashboard"] .dashboard-head{
 position:relative;isolation:isolate;overflow:hidden;min-height:174px;padding:19px 22px;
 align-items:flex-end;border:1px solid #947958;border-radius:16px;
 background:#173448 url("/images/dashboard-action-banner.png?v=action-1") center 48%/cover no-repeat;
 box-shadow:0 15px 38px #0003;
}
body[data-page="dashboard"] .dashboard-head::before{
 content:"";position:absolute;inset:0;z-index:0;
 background:linear-gradient(90deg,#122129a8 0%,#12212954 43%,#12212912 100%);
}
body[data-page="dashboard"] .dashboard-head>*{position:relative;z-index:1}
body[data-page="dashboard"] .dashboard-head-copy{min-width:0}
body[data-page="dashboard"] .dashboard-head h1{margin:8px 0 0;color:#fff;text-shadow:0 2px 16px #001d2b}
body[data-page="dashboard"] .dashboard-head p{margin:5px 0 0;color:#e2eef1;font-size:13px;text-shadow:0 1px 9px #001d2b}
body[data-page="dashboard"] .head-actions{align-self:flex-start}
body[data-page="dashboard"] .head-actions .button,
body[data-page="dashboard"] .head-actions button{background:#0b2739e6;backdrop-filter:blur(8px)}
@media(min-width:701px){body[data-page="dashboard"] .dashboard-head{min-height:194px;background-position:center 51%}}
@media(max-width:700px){
 body[data-page="dashboard"] .dashboard-head{min-height:146px;padding:13px 14px;align-items:flex-end;background-position:56% 50%}
 body[data-page="dashboard"] .dashboard-head::before{background:linear-gradient(90deg,#122129b8 0%,#12212957 45%,#1221290f 100%)}
 body[data-page="dashboard"] .dashboard-head p{font-size:11px}
 body[data-page="dashboard"] .head-actions .button,body[data-page="dashboard"] .head-actions button{min-height:32px}
}
@media(max-width:390px){
 body[data-page="dashboard"] .dashboard-head{flex-direction:column-reverse;justify-content:space-between;align-items:stretch}
 body[data-page="dashboard"] .head-actions{align-self:flex-end;width:auto;justify-content:flex-end}
}

/* A shared sunrise-court backdrop keeps the signed-in pages visually connected. */
body[data-page="dashboard"] .compact-score-card{background:linear-gradient(130deg,#193a3cdb,#112a39db 60%,#102434db)}
body[data-page="dashboard"] .compact-history-link,
body[data-page="dashboard"] .compact-guide{background:#112939d9}
body[data-page="admin"] .dashboard-card{background:linear-gradient(150deg,#1b3447e8,#0f2131eb 70%)}
body[data-page="history"] .panel{background:#102537e8}
@media(max-width:700px){body::before{background-position:90% center}}
.guide-court-illustration svg{width:min(100%,240px);height:auto;overflow:visible}.guide-court-illustration rect,.guide-court-illustration path{fill:none;stroke:rgba(205,230,246,.75);stroke-width:2}.guide-court-illustration .serve-route{stroke:#b7f36c;stroke-width:3;stroke-dasharray:5 4}.guide-court-illustration .serve-origin{fill:#b7f36c}.guide-court-illustration .serve-target{fill:#102433;stroke:#b7f36c;stroke-width:3}.guide-terms{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.guide-terms span{padding:8px;border:1px solid rgba(176,210,232,.2);border-radius:10px;background:rgba(8,22,34,.28);font-size:.78rem}.guide-terms strong{display:block;color:#b7f36c;margin-bottom:3px}@media(max-width:600px){.guide-terms{grid-template-columns:1fr}.guide-terms span{display:flex;gap:6px;align-items:baseline}.guide-terms strong{min-width:78px}}

/* Compact rotating Padel knowledge tile on the dashboard */
.knowledge-card{grid-column:1/-1;display:grid;gap:11px;padding:15px 18px;border-color:#567767;background:linear-gradient(115deg,#16363bdf,#102637e8)}
.knowledge-head{display:flex;align-items:center;gap:10px;min-width:0}.knowledge-symbol{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid #baf26d4d;border-radius:11px;background:#baf26d12;color:var(--accent)}.knowledge-symbol svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.knowledge-head .eyebrow{color:var(--accent);font-size:9px;letter-spacing:.14em}.knowledge-head h2{margin:2px 0 0;font-size:17px}.knowledge-count{margin-left:auto;padding:5px 8px;border:1px solid #baf26d42;border-radius:99px;color:var(--accent);font-size:10px;font-weight:900;white-space:nowrap}
.knowledge-fact{padding-left:46px}.knowledge-topic{display:inline-block;color:#a9c2c6;font-size:8px;font-weight:900;letter-spacing:.13em}.knowledge-fact h3{margin:3px 0;font-size:16px}.knowledge-fact p{max-width:850px;margin:0;color:#d0dfe2;font-size:13px;line-height:1.5}.knowledge-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-left:46px}.knowledge-footer>span{color:#9fb6bd;font-size:10px}.knowledge-footer button{min-height:32px;padding:6px 10px;font-size:11px}.knowledge-sources{display:flex;gap:13px;padding-left:46px}.knowledge-sources a{color:#a9c6c8;font-size:10px;text-decoration:underline;text-underline-offset:3px}.knowledge-sources a:hover{color:var(--accent)}
@media(max-width:700px){.knowledge-card{gap:9px;padding:13px}.knowledge-fact,.knowledge-footer,.knowledge-sources{padding-left:0}.knowledge-fact h3{font-size:15px}.knowledge-fact p{font-size:12px}.knowledge-footer>span{font-size:9px}.knowledge-sources{gap:11px}.knowledge-sources a{font-size:9px}}
@media(max-width:360px){.knowledge-footer{align-items:flex-start;flex-direction:column}.knowledge-count{font-size:9px}}

/* Dashboard: compact personal match panel and two-step start flow. */
body[data-page="dashboard"] .compact-score-card{grid-template-columns:minmax(0,1fr) minmax(175px,27%);grid-template-rows:auto auto auto;align-items:center;gap:9px 18px;padding:15px 18px}
body[data-page="dashboard"] .compact-card-title{grid-column:1/-1;align-items:center}
.dashboard-settings-button{flex:0 0 auto;min-height:34px;padding:6px 10px;font-size:11px}
.compact-score-devices{grid-column:2;grid-row:2;width:100%;height:clamp(92px,11vw,142px);object-fit:contain;border:1px solid #ffffff27;border-radius:10px;background:#091a2588}
.scoreboard-workflow{grid-column:1;grid-row:2;display:grid;gap:7px;min-width:0}
.scoreboard-workflow-step{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px}
.workflow-number{display:grid;place-items:center;width:27px;height:27px;border:1px solid #baf26d55;border-radius:50%;color:var(--accent);font-size:10px;font-weight:900}
.scoreboard-workflow-step>button,.scoreboard-workflow-step>.button{justify-self:stretch;width:100%;min-height:35px;padding:6px 10px;font-size:11px}
.workflow-device-status{grid-column:2;color:#cff5a3;font-size:11px;font-weight:800}
.optional-invite-link{grid-column:1/-1;justify-self:start;min-height:25px;padding:3px 0;border:0;background:transparent;color:#bdd0d5;font-size:11px;font-weight:700;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dashboard-nav{gap:7px;align-items:center}.top-nav-link{padding:7px 10px;color:#e1ecee;font-size:12px;font-weight:800;text-decoration:none}.top-nav-link:hover{color:var(--accent)}
.top-nav-button{display:inline-flex;align-items:center;justify-content:center;min-height:35px;padding:6px 10px;border:1px solid #557486;border-radius:10px;background:#193648;color:#eff6f7;font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}.top-nav-button:hover{border-color:var(--accent);color:var(--accent)}
.personal-menu{position:relative}.personal-menu summary{display:flex;align-items:center;gap:7px;min-height:35px;padding:6px 10px;border:1px solid #557486;border-radius:10px;background:#193648;color:#eff6f7;font-size:11px;font-weight:800;list-style:none;cursor:pointer}.personal-menu summary::-webkit-details-marker{display:none}.personal-menu[open] summary{border-color:var(--accent)}
.personal-menu-panel{position:absolute;z-index:30;top:calc(100% + 7px);right:0;display:grid;min-width:190px;gap:6px;padding:9px;border:1px solid #4b6b7a;border-radius:12px;background:#102637f5;box-shadow:0 14px 34px #0007}.personal-menu-panel button,.personal-menu-panel a{display:block;min-height:34px;padding:8px 10px;border:1px solid #4b6b7a;border-radius:8px;background:#193648;color:#f4f8fa;font-size:11px;font-weight:800;text-align:left;text-decoration:none}
.personal-menu-panel .account-logout{border-color:#755a5a;background:#38282d;color:#ffe4e0}
.remote-setup-dialog{width:min(94vw,820px)}
.remote-setup-option{width:100%;color:var(--text);text-align:left;cursor:pointer}
.remote-setup-option .button{pointer-events:none}
.remote-setup-option:hover{border-color:var(--accent);background:#142d3d}
.watch-setup-steps{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);gap:20px;align-items:center;margin:18px 0}
.watch-setup-steps[hidden]{display:none}
.watch-setup-steps>img{display:block;width:100%;max-height:250px;object-fit:cover;border:1px solid #4b6b7a;border-radius:13px}
.watch-setup-steps h3{margin:5px 0 9px;font-size:21px}
.watch-setup-steps ol,.spectator-setup-body ol{padding-left:20px;color:#d0e0e6;font-size:13px;line-height:1.55}
.watch-setup-steps li,.spectator-setup-body li{margin:5px 0}
.watch-setup-steps .button,.watch-setup-steps .secondary{min-height:38px;margin:4px 5px 4px 0;padding:8px 12px;font-size:12px}
.watch-always-on-tip{margin:9px 0 0!important;color:var(--muted)!important;font-size:12px}
.watch-back-button{display:block;margin-top:8px;color:var(--muted);font-size:12px}
.watch-pin-result{display:grid;gap:4px;margin-top:12px;padding:13px;border:1px solid #baf26d6b;border-radius:12px;background:#baf26d12}
.watch-pin-result strong{color:var(--accent);font-size:clamp(30px,7vw,44px);letter-spacing:.2em;font-variant-numeric:tabular-nums}
.watch-pin-result span{overflow-wrap:anywhere;color:#fff;font-weight:800}
.watch-pin-result small{color:var(--muted)}
.watch-complete-step{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(180px,1fr) auto;align-items:end;gap:12px;padding:16px;border:1px solid #baf26d66;border-radius:13px;background:#baf26d0b}
.watch-complete-step[hidden]{display:none}
.watch-complete-step label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:800}
.watch-complete-step input{width:100%;min-height:39px;padding:9px 11px;border:1px solid #4d6b7b;border-radius:9px;background:#0d2232;color:var(--text)}
.watch-complete-step .button{min-height:39px;padding:8px 12px;font-size:12px}
.watch-connected-copy{display:grid;gap:4px;align-content:center}.watch-connected-copy strong{color:var(--accent);font-size:16px}.watch-connected-copy small{color:var(--muted);font-size:11px}
.spectator-setup-dialog{width:min(94vw,780px)}
.spectator-setup-body{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,1.1fr);gap:20px;align-items:center;padding:23px 25px 26px}
.spectator-setup-body>img{width:100%;height:230px;object-fit:cover;border:1px solid #4b6b7a;border-radius:13px}
.spectator-setup-body p{margin:0;color:#d0e0e6;line-height:1.5}
.spectator-setup-body ol{margin:12px 0 18px}
.spectator-setup-body .button{font-size:13px}
.link-settings-section{margin:0 25px 24px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#102536}
.link-settings-section h3{margin:0 0 4px;font-size:17px}
.link-settings-section>p{margin:0;color:var(--muted);font-size:12px}
.link-settings-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.link-settings-actions button{min-height:36px;padding:7px 11px;font-size:11px}
.watch-pin-shell{width:min(100% - 24px,500px);min-height:100dvh;margin:auto;display:grid;place-items:center;padding:20px 0}
.watch-pin-card{width:100%;padding:clamp(22px,6vw,34px);border:1px solid #4f6e7f;border-radius:20px;background:#102637ed;box-shadow:0 20px 70px #0006}
.watch-pin-card h1{margin:12px 0 7px;font-size:clamp(29px,8vw,40px)}
.watch-pin-card>p{color:var(--muted);font-size:14px;line-height:1.5}
.watch-pin-card form{display:grid;gap:9px;margin:21px 0 0}
.watch-pin-card form label{font-size:12px;font-weight:800}
.watch-pin-card input{min-height:55px;padding:10px 14px;border:1px solid #557486;border-radius:12px;background:#091a27;color:#fff;font-size:30px;font-weight:900;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.watch-pin-card small{display:block;margin-top:15px;color:#9fb5c3;font-size:11px;line-height:1.5}
@media(max-width:700px){
 body[data-page="dashboard"] .compact-score-card{grid-template-columns:minmax(0,1fr) 110px;grid-template-rows:auto auto auto;padding:13px;gap:8px 12px}
 body[data-page="dashboard"] .compact-card-title{grid-column:1/-1;align-items:flex-start}
 .compact-score-devices{grid-column:2;grid-row:2;width:110px;height:76px}
 .scoreboard-workflow{grid-column:1;grid-row:2;gap:6px}
 .scoreboard-workflow-step{grid-template-columns:22px minmax(0,1fr);gap:6px}.workflow-number{width:20px;height:20px;font-size:8px}
 .optional-invite-link{grid-row:3;grid-column:1/-1}
 .watch-setup-steps,.spectator-setup-body{grid-template-columns:1fr;gap:13px}
 .watch-setup-steps>img,.spectator-setup-body>img{height:clamp(135px,48vw,220px);max-height:none}
 .spectator-setup-body{padding:18px}
 .link-settings-section{margin:0 18px 18px}
}
@media(max-width:560px){.watch-complete-step{grid-template-columns:1fr}.watch-complete-step .button{width:100%}.link-settings-actions{display:grid}.link-settings-actions button{width:100%}}
.feedback-admin-list{display:grid;gap:10px}.feedback-report{padding:13px;border:1px solid #345267;border-radius:12px;background:#0f2635}.feedback-report-head{display:flex;justify-content:space-between;gap:10px;align-items:start}.feedback-report-head strong{font-size:13px}.feedback-report-meta{margin:4px 0;color:#a9c0c9;font-size:11px}.feedback-report-description{margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.feedback-report-error{margin:6px 0;padding:8px;border-radius:7px;background:#081923;color:#ffc2a8;font:11px/1.45 ui-monospace,monospace;overflow-wrap:anywhere}.feedback-report-actions{display:flex;gap:7px;align-items:center}.feedback-report-actions select,.feedback-report-actions button{min-height:32px;padding:5px 8px;border:1px solid #476577;border-radius:7px;background:#163346;color:#fff;font-size:11px}

/* Distinct, easy-to-find spectator action and a visual three-step feature tour. */
body[data-page="dashboard"] .compact-score-card{position:relative;overflow:hidden;background:linear-gradient(115deg,#16373ce8 0%,#112d3be8 60%,#102435ed 100%);box-shadow:0 16px 36px #00142144}
body[data-page="dashboard"] .compact-score-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#baf26d,transparent 70%)}
body[data-page="dashboard"] .compact-score-card>*{position:relative;z-index:1}
.scoreboard-card-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-top:1px}
.spectator-invite-button,.feature-tour-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 13px;border:1px solid #91c56b;border-radius:10px;background:linear-gradient(120deg,#baf26d,#9fe45b);color:#10202a;font-size:12px;font-weight:900;cursor:pointer}
.spectator-invite-button span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#122938;color:#baf26d;font-size:14px}
.feature-tour-button{border-color:#547486;background:#173649;color:#f1f7f8}
.feature-tour-button span{color:var(--accent);font-size:16px}
.feature-tour-dialog{width:min(94vw,760px)}
.feature-tour-content{padding:18px 22px 22px}
.feature-tour-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;scroll-behavior:smooth}
.feature-tour-track::-webkit-scrollbar{display:none}
.feature-tour-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;align-items:center;scroll-snap-align:start}
.feature-tour-slide img{display:block;width:100%;height:clamp(190px,32vw,270px);object-fit:cover;border:1px solid #496979;border-radius:14px;background:#0a1b28}
.feature-tour-slide>div{padding:8px 2px}
.feature-tour-slide .eyebrow{color:var(--accent);font-size:10px;letter-spacing:.14em}
.feature-tour-slide h3{margin:8px 0;font-size:clamp(20px,3vw,27px);line-height:1.1}
.feature-tour-slide p{margin:0;color:#c3d6dc;font-size:14px;line-height:1.55}
.feature-tour-controls{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid #ffffff1c;color:#b5c8ce;font-size:11px;font-weight:800}
.feature-tour-arrow{width:36px;min-height:36px;padding:5px}
.feature-tour-arrow:disabled{opacity:.4;cursor:default}
.feature-tour-dots{display:flex;gap:7px;margin-left:auto}
.feature-tour-dots button{width:8px;min-width:8px;height:8px;min-height:8px;padding:0;border:0;border-radius:9px;background:#718693}
.feature-tour-dots button[aria-current="step"]{width:20px;background:var(--accent)}
@media(prefers-reduced-motion:reduce){.feature-tour-track{scroll-behavior:auto}}
@media(max-width:700px){
 body[data-page="dashboard"] .dashboard-head{background-position:center 48%}
 .dashboard-nav .top-nav-button,.dashboard-nav .personal-menu summary{min-height:32px;padding:6px 8px;font-size:10px}
 .scoreboard-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .spectator-invite-button,.feature-tour-button{min-height:36px;padding:7px 8px;font-size:11px}
 .feature-tour-content{padding:13px 14px 16px}
 .feature-tour-slide{grid-template-columns:1fr;gap:12px}
 .feature-tour-slide img{height:clamp(150px,48vw,230px)}
 .feature-tour-slide>div{padding:0 2px}
 .feature-tour-slide h3{margin:5px 0;font-size:20px}
 .feature-tour-slide p{font-size:13px}
}

/* Compact visual feature tiles for Watch, court scoreboard, and spectators. */
body[data-page="dashboard"] .compact-dashboard{display:grid;gap:12px}
.dashboard-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.dashboard-feature-tile{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;min-height:228px;padding:20px;border:1px solid #6b8c87;border-radius:18px;background:#102536;box-shadow:0 14px 32px #00142144}
.dashboard-feature-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#071823ed 0%,#0b1f2bd9 44%,#0b1d2bbd 100%),linear-gradient(0deg,#071823c9,transparent 72%)}
.dashboard-feature-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 47%;opacity:.87}
.dashboard-feature-watch{border-color:#9bc96f}
.dashboard-feature-watch::after{background:linear-gradient(90deg,#071823f0 0%,#0b1f2be3 42%,#0b1d2bc5 100%),linear-gradient(0deg,#071823d9,transparent 78%)}
.dashboard-feature-copy{align-self:end;min-width:0;max-width:100%}
.dashboard-feature-copy .eyebrow{display:block;margin-bottom:7px;color:var(--accent);font-size:9px;letter-spacing:.14em}
.dashboard-feature-copy h2{margin:0 0 5px;font-size:clamp(20px,2.2vw,27px);line-height:1.08}
.dashboard-feature-copy p{max-width:29ch;margin:0;color:#d2e0e4;font-size:12px;line-height:1.4}
.dashboard-feature-copy .workflow-device-status{display:inline-block;margin-top:8px;padding:4px 7px;border:1px solid #baf26d66;border-radius:999px;background:#0d2634c9;color:#d5ffa8;font-size:10px}
.dashboard-feature-actions{display:grid;align-content:end;gap:7px;min-width:114px}
.dashboard-feature-actions .button,.dashboard-feature-actions .secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;margin:0;padding:7px 10px;font-size:10px;text-align:center;text-decoration:none;white-space:nowrap}
.dashboard-feature-actions .button{background:linear-gradient(120deg,#baf26d,#9fe45b);color:#10202a}
.dashboard-feature-actions .secondary{border-color:#718b98;background:#122b3bd9;color:#f1f7f8}
@media(max-width:900px){
 .dashboard-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dashboard-feature-watch{grid-column:1/-1;min-height:190px}
 .dashboard-feature-scoreboard,.dashboard-feature-spectator{min-height:205px}
}
@media(max-width:600px){
 .dashboard-feature-grid{grid-template-columns:minmax(0,1fr);gap:9px}
 .dashboard-feature-watch,.dashboard-feature-scoreboard,.dashboard-feature-spectator{grid-column:auto;min-height:155px;padding:15px;border-radius:14px;gap:8px}
 .dashboard-feature-tile::after{background:linear-gradient(90deg,#071823f2 0%,#0b1f2bdf 48%,#0b1d2bc5 100%),linear-gradient(0deg,#071823c9,transparent 80%)}
 .dashboard-feature-copy .eyebrow{margin-bottom:5px;font-size:8px}
 .dashboard-feature-copy h2{font-size:20px}
 .dashboard-feature-copy p{max-width:23ch;font-size:10px}
 .dashboard-feature-actions{min-width:104px;gap:5px}
 .dashboard-feature-actions .button,.dashboard-feature-actions .secondary{min-height:32px;padding:6px 8px;font-size:9px}
}
@media(max-width:360px){
 .dashboard-feature-tile{grid-template-columns:minmax(0,1fr) 96px;padding:12px;gap:7px}
 .dashboard-feature-actions{min-width:96px}
 .dashboard-feature-copy p{font-size:9px}
}

/* Dashboard brand header, feature tiles and FAQ. */
body[data-page="dashboard"] .dashboard-head{display:grid;grid-template-columns:minmax(150px,1fr) auto;align-items:center;gap:16px;min-height:160px;padding:12px 20px;margin-bottom:17px}
body[data-page="dashboard"] .dashboard-brand{display:flex;align-items:center;justify-content:flex-start;width:max-content;max-width:100%;min-width:0;padding:8px 12px;border:1px solid #ffffffaa;border-radius:18px;background:linear-gradient(145deg,#fffef0e8,#f4ffe7d9);box-shadow:0 8px 28px #00111a55,0 0 0 5px #ffffff12;backdrop-filter:blur(5px)}
body[data-page="dashboard"] .dashboard-brand img{display:block;width:min(100%,220px);max-height:150px;object-fit:contain;filter:drop-shadow(0 3px 12px #00111a88)}
body[data-page="dashboard"] .dashboard-head-meta{display:grid;justify-items:end;gap:9px;min-width:0}
body[data-page="dashboard"] .dashboard-welcome{margin:0;color:#eef8f7;font-size:14px;text-align:right;text-shadow:0 1px 8px #001d2b}
body[data-page="dashboard"] .dashboard-welcome strong{color:var(--accent)}
body[data-page="dashboard"] .dashboard-head .dashboard-nav{align-self:auto;width:auto;max-width:100%}
body[data-page="dashboard"] .dashboard-feature-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:15px;min-height:220px;padding:18px}
body[data-page="dashboard"] .dashboard-feature-copy{align-self:flex-start}
body[data-page="dashboard"] .dashboard-feature-copy h2{font-size:clamp(18px,1.8vw,23px);overflow-wrap:anywhere}
body[data-page="dashboard"] .dashboard-feature-copy p{font-size:12px}
body[data-page="dashboard"] .dashboard-feature-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:8px;width:100%;min-width:0}
body[data-page="dashboard"] .dashboard-feature-actions .button,body[data-page="dashboard"] .dashboard-feature-actions .secondary{min-height:38px;max-width:100%;padding:8px 10px;font-size:11px;white-space:normal;line-height:1.2}
body[data-page="dashboard"] .dashboard-feature-watch .dashboard-feature-actions{display:grid;grid-template-columns:minmax(0,1fr)}
body[data-page="dashboard"] .dashboard-feature-watch .dashboard-feature-actions>*{width:100%}
body[data-page="dashboard"] .dashboard-feature-spectator .dashboard-feature-actions{margin-top:auto}
.remote-favorites-dialog{width:min(94vw,720px)}
.remote-favorites-dialog .account-settings-section{padding-top:20px}
.remote-favorite-swatch.remote-favorite-afterglow{background:linear-gradient(145deg,#302236 0 48%,#ffd17c 49% 67%,#f493b4 68%);border-color:#e9a16f}
.remote-favorite-swatch.remote-favorite-clubhouse{background:linear-gradient(145deg,#132820 0 48%,#e6c979 49% 67%,#f5f0df 68%);border-color:#c2a35d}
.remote-favorite-swatch.remote-favorite-rose-rally{background:linear-gradient(145deg,#34233b 0 48%,#ffa4c5 49% 67%,#f5d9e5 68%);border-color:#ed9cbb}
.supporter-account-section{border:1px solid #a5c978;border-radius:14px;background:#15352f88}
.supporter-code-form{display:flex;align-items:end;gap:9px;flex-wrap:wrap}
.supporter-code-form label{flex:1 1 220px}
.supporter-code-form input{text-transform:uppercase;letter-spacing:.08em}
.supporter-code-form button{min-height:42px}
.supporter-status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #a5c978;border-radius:99px;color:#c9f38b;font-size:11px;font-weight:900}
.admin-supporter-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.admin-supporter-form .admin-form-actions{grid-column:1/-1}
.supporter-created-code{margin:12px 0;padding:12px;border:1px solid #a5c978;border-radius:12px;background:#14332c;color:#eef8e4;font-weight:800;overflow-wrap:anywhere}
.supporter-code-list{display:grid;gap:8px;margin-top:14px}
.supporter-code-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid #ffffff24;border-radius:10px;background:#0d2433aa}
.supporter-code-row small{display:block;color:#b7cbd4}
.google-login-area{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px;text-align:center;color:var(--muted);font-size:12px}
.google-login-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 14px;border:1px solid #8093a0;border-radius:10px;background:#f7f8fa;color:#1d2630;font-weight:800;text-decoration:none}
.google-login-button:hover{background:#fff;transform:translateY(-1px)}
.google-login-button b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285f4;font-size:17px;font-family:Arial,sans-serif}
.google-redirect-list{overflow-wrap:anywhere;color:#c5d8df;font-size:12px;line-height:1.65}
@media(max-width:600px){.admin-supporter-form{grid-template-columns:1fr}.supporter-code-row{align-items:flex-start;flex-direction:column}}

/* Shared branded header for authenticated pages. */
body[data-page="admin"] .auth-page-banner{
 position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
 min-height:160px;margin-bottom:18px;padding:14px 18px;overflow:visible;z-index:20;
 border:1px solid #947958;border-radius:17px;
 background:#173448 url("/images/dashboard-action-banner.png?v=action-1") center 48%/cover no-repeat;
 box-shadow:0 15px 38px #0003;
}
body[data-page="admin"] .auth-page-banner::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(90deg,#122129c9 0%,#12212978 48%,#1221293b 100%)}
body[data-page="admin"] .auth-page-banner>*{position:relative;z-index:1}
body[data-page="admin"] .auth-banner-brand{display:flex;align-items:center;justify-content:center;width:118px;min-height:112px;padding:7px 9px;border:1px solid #ffffffb0;border-radius:16px;background:linear-gradient(145deg,#fffef0e8,#f4ffe7d9);box-shadow:0 8px 24px #00111a55;text-decoration:none}
body[data-page="admin"] .auth-banner-brand img{display:block;width:100%;max-height:104px;object-fit:contain;filter:drop-shadow(0 3px 10px #00111a88)}
body[data-page="admin"] .auth-banner-copy h1{margin:7px 0 0;color:#fff;font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:-.045em;text-shadow:0 2px 16px #001d2b}
body[data-page="admin"] .auth-banner-meta{display:grid;justify-items:end;gap:8px;align-self:start}
body[data-page="admin"] .auth-banner-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
body[data-page="admin"] .auth-banner-actions>*{min-height:35px;padding:7px 10px;background:#0b2739e6;backdrop-filter:blur(8px);font-size:11px}
body[data-page="admin"] .auth-banner-welcome{margin:0;color:#eaf4f5;font-size:12px;text-align:right;text-shadow:0 1px 8px #001d2b}
body[data-page="admin"] .auth-banner-welcome strong{color:var(--accent)}
body[data-page="admin"] .smtp-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
body[data-page="admin"] .smtp-profile-card{min-width:0;padding:15px;border:1px solid #426176;border-radius:13px;background:#0b2030aa}
body[data-page="admin"] .smtp-profile-card h3{margin:0 0 5px;font-size:16px}
body[data-page="admin"] .smtp-profile-card>p{margin:0 0 10px;color:var(--muted);font-size:12px}
body[data-page="admin"] .smtp-profile-card .admin-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:8px}
body[data-page="admin"] .smtp-profile-card .admin-form-grid label{font-size:12px}
body[data-page="admin"] .smtp-profile-card .admin-form-grid input{padding:9px;font-size:12px}
body[data-page="admin"] .smtp-profile-card .admin-form-actions{grid-column:1/-1}
body[data-page="admin"] .smtp-profile-card>small{display:block;margin-top:7px;color:#bfd2d9;font-size:11px;line-height:1.4}
@media(max-width:700px){
 body[data-page="admin"] .auth-page-banner{grid-template-columns:66px minmax(0,1fr);gap:9px;min-height:0;padding:10px;border-radius:14px}
 body[data-page="admin"] .auth-banner-brand{grid-column:1;grid-row:1;width:60px;min-height:60px;padding:4px;border-radius:12px}
 body[data-page="admin"] .auth-banner-brand img{max-height:54px}
 body[data-page="admin"] .auth-banner-copy{grid-column:2;grid-row:1}
 body[data-page="admin"] .auth-banner-copy h1{font-size:clamp(23px,6vw,32px)}
 body[data-page="admin"] .auth-banner-meta{grid-column:1/-1;grid-row:2;width:100%;justify-items:end}
 body[data-page="admin"] .auth-banner-actions{gap:5px}
 body[data-page="admin"] .auth-banner-actions>*{min-height:31px;padding:5px 8px;font-size:10px}
 body[data-page="admin"] .smtp-profile-grid{grid-template-columns:1fr}
}
.watch-link-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.watch-link-actions .button,.watch-link-actions .secondary{margin:0!important}
body[data-page="faq"] .faq-shell{width:min(980px,calc(100% - 36px));margin:0 auto;padding:30px 0 70px;position:relative;z-index:1}
.faq-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding:15px 18px;border:1px solid #6d8b8a;border-radius:16px;background:#10283cdd;backdrop-filter:blur(10px)}
.faq-brand{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:900;letter-spacing:.08em;text-decoration:none}
.faq-brand img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 2px 8px #00111a88)}
.faq-header-actions{display:flex;gap:8px;flex-wrap:wrap}
.faq-hero,.faq-group{border:1px solid #496476;border-radius:17px;background:#102537e8;box-shadow:0 14px 32px #00142144;backdrop-filter:blur(10px)}
.faq-hero{padding:24px;margin-bottom:13px}
.faq-hero h1{margin:5px 0 7px;font-size:clamp(28px,5vw,42px);letter-spacing:-.04em}
.faq-hero p{margin:0;color:var(--muted);line-height:1.55}
.faq-group{padding:18px;margin:12px 0}
.faq-group h2{margin:0 0 11px;font-size:19px}
.faq-item{border-top:1px solid #ffffff1b}
.faq-item:first-of-type{border-top:0}
.faq-item summary{position:relative;display:flex;align-items:center;gap:10px;padding:14px 30px 14px 2px;color:var(--text);font-weight:800;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:3px;color:var(--accent);font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:focus-visible,.faq-header a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.faq-answer{padding:0 24px 13px 2px;color:#c7d9df;font-size:14px;line-height:1.65}
.faq-answer p{margin:0 0 8px}
.faq-answer a{color:#c8f38c;text-underline-offset:3px}
.faq-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:15px 3px;color:var(--muted);font-size:12px}
.faq-footer nav{display:flex;gap:12px;flex-wrap:wrap}
.faq-footer a{color:#d2e5e7;text-underline-offset:3px}
@media(max-width:700px){
 body[data-page="dashboard"] .dashboard-head{grid-template-columns:92px minmax(0,1fr);min-height:126px;padding:10px 12px;gap:8px}
 body[data-page="dashboard"] .dashboard-brand img{width:92px;max-height:105px}
 body[data-page="dashboard"] .dashboard-head-meta{gap:7px}
 body[data-page="dashboard"] .dashboard-head .dashboard-nav{gap:5px;flex-wrap:wrap;justify-content:flex-end}
 body[data-page="dashboard"] .dashboard-nav .top-nav-button,body[data-page="dashboard"] .personal-menu summary{min-height:31px;padding:5px 7px;font-size:10px}
 body[data-page="dashboard"] .dashboard-head .personal-menu{flex:0 0 auto}
 body[data-page="dashboard"] .dashboard-welcome{font-size:12px}
 body[data-page="dashboard"] .dashboard-feature-grid{grid-template-columns:minmax(0,1fr);gap:9px}
 body[data-page="dashboard"] .dashboard-feature-tile{min-height:145px;padding:14px;border-radius:14px;gap:10px}
 body[data-page="dashboard"] .dashboard-feature-copy h2{font-size:20px}
 body[data-page="dashboard"] .dashboard-feature-copy p{max-width:38ch;font-size:11px}
 body[data-page="dashboard"] .dashboard-feature-actions{display:flex;gap:7px}
 body[data-page="dashboard"] .dashboard-feature-actions .button,body[data-page="dashboard"] .dashboard-feature-actions .secondary{min-height:36px;font-size:10px}
 body[data-page="dashboard"] .dashboard-feature-watch .dashboard-feature-actions{grid-template-columns:minmax(0,1fr) auto}
 body[data-page="dashboard"] .dashboard-feature-watch .dashboard-feature-actions>*{width:auto}
 .faq-shell{width:calc(100% - 24px)!important;padding-top:max(15px,env(safe-area-inset-top))!important}
 .faq-header{padding:10px 12px}
 .faq-brand{font-size:12px;gap:7px}
 .faq-brand img{width:48px;height:48px}
 .faq-header-actions{gap:5px}
 .faq-header-actions .top-nav-button{min-height:32px;padding:5px 8px;font-size:10px}
 .faq-hero,.faq-group{padding:15px;border-radius:14px}
 .faq-answer{font-size:13px}
}
@media(max-width:390px){body[data-page="dashboard"] .dashboard-head{flex-direction:unset;align-items:center}body[data-page="dashboard"] .dashboard-feature-watch .dashboard-feature-actions{grid-template-columns:1fr}body[data-page="dashboard"] .dashboard-feature-watch .dashboard-feature-actions>*{width:100%}}

/* Keep the account menu above the feature cards instead of clipping it inside the banner. */
body[data-page="dashboard"] .dashboard-head.auth-page-banner{overflow:visible;z-index:60}
body[data-page="dashboard"] .dashboard-head-meta{position:relative;z-index:80}
body[data-page="dashboard"] .personal-menu{z-index:100}
body[data-page="dashboard"] .personal-menu-panel{z-index:120}