:root {
  color-scheme: dark;
  --bg: #05070a;
  --panel: #0f172a;
  --panel-strong: #1e293b;
  --line: #334155;
  --line-strong: #475569;
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #ffcc33;
  --accent-strong: #ffe066;
  --teal: #33d6ff;
  --green: #22c55e;
  --danger: #ff3333;
  --input: #1e293b;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 0;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
}

.page-shell {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 28px;
  width: min(1480px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 28px 0 50px;
}

.lynx-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-bottom: 4px;
}

.lynx-header > div:last-child {
  min-width: 0;
}

.lynx-header-copy {
  min-width: 0;
}

.portal-language-switch {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 23, 42, .62);
}

.portal-language-switch .portal-language-option {
  width: auto;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.portal-language-switch .portal-language-option:hover,
.portal-language-switch .portal-language-option.active {
  border-color: var(--accent);
  background: rgba(255, 204, 51, .12);
  color: var(--accent);
}

.brand {
  color: var(--text);
  font-size: 54px;
  font-weight: 950;
  line-height: .9;
  letter-spacing: 0;
}

.divider {
  width: 5px;
  height: 46px;
  border-radius: 5px;
  background: var(--accent);
}

.subtitle {
  min-width: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: normal;
}

.header-note {
  min-width: 0;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview {
  position: sticky;
  top: 18px;
  align-self: start;
  display: grid;
  gap: 22px;
  min-width: 0;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}

.logo {
  display: none;
  width: min(220px, 100%);
  height: auto;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 36px;
  line-height: .95;
  overflow-wrap: anywhere;
}

h2 {
  font-size: 24px;
  line-height: 1.1;
}

.overview-copy p:last-child {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.service-list {
  display: grid;
  gap: 10px;
}

.service-list div,
.summary-box {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.service-list span,
.summary-box span,
.summary-box small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.service-list strong,
.summary-box strong {
  font-size: 15px;
  line-height: 1.3;
}

.summary-box {
  border-color: rgba(244, 197, 66, .55);
}

.summary-box small {
  text-transform: none;
  line-height: 1.35;
}

.registration-area {
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.account-access-panel,
.account-session-panel {
  display: grid;
  gap: 18px;
  padding: 28px;
  border-bottom: 1px solid var(--line);
}

.account-session-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.auth-form {
  gap: 0;
}

.auth-actions,
.account-actions,
.mini-actions,
.service-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.auth-actions {
  align-self: end;
}

.auth-actions > *,
.account-actions > *,
.mini-actions > * {
  flex: 1 1 160px;
}

.auth-secondary-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.link-button {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.link-button:hover {
  color: var(--accent-strong);
  transform: none;
}

.link-button:disabled {
  opacity: .55;
  cursor: progress;
}

.reset-page-shell {
  grid-template-columns: minmax(320px, 760px);
  justify-content: center;
}

.reset-registration-area {
  width: 100%;
}

.reset-password-panel {
  border-bottom: 0;
}

.reset-password-panel h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 4vw, 48px);
  line-height: .95;
}

.reset-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.registration-gate {
  display: grid;
}

.form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--line);
}

.profile-summary-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  margin: 18px 28px 0;
  padding: 16px;
  border: 1px solid rgba(51, 214, 255, .45);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.profile-summary-card > div {
  min-width: 0;
}

.profile-summary-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.profile-summary-card p:last-child {
  margin: 8px 0 0;
  line-height: 1.45;
}

form {
  display: grid;
  gap: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 26px 28px;
  border: 0;
  border-bottom: 1px solid var(--line);
}

legend {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

legend + * {
  clear: both;
}

.field-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.field-grid:last-child {
  margin-bottom: 0;
}

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

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

.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-grid.address {
  grid-template-columns: minmax(220px, 2fr) minmax(100px, .7fr) minmax(160px, 1fr) minmax(100px, .6fr);
}

.field-grid.compact {
  margin-top: 14px;
}

label {
  display: grid;
  gap: 9px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

input,
select {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--input);
  color: var(--text);
  padding: 13px 14px;
  outline: none;
  font-weight: 700;
}

select {
  cursor: pointer;
}

input:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(51, 214, 255, .18);
}

input::placeholder {
  color: rgba(183, 185, 168, .62);
}

.website-code {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.plan-option {
  cursor: pointer;
}

.plan-option > input[type="radio"] {
  position: absolute;
  width: 1px;
  min-height: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.plan-option > span {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 218px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.plan-option > span > strong {
  color: var(--text);
  font-size: 16px;
}

.plan-option > span > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: none;
}

.plan-option > input[type="radio"]:checked + span {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(244, 197, 66, .45);
}

.plan-card-fields {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.plan-field {
  display: grid;
  gap: 5px;
}

.plan-field > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.plan-field input,
.plan-field select {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.plan-field input:disabled {
  opacity: .62;
  cursor: not-allowed;
  pointer-events: none;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.module-grid label,
.check-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
  color: var(--text);
  text-transform: none;
}

.check-line {
  justify-content: space-between;
}

.check-line-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.module-grid input,
.check-line input,
.check-line-label input {
  flex: 0 0 auto;
  width: 20px;
  min-height: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.module-grid span,
.check-line span,
.check-line-label span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 850;
}

.legal-detail-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 12px;
  border-color: rgba(255, 204, 51, .58);
  border-radius: 10px;
  background: rgba(255, 204, 51, .08);
  color: var(--accent);
  font-size: 12px;
  box-shadow: none;
  white-space: nowrap;
}

.legal-detail-button:hover {
  border-color: var(--accent);
  background: rgba(255, 204, 51, .14);
}

.check-line + .check-line {
  margin-top: 10px;
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px 28px;
}

.status {
  flex: 1 1 260px;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.status:empty {
  display: none;
}

.status.error {
  color: var(--danger);
}

.status.ok {
  color: var(--green);
}

button {
  appearance: none;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  background: var(--accent);
  color: #08111f;
  cursor: pointer;
  font-weight: 950;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 14px;
  padding: 14px 18px;
  background: var(--accent);
  color: #08111f;
  font-weight: 950;
  text-decoration: none;
}

button:hover,
.button-link:hover {
  background: var(--accent-strong);
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  background: var(--panel-strong);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

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

button:disabled {
  cursor: progress;
  opacity: .56;
}

dialog {
  width: min(520px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
}

.legal-details-dialog {
  width: min(760px, calc(100vw - 28px));
}

.cancel-configuration-dialog {
  width: min(520px, calc(100vw - 28px));
}

.cancel-configuration-dialog .dialog-actions .danger-service-button {
  background: transparent;
}

.cancel-configuration-dialog .dialog-actions .danger-service-button:hover {
  background: rgba(255, 51, 85, .12);
  color: #ff3355;
}

dialog::backdrop {
  background: rgba(0, 0, 0, .72);
}

.dialog-content {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.dialog-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.legal-details-content {
  gap: 14px;
}

.legal-details-body {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.legal-detail-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(30, 41, 59, .68);
}

.legal-detail-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #05070a;
  font-size: 12px;
  font-weight: 950;
}

dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

dl div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

dd {
  margin: 0;
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 16px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dialog-actions > * {
  flex: 1 1 180px;
}

.dashboard-page {
  background: var(--bg);
}

.client-shell {
  width: min(1320px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 22px 0 44px;
}

.client-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 14px;
}

.client-header-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-header-copy .eyebrow {
  margin: 0;
}

.client-header-copy h1 {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.05;
}

.client-header-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.client-header-meta .client-status-value {
  color: var(--accent);
  font-weight: 950;
}

.client-header-meta .client-status-value.active {
  color: var(--green);
}

.client-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.compact-button,
a.compact-button,
button.compact-button {
  width: auto;
  min-height: 36px;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.client-logo {
  display: none;
  width: min(220px, 100%);
  height: auto;
  margin-bottom: 18px;
}

.client-status-card,
.dashboard-panel {
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .28);
}

.client-status-card {
  display: grid;
  gap: 6px;
  padding: 18px;
}

.client-status-card .mini-actions {
  margin-top: 10px;
}

.client-status-card span,
.client-status-card small,
.metric-row span,
.facts-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.client-status-card strong {
  color: var(--accent);
  font-size: 22px;
  line-height: 1.1;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-grid.lower {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.dashboard-panel {
  min-width: 0;
  padding: 16px;
}

.dashboard-panel h2 {
  font-size: 21px;
  line-height: 1.1;
}

.dashboard-panel .eyebrow {
  margin-bottom: 4px;
}

.muted-text {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.dashboard-panel .muted-text {
  margin-top: 5px;
  font-size: 14px;
}

.error-panel {
  display: grid;
  gap: 14px;
}

.hero-panel {
  display: grid;
  align-content: start;
  gap: 24px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.metric-row div,
.facts-list div,
.module-status-grid div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.metric-row strong,
.facts-list dd {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.timeline-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.timeline-list article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.timeline-list span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #08111f;
  font-weight: 950;
}

.timeline-list strong {
  display: block;
  margin-bottom: 4px;
}

.timeline-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.module-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.module-status-grid div.enabled {
  border-color: rgba(84, 209, 122, .5);
}

.module-status-grid div.disabled {
  opacity: .58;
}

.module-status-grid span,
.module-status-grid strong {
  display: block;
}

.module-status-grid span {
  color: var(--text);
  font-weight: 900;
}

.module-status-grid strong {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.roadbook-pro-panel,
.service-wallet-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  align-content: stretch;
}

.compact-heading {
  display: block;
}

.dashboard-grid.lower .service-wallet-panel .compact-heading h2 {
  display: flex;
  align-items: flex-end;
  min-height: 2.1em;
}

.roadbook-pro-wallet,
.service-wallet {
  display: grid;
  gap: 10px;
  align-content: start;
  margin-top: 0;
}

.roadbook-pro-status,
.service-wallet-status {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 132px;
  padding: 14px;
  border: 1px solid rgba(255, 204, 51, .55);
  border-radius: 14px;
  background: rgba(30, 41, 59, .72);
}

.roadbook-pro-status.disabled,
.service-wallet-status.disabled {
  border-color: var(--line);
  opacity: .7;
}

.service-wallet-status.exhausted {
  border-color: rgba(148, 163, 184, .65);
}

.roadbook-pro-status span,
.roadbook-pro-facts span,
.service-wallet-status span,
.service-wallet-facts span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.roadbook-pro-status strong,
.service-wallet-status strong {
  color: var(--accent);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 950;
  line-height: .9;
  overflow-wrap: anywhere;
}

.service-wallet-status strong.text-value {
  font-size: clamp(28px, 3vw, 42px);
  line-height: .98;
}

.service-wallet-status .service-wallet-value-label {
  color: var(--text);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.service-wallet-rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-wallet-rows li {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.service-wallet-rows strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.service-wallet-rows span {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.service-wallet-rows small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.roadbook-pro-status small,
.service-wallet-status small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.roadbook-pro-facts,
.service-wallet-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(76px, auto);
  gap: 10px;
}

.roadbook-pro-facts div,
.service-wallet-facts div {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.roadbook-pro-facts strong,
.service-wallet-facts strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.facts-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

.facts-list dd {
  margin-left: 0;
}

.active-configurations-panel,
.account-services-panel,
.wallets-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

/* Griglia wallet dentro il pannello "I tuoi acquisti": colonne alla stessa altezza. */
.wallet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.wallet-grid .service-wallet-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15, 23, 42, .45);
}

.wallet-grid .service-wallet-panel h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.wallet-grid .service-wallet {
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}

.service-wallet-compact-list {
  display: grid;
  gap: 8px;
}

.service-wallet-compact-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  opacity: .85;
}

.service-wallet-compact-row strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.service-wallet-compact-row span {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-wallet-compact-row p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.services-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

#purchaseHistory {
  min-width: 0;
}

.active-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.active-configurations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.active-configuration-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 204, 51, .5);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.active-configuration-card.tracking {
  border-color: rgba(34, 197, 94, .58);
}

.active-configuration-card.complete {
  border-color: rgba(167, 139, 250, .58);
}

.active-configuration-card.empty {
  border-color: var(--line);
  opacity: .82;
}

.active-configuration-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.active-configuration-head span,
.active-configuration-meta span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.active-configuration-head strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.active-configuration-head em {
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--green);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.active-configuration-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.active-configuration-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(15, 23, 42, .5);
}

.active-configuration-meta .delete-date-chip {
  color: var(--accent);
  border-color: rgba(255, 204, 51, .55);
  background: rgba(255, 204, 51, .08);
}

.active-configuration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.active-configuration-actions .service-button {
  flex: 1 1 130px;
}

.danger-service-button {
  border-color: #ff3355;
  color: #ff3355;
  background: transparent;
}

.danger-service-button:hover {
  background: rgba(255, 51, 85, .12);
}

.active-configuration-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

/* Stati evento: Programmato (blu), In corso (verde), Concluso (grigio). */
.active-configuration-head em.configuration-status-pill.scheduled {
  color: #60a5fa;
  background: rgba(96, 165, 250, .1);
}

.active-configuration-head em.configuration-status-pill.live {
  color: var(--green);
  background: rgba(34, 197, 94, .1);
}

.active-configuration-head em.configuration-status-pill.concluded {
  color: var(--muted);
  background: rgba(148, 163, 184, .1);
}

.active-configuration-head em.configuration-status-pill.removed {
  color: var(--danger);
  background: rgba(255, 51, 51, .1);
}

.primary-service-button,
a.primary-service-button {
  background: var(--accent);
  color: #08111f;
}

.primary-service-button:hover,
a.primary-service-button:hover {
  background: var(--accent-strong);
  color: #08111f;
}

.active-configuration-card .configuration-note {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 23, 42, .5);
  color: #cbd5e1;
}

.active-configuration-card .configuration-feedback {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
}

.active-configuration-card .configuration-feedback.ok {
  border-color: rgba(34, 197, 94, .6);
  color: var(--green);
}

.active-configuration-card .configuration-feedback.error {
  border-color: rgba(255, 51, 51, .6);
  color: var(--danger);
}

.active-configuration-card .configuration-feedback.pending {
  border-color: rgba(255, 204, 51, .55);
  color: var(--accent);
}

.service-reasons {
  display: grid;
  gap: 6px;
}

.service-reasons p {
  margin: 0;
  padding: 9px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.service-next-steps {
  display: grid;
  gap: 8px;
}

.service-next-steps-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.service-next-steps-list article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.service-next-steps-list strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.service-next-steps-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.dashboard-notice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(34, 197, 94, .6);
  border-radius: 12px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.dashboard-notice.error {
  border-color: rgba(255, 51, 51, .6);
  color: var(--danger);
}

.active-configuration-card .configuration-id {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  opacity: .7;
  overflow-wrap: anywhere;
}

.account-service-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.account-service-card.active {
  border-color: rgba(34, 197, 94, .65);
}

.account-service-card.pending {
  border-color: rgba(255, 204, 51, .6);
}

.account-service-card.exhausted {
  border-color: rgba(148, 163, 184, .65);
}

.account-service-card.disabled {
  opacity: .58;
}

.service-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.service-card-head strong {
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.service-card-head span {
  flex: 0 0 auto;
  max-width: 128px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.account-service-card.active .service-card-head span {
  color: var(--green);
}

.account-service-card.pending .service-card-head span {
  color: var(--accent);
}

.account-service-card.exhausted .service-card-head span {
  color: var(--muted);
}

.account-service-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.account-service-card p strong {
  color: var(--text);
  font-weight: 950;
}

.services-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 11px 14px;
  color: var(--accent);
  font-weight: 950;
  line-height: 1.15;
  overflow: hidden;
  overflow-wrap: normal;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

button.service-button {
  background: var(--accent);
  color: #08111f;
}

button.service-button.danger-service-button,
.active-configuration-actions .danger-service-button {
  border: 1px solid #ff3355;
  color: #ff3355;
  background: transparent;
}

button.service-button.danger-service-button:hover {
  background: rgba(255, 51, 85, .12);
}

button.service-button:hover {
  background: var(--accent-strong);
  color: #08111f;
}

.disabled-link {
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
}

.account-list {
  display: grid;
  gap: 14px;
}

.account-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.account-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.account-card-head strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.account-card-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.current-subscription-banner {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .72);
}

.current-subscription-banner.active {
  border-color: rgba(34, 197, 94, .48);
}

.current-subscription-banner.pending {
  border-color: rgba(255, 204, 51, .52);
}

.subscription-dashboard-link {
  display: grid;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.subscription-dashboard-link:hover .subscription-main strong,
.history-actions a:hover {
  color: var(--accent);
}

.subscription-main {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.subscription-main strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 950;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.subscription-main p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.subscription-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.subscription-metrics div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15, 23, 42, .55);
}

.subscription-metrics span,
.purchase-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.subscription-metrics strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.purchase-history-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.purchase-history-panel > * {
  min-width: 0;
  max-width: 100%;
}

.new-purchase-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}

/* La tessera del RoadBook Builder in cima all'account: tutta cliccabile. */
.account-builder-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  color: inherit;
  text-decoration: none;
  border: 2px solid #facc15;
}
.account-builder-tile:hover { border-color: #eab308; }
.account-builder-icon { flex: none; display: flex; }
.account-builder-copy { flex: 1; display: grid; gap: 4px; min-width: 0; }
.account-builder-copy strong { font-size: 18px; }
.account-builder-open { flex: none; }
@media (max-width: 520px) {
  .account-builder-tile { flex-wrap: wrap; }
  .account-builder-open { width: 100%; text-align: center; }
}

.account-cloud-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.account-mail-logo-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.account-mail-logo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Il riquadro e' bianco perche' bianco e' il fondo della mail: un logo con lo
   sfondo trasparente qui si vede come lo vedra' il pilota. */
.account-mail-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 96px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  text-align: center;
}

.account-mail-logo-preview img {
  display: block;
  max-width: 220px;
  max-height: 96px;
}

.account-mail-logo-actions {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
  min-width: 220px;
}

/* La riga di spiegazione tiene larga la colonna e i pulsanti la seguivano
   fino a diventare due strisce: qui si ferma. */
.account-mail-logo-actions .muted-text {
  max-width: 320px;
  margin: 2px 0 0;
}

@media (max-width: 640px) {
  .account-mail-logo-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Dispositivi collegati: una riga per dispositivo, nome e dettagli a sinistra
   e Rimuovi a destra; sullo stretto il pulsante va a capo sotto i dettagli. */
.account-devices-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.account-devices-list {
  display: grid;
  gap: 10px;
}

.account-device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-strong);
}

.account-device-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-device-copy strong {
  overflow-wrap: anywhere;
}

.account-device-copy small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}

/* Nel dialogo dell'avviso il nome del dispositivo e quello dell'evento sono
   righe loro, in evidenza: la frase intorno resta nel colore attenuato. */
.dialog-content .account-device-remove-name,
.dialog-content .account-device-remove-events {
  color: var(--text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.dialog-content .account-device-remove-events:empty {
  display: none;
}

.account-current-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  border-color: rgba(34, 197, 94, .65);
}

.account-current-event.scheduled {
  border-color: rgba(96, 165, 250, .65);
}

.account-current-event-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.account-current-event .eyebrow.live {
  color: var(--green);
}

.account-current-event .eyebrow.scheduled {
  color: #60a5fa;
}

.account-current-event h2 {
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.account-current-event p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.account-current-event .service-actions {
  flex: 0 0 auto;
}

.purchase-table td small.purchase-ref {
  font-size: 11px;
  opacity: .85;
}

.purchase-table td small.purchase-linked-event {
  display: block;
  margin-top: 5px;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
}

/* Il colore dell'evento citato dice subito se e' ancora aperto: verde in corso o
   programmato, giallo concluso, rosso cancellato, sostituito o eliminato. */
.purchase-table td small.purchase-linked-event.concluded {
  color: var(--accent);
}

.purchase-table td small.purchase-linked-event.removed {
  color: var(--danger);
}

.account-cloud-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.account-cloud-heading h2 {
  line-height: 1.15;
}

.account-cloud-status {
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}

.account-cloud-status.active {
  color: var(--green);
}

.account-cloud-status.over {
  color: var(--danger);
}

.account-cloud-progress {
  width: 100%;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #020617;
}

.account-cloud-progress span {
  display: block;
  width: 0;
  min-width: 8px;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.account-cloud-detail {
  margin: 0;
  color: #cbd5e1;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.purchase-heading .service-button {
  flex: 0 0 auto;
}

.purchase-heading-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
}

.dashboard-live-button:not(.disabled-link) {
  border-color: rgba(34, 197, 94, .95);
  color: #22c55e;
  background: rgba(34, 197, 94, .12);
}

.dashboard-live-button:not(.disabled-link):hover {
  background: rgba(34, 197, 94, .2);
}

.purchase-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.purchase-option-card {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-width: 0;
  min-height: 205px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .68);
}

.purchase-option-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.purchase-option-copy span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.purchase-option-copy strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.purchase-option-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.cloud-tier-grid {
  display: grid;
  gap: 10px;
}

.cloud-tier-option {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(30, 41, 59, .72);
  color: var(--text);
  text-align: left;
}

.cloud-tier-option:hover {
  border-color: var(--accent);
  background: rgba(51, 65, 85, .78);
}

.cloud-tier-option span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.cloud-tier-option strong {
  font-size: 22px;
  line-height: 1.05;
}

.cloud-tier-option small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.purchase-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.purchase-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: fixed;
  background: rgba(15, 23, 42, .48);
}

.purchase-col-date {
  width: 10%;
}

.purchase-col-client {
  width: 11%;
}

.purchase-col-services {
  width: 16%;
}

.purchase-col-details {
  width: 25%;
}

.purchase-col-price {
  width: 10%;
}

.purchase-col-status {
  width: 9%;
}

.purchase-col-actions {
  width: 9%;
}

.purchase-table th,
.purchase-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 10px 11px;
  text-align: left;
  vertical-align: top;
}

.purchase-table th:last-child,
.purchase-table td:last-child {
  border-right: 0;
}

.purchase-table tbody tr:last-child td {
  border-bottom: 0;
}

.purchase-table tbody tr:hover {
  background: rgba(255, 204, 51, .05);
}

.purchase-table td {
  color: var(--text);
  font-size: clamp(12px, .92vw, 13px);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
}

.purchase-table td strong,
.purchase-table td small {
  display: block;
}

.purchase-table td small {
  margin-top: 5px;
  color: var(--muted);
  font-size: clamp(10.5px, .8vw, 11.5px);
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: normal;
}

.purchase-table td small:empty {
  display: none;
}

.purchase-table td strong {
  overflow-wrap: anywhere;
  word-break: normal;
}

.compact-history-cell,
.purchase-details-cell {
  white-space: normal;
}

.purchase-details-cell {
  overflow-wrap: anywhere;
}

.history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-actions a,
.history-actions span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

.history-actions span {
  color: var(--muted);
}

.account-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

.purchase-table td .account-pill + small {
  margin-top: 7px;
}

.account-pill.active {
  color: var(--green);
}

.account-pill.full {
  color: var(--accent);
}

.account-pill.concluded {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .purchase-history-panel .purchase-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .purchase-history-panel .purchase-table,
  .purchase-history-panel .purchase-table colgroup,
  .purchase-history-panel .purchase-table thead,
  .purchase-history-panel .purchase-table tbody,
  .purchase-history-panel .purchase-table tr,
  .purchase-history-panel .purchase-table td {
    display: block;
  }

  .purchase-history-panel .purchase-table {
    min-width: 0;
    background: transparent;
  }

  .purchase-history-panel .purchase-table colgroup,
  .purchase-history-panel .purchase-table thead {
    display: none;
  }

  .purchase-history-panel .purchase-table tbody {
    display: grid;
    gap: 12px;
  }

  .purchase-history-panel .purchase-table tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(15, 23, 42, .52);
  }

  .purchase-history-panel .purchase-table tbody tr:hover {
    background: rgba(15, 23, 42, .52);
  }

  .purchase-history-panel .purchase-table td {
    display: grid;
    grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr);
    gap: 12px;
    border-right: 0;
    padding: 12px;
    font-size: 13px;
  }

  .purchase-history-panel .purchase-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    line-height: 1.15;
    text-transform: uppercase;
  }

  .purchase-history-panel .purchase-table td > * {
    min-width: 0;
  }

  .purchase-history-panel .history-actions {
    justify-content: flex-start;
  }

  .purchase-history-panel .purchase-table td.purchase-price-unset {
    display: none;
  }
}

@media (max-width: 520px) {
  .purchase-history-panel .purchase-table td {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .purchase-history-panel .history-actions {
    display: grid;
  }
}

.compact-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-link-row {
  margin-top: 2px;
}

.admin-shell {
  gap: 18px;
  width: min(1560px, calc(100vw - 32px));
}

.admin-login-panel {
  max-width: 560px;
}

.admin-login-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.admin-login-form label {
  display: grid;
  gap: 7px;
}

.admin-login-form span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-products-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.admin-products-panel > * {
  min-width: 0;
  max-width: 100%;
}

.admin-products-panel form > * {
  min-width: 0;
  max-width: 100%;
}

.admin-policy-layout {
  display: grid;
  grid-template-columns: minmax(560px, 0.42fr) minmax(390px, 0.29fr) minmax(440px, 0.29fr);
  column-gap: 24px;
  row-gap: 10px;
  align-items: start;
  margin-top: 4px;
  padding: 18px 22px 22px;
  border: 2px solid #31425c;
  border-radius: 16px;
  background: #0f1729;
  box-shadow: inset 0 1px 0 rgba(215, 227, 241, .08);
  overflow-x: auto;
}

.admin-policy-sheet {
  min-width: 0;
}

.tracking-policy-sheet {
  grid-column: 1;
  grid-row: 1 / 3;
}

.admin-policy-sheet h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: uppercase;
}

.app-policy-panel {
  display: contents;
}

.app-policy-panel > h3 {
  grid-column: 2 / 4;
  grid-row: 1;
}

.app-feature-policy-form {
  display: contents;
}

.tracking-policy-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 78px 58px;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  max-width: 626px;
}

.tracking-policy-row {
  display: contents;
}

.tracking-policy-row span,
.tracking-policy-row small,
.tracking-policy-form input {
  min-height: 28px;
  border-bottom: 1px solid rgba(51, 65, 85, .55);
}

.tracking-policy-row span {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
}

.tracking-policy-row small {
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.tracking-policy-form input,
.app-policy-row input[type="number"],
.app-policy-row input[type="date"] {
  width: 100%;
  min-height: 28px;
  border: 1px solid rgba(71, 85, 105, .75);
  border-radius: 4px;
  background: rgba(7, 14, 26, .5);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 6px;
}

.tracking-policy-form input {
  text-align: center;
}

.tracking-policy-save-button {
  background: var(--accent);
  color: #08111f;
}

.tracking-policy-save-button:hover {
  background: var(--accent-strong);
  color: #08111f;
}

.tracking-policy-form .tracking-policy-save-button {
  grid-column: 2 / 4;
  justify-self: stretch;
  min-height: 32px;
  margin-top: 18px;
  border-radius: 0;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
}

.tracking-policy-form .status {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.app-policy-grid {
  display: contents;
}

.app-policy-columns {
  display: contents;
}

.app-policy-column {
  min-width: 0;
}

.app-policy-free-column {
  grid-column: 1;
  grid-row: 3;
  width: min(100%, 460px);
}

.app-policy-promo-column {
  grid-column: 2;
  grid-row: 3;
}

.app-policy-admin-column {
  grid-column: 3;
  grid-row: 3;
}

.app-policy-column-heading {
  display: flex;
  align-items: center;
  min-height: 24px;
  border-bottom: 1px solid rgba(51, 65, 85, .55);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

/* La terza colonna ha l'interruttore nel titolo: "Blocca APK non Play". */
.app-policy-install-heading {
  gap: 10px;
  cursor: pointer;
}

.app-policy-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-height: 28px;
  border-bottom: 1px solid rgba(51, 65, 85, .55);
}

/* La regola generale degli input mette 52 di altezza minima: senza toglierla
   ogni riga con la casella era alta il doppio delle altre. */
.app-policy-row input[type="checkbox"],
.app-policy-install-heading input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
}

.app-policy-row span {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-policy-row small {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.app-policy-subsection-heading {
  margin-top: 12px;
  padding: 9px 0 6px;
  border-top: 1px solid rgba(255, 204, 0, .5);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.app-policy-subscription-detail-row {
  grid-template-columns: minmax(0, 1fr) 76px;
}

/* Marco, 13/10/2026: "in admin ingrandisci" le spiegazioni sotto FREE e
   TRIAL: dicono le regole, e a 11 punti non si leggevano. */
.app-policy-help {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.app-policy-row input[type="number"] {
  text-align: center;
}

.app-policy-promo-window {
  display: grid;
  grid-column: 2 / 4;
  grid-row: 2;
  grid-template-columns: minmax(360px, 1fr) 150px 150px;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(51, 65, 85, .72);
  border-radius: 8px;
  background: rgba(15, 23, 42, .48);
}

.app-policy-promo-window strong,
.app-policy-promo-window span {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.app-policy-promo-window small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.app-policy-promo-window label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.app-policy-number-row,
.app-policy-cloud-row,
.app-policy-trial-row {
  grid-template-columns: 22px minmax(190px, 1fr) 52px 66px;
}

.app-policy-cloud-row {
  min-height: 44px;
  color: var(--muted);
}

.app-policy-trial-row {
  margin-top: 8px;
}

.app-policy-mobile-install-row {
  margin-top: 0;
}

.app-policy-mobile-install-detail-row {
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.2fr);
  column-gap: 10px;
  min-height: 38px;
}

.app-policy-mobile-install-detail-row input {
  min-width: 0;
}

.app-policy-mobile-install-detail-row.app-policy-short-number-row {
  grid-template-columns: minmax(220px, 1fr) 76px;
}

.app-policy-short-number-row span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-policy-short-number-row input.app-policy-short-number-input {
  justify-self: end;
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  text-align: center;
}

.app-policy-date-heading-row,
.app-policy-date-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 10px;
  padding-left: 32px;
}

.app-policy-date-heading-row {
  min-height: 24px;
  border-bottom: 0;
}

.app-policy-date-heading-row span {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
}

.app-policy-date-row {
  border-bottom: 0;
}

.app-policy-date-row input[type="date"] {
  min-width: 0;
}

.app-policy-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px;
  align-items: center;
  column-gap: 10px;
  min-height: 32px;
  margin-top: 8px;
  padding-left: 32px;
}

.app-policy-actions .status {
  display: block;
  margin: 0;
}

.app-policy-actions .status:empty::before {
  content: "";
}

.app-policy-save-button {
  grid-column: 2;
  justify-self: end;
  width: 196px;
  min-height: 32px;
  border-radius: 0;
  padding: 6px 10px;
  background: var(--accent);
  color: #08111f;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-policy-save-button:hover {
  background: var(--accent-strong);
  color: #08111f;
}

@media (max-width: 1180px) {
  .admin-policy-layout {
    grid-template-columns: minmax(560px, 0.42fr) minmax(390px, 0.29fr) minmax(440px, 0.29fr);
  }
}

.admin-compact-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(7, 14, 26, 0.56);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  padding: 8px 10px;
}

.admin-compact-input:focus {
  border-color: var(--accent);
  outline: none;
}

.store-catalog-export-button {
  min-height: 44px;
  border-color: var(--line-strong);
  color: var(--text);
  padding: 11px 16px;
  text-decoration: none;
}

.store-catalog-export-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-table-wrap {
  border-radius: 12px;
}

.admin-table {
  min-width: 1440px;
}

.admin-table th,
.admin-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

.admin-table td {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table td strong,
.admin-table td small {
  display: inline;
  white-space: nowrap;
}

.admin-table td strong {
  overflow-wrap: normal;
}

.admin-table td small {
  margin-top: 0;
}

.admin-table td strong + small::before,
.admin-table td small + small::before,
.admin-table td .account-pill + small::before {
  color: var(--line-strong);
  content: " / ";
}

.admin-table td .account-pill + small {
  margin-top: 0;
}

.admin-col-date {
  width: 12%;
}

.admin-col-client {
  width: 19%;
}

.admin-col-service {
  width: 20%;
}

.admin-col-billing {
  width: 16%;
}

.admin-col-status {
  width: 13%;
}

.admin-col-actions {
  width: 20%;
}

.admin-account-table {
  min-width: 1320px;
}

/* La colonna Stato e' larga e va a capo (21/10/2026; Marco: "allarga la
   colonna Stato della Sintesi prendendo spazio da Profilo e Registrazioni,
   cosi' si legge senza passarci sopra col mouse"). Profilo e Registrazioni
   sono quasi sempre "Profilo non compilato" e "0 / 0 attive". */
.admin-account-col-created {
  width: 13%;
}

.admin-account-col-email {
  width: 19%;
}

.admin-account-col-profile {
  width: 13%;
}

.admin-account-col-registrations {
  width: 9%;
}

.admin-account-col-status {
  width: 25%;
}

.admin-account-col-full {
  width: 7%;
}

/* Due pulsanti affiancati: Reset prova (21/10/2026) ed Elimina. Uno sopra
   l'altro raddoppiavano l'altezza di tutte le righe. */
.admin-account-col-actions {
  width: 14%;
}

/* Il piano resta accanto alla pastiglia e va a capo se non ci sta;
   l'abbonamento e il FULL acceso hanno una riga loro, solo dove ci sono:
   le righe dei trial restano alte una riga. Solo oltre i 760 px: da telefono
   l'elenco e' a una riga per account e le righe piccole sono nascoste, e
   queste regole (piu' specifiche) le farebbero ricomparire. */
@media (min-width: 761px) {
  .admin-account-table td.admin-account-status-cell,
  .admin-account-table td.admin-account-status-cell small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .admin-account-table td.admin-account-status-cell .admin-account-status-line {
    display: block;
    margin-top: 2px;
  }

  .admin-account-table td.admin-account-status-cell .admin-account-status-line::before {
    content: none;
  }
}

/* Fra 761 e 1100 px l'elenco e' a schede: la cella e' una griglia a due
   colonne (etichetta, valore) e le righe piccole si alternavano fra le due.
   Nella colonna Stato stanno tutte sotto la pastiglia, una per riga. */
@media (min-width: 761px) and (max-width: 1100px) {
  .purchase-history-panel .admin-account-table td.admin-account-status-cell small {
    grid-column: 2;
  }
}

.admin-account-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-tab-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-tab-menu .secondary-button {
  min-height: 34px;
  padding: 8px 12px;
}

.admin-tab-menu .secondary-button.active {
  background: rgba(255, 204, 51, .16);
  border-color: var(--accent);
  color: var(--accent);
}

.admin-sheet-summary {
  align-items: center;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.admin-sheet-summary span {
  border: 1px solid rgba(51, 65, 85, .75);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  padding: 5px 9px;
}

.admin-sheet-wrap {
  max-height: 560px;
  overflow-x: hidden;
}

.admin-account-sheet-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  font-size: 12px;
}

.admin-account-sheet-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #172234;
  color: #c7d7ef;
}

.admin-account-sheet-table th,
.admin-account-sheet-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

.admin-account-sheet-table td span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-account-sheet-table th:nth-child(1) {
  width: 21%;
}

.admin-account-sheet-table th:nth-child(2) {
  width: 14%;
}

.admin-account-sheet-table th:nth-child(3) {
  width: 8%;
}

.admin-account-sheet-table th:nth-child(4),
.admin-account-sheet-table th:nth-child(5),
.admin-account-sheet-table th:nth-child(7),
.admin-account-sheet-table th:nth-child(9) {
  width: 9%;
}

.admin-account-sheet-table th:nth-child(6) {
  width: 10%;
}

.admin-account-sheet-table th:nth-child(8) {
  width: 11%;
}

.admin-account-sheet-table .admin-sheet-metric strong,
.admin-account-sheet-table .admin-sheet-metric small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-account-sheet-table .admin-sheet-metric strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.admin-account-sheet-table .admin-sheet-metric small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-top: 2px;
}

.admin-account-sheet-table .admin-sheet-metric strong + small::before {
  content: none;
}

/* La colonna del piano va a capo (21/10/2026): "FULL manuale + Abbonamento
   App + RoadBook Builder" e la scadenza, tagliati coi puntini, non si
   leggevano, e sono proprio quello che si cerca quando arriva un abbonato. */
.admin-account-sheet-table .admin-sheet-plan strong,
.admin-account-sheet-table .admin-sheet-plan small {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Una riga per cosa: la barra " / " delle tabelle admin qui e' solo rumore. */
.admin-account-sheet-table .admin-sheet-plan small + small::before {
  content: none;
}

.admin-sheet-back {
  min-height: 32px;
  padding: 6px 10px;
}

.admin-account-sheet-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, .42);
}

.admin-sheet-action {
  min-height: 28px;
  padding: 5px 9px;
}

.admin-actions {
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 7px;
}

.admin-actions .secondary-button {
  width: auto;
  min-height: 34px;
  border-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
  padding: 8px 12px;
  text-align: center;
}

.admin-actions .secondary-button:disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: wait;
}

.admin-actions .danger-button {
  border-color: var(--danger);
  color: var(--danger);
}

.admin-actions .danger-button:hover {
  background: rgba(255, 51, 51, 0.12);
}

.admin-account-table .admin-actions {
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.admin-account-full-cell {
  text-align: center;
}

.admin-account-full-cell .admin-full-button {
  min-height: 30px;
  min-width: 64px;
  padding: 6px 10px;
}

.admin-full-button.active {
  border-color: var(--green);
  color: var(--green);
}

.admin-full-button.active:hover {
  background: rgba(34, 197, 94, .12);
}

@media (max-width: 980px) {
  .app-policy-promo-window {
    grid-template-columns: 1fr;
  }

  .page-shell {
    grid-template-columns: 1fr;
  }

  .overview {
    position: static;
  }

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

  .plan-grid,
  .module-grid,
  .field-grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid.lower,
  .purchase-options-grid {
    grid-template-columns: 1fr;
  }

  .active-services-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .service-wallet-panel {
    grid-template-rows: auto auto;
  }

  .dashboard-grid.lower .service-wallet-panel .compact-heading h2 {
    display: block;
    min-height: 0;
  }

  .subscription-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .page-shell {
    width: min(100%, calc(100vw - 20px));
    padding: 10px 0 28px;
  }

  .lynx-header {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .brand {
    font-size: clamp(34px, 11vw, 46px);
  }

  .divider {
    width: 4px;
    height: 36px;
  }

  .subtitle {
    font-size: clamp(14px, 4.25vw, 19px);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .lynx-header-copy {
    overflow: hidden;
  }

  .header-note {
    margin-top: 5px;
    font-size: clamp(8px, 2.5vw, 11px);
  }

  .overview,
  .registration-area {
    border-radius: 8px;
  }

  .form-heading,
  .profile-summary-card,
  .submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .account-access-panel,
  .account-session-panel {
    padding: 16px;
  }

  .account-session-panel,
  .account-card-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  fieldset,
  .form-heading,
  .profile-summary-card,
  .submit-row {
    padding: 16px;
  }

  .profile-summary-card {
    margin: 12px 16px 0;
  }

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 28px;
  }

  .field-grid.two,
  .field-grid.three,
  .field-grid.address,
  .plan-grid,
  .module-grid,
  .tracking-policy-form,
  .service-list {
    grid-template-columns: 1fr;
  }

  .tracking-policy-form label {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .tracking-policy-form {
    min-width: 330px;
    grid-template-columns: minmax(190px, 1fr) 72px 52px;
  }

  .tracking-policy-row {
    display: contents;
  }

  .app-policy-columns {
    grid-template-columns: minmax(300px, 0.86fr) minmax(430px, 1.14fr);
    min-width: 760px;
  }

  .app-policy-row {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .app-policy-number-row,
  .app-policy-cloud-row,
  .app-policy-trial-row {
    grid-template-columns: 22px minmax(190px, 1fr) 52px 66px;
  }

  .app-policy-date-heading-row,
  .app-policy-date-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .app-policy-actions {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  }

  .app-policy-save-button {
    width: auto;
  }

  .app-policy-row small {
    grid-column: auto;
    text-align: center;
  }

  .tracking-policy-form small {
    white-space: nowrap;
  }

  .check-line {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .legal-detail-button {
    width: 100%;
  }

  input,
  select {
    font-size: 16px;
  }

  button,
  .secondary-button {
    width: 100%;
  }

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

  .button-link {
    width: 100%;
  }

  .client-shell {
    width: min(100%, calc(100vw - 20px));
    padding: 10px 0 28px;
  }

  .dashboard-panel {
    padding: clamp(14px, 4vw, 18px);
  }

  .metric-row,
  .compact-metrics,
  .module-status-grid,
  .roadbook-pro-facts,
  .service-wallet-facts,
  .active-services-grid,
  .subscription-metrics,
  .purchase-options-grid {
    grid-template-columns: 1fr;
  }

  .roadbook-pro-status,
  .service-wallet-status {
    min-height: clamp(150px, 34vw, 190px);
    padding: 16px;
  }

  .roadbook-pro-facts,
  .service-wallet-facts {
    grid-auto-rows: auto;
  }

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

  .roadbook-pro-facts div,
  .service-wallet-facts div {
    padding: 12px;
  }

  .subscription-main {
    display: grid;
  }

  .services-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .account-cloud-heading {
    display: grid;
  }

  .account-current-event {
    flex-direction: column;
    align-items: stretch;
  }

  .account-cloud-status {
    justify-self: start;
  }

  .services-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .client-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .client-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .active-configuration-head,
  .active-configuration-actions {
    display: grid;
  }

  .active-configuration-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .service-wallet-compact-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .service-wallet-compact-row p {
    grid-column: 1 / -1;
  }

  .active-configuration-card,
  .account-service-card,
  .purchase-option-card {
    min-height: auto;
    gap: 12px;
    padding: 15px;
  }

  .service-card-head {
    display: grid;
  }

  .service-card-head span {
    justify-self: start;
    max-width: 100%;
  }

  .service-actions {
    display: grid;
  }

  .service-button {
    width: 100%;
    padding-inline: 10px;
    font-size: clamp(13px, 4vw, 15px);
  }

  .purchase-option-card {
    align-content: start;
  }
}

/* ==========================================================================
   DAL TELEFONO — aggiunto il 9/9/2026.
   Tutto quello che segue e' AGGIUNTO in coda: nessuna riga sopra e' stata
   toccata. Cancellando da questa riga alla fine del file, le pagine tornano
   esattamente com'erano prima.
   ========================================================================== */

/* Questo non e' un difetto del telefono, e' un difetto e basta.
   admin.js avvolge la tabella dello storico in .table-scroll, ma quella classe
   nel CSS non e' mai esistita: il div non ha overflow, la tabella (min-width
   1440px) esce dal body, e il body ha overflow-x: hidden. Risultato: le colonne
   oltre la prima non si raggiungono in nessun modo, nemmeno da computer con la
   finestra stretta. Le altre tabelle si salvano perche' stanno in
   .purchase-table-wrap, che l'overflow ce l'ha (riga 2176). */
.table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* Sotto i 1100 px le tabelle diventano carte (blocco a riga 2337). Tre regole
   pensate per la tabella del desktop le seguono nella carta e la rovinano. */
@media (max-width: 1100px) {
  /* Il riquadro del foglio dati resta alto 560 px anche da telefono, mentre il
     contenuto ne chiede molti di piu': le carte traboccano fuori dal pannello. */
  .purchase-history-panel .admin-sheet-wrap {
    max-height: none;
  }

  /* nowrap + ellipsis servono alla cella di una riga sola. Nella carta la cella
     e' display:grid, quindi l'ellipsis non si applica nemmeno: il testo viene
     tagliato di netto, senza i tre puntini che avvisano che manca qualcosa. */
  .purchase-history-panel .admin-table td,
  .purchase-history-panel .admin-table td strong,
  .purchase-history-panel .admin-table td small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  /* La barra separatrice ("Marco Rossi / Cordenons") ha senso su una riga sola.
     Nella carta ogni pezzo va a capo e la barra finisce in testa alla riga. */
  .purchase-history-panel .admin-table td strong + small::before,
  .purchase-history-panel .admin-table td small + small::before,
  .purchase-history-panel .admin-table td .account-pill + small::before {
    content: none;
  }
}

@media (max-width: 640px) {
  /* L'intestazione e' un flex a una riga sola: il selettore lingua si prende
     129 px fissi e al titolo ne restano 87, cosi' "Admin registrazioni" si
     spezza in tre righe e la nota sotto (nowrap + ellipsis) sparisce. */
  .lynx-header {
    flex-wrap: wrap;
  }

  .lynx-header-copy {
    flex: 1 0 100%;
    order: 3;
  }

  .header-note {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* ADMIN — l'ordine del sorgente mette per primo il catalogo prodotti, che e'
     alto quasi 5.000 px ed e' roba da scrivania. Da telefono si tocca la coda
     pagamenti, poi gli account: quelli vanno davanti.
     Le tre sezioni non hanno ne' id ne' classi che le distinguano, quindi le
     riconosco dal contenitore che hanno dentro. Se un browser non conoscesse
     :has(), l'ordine resterebbe quello di oggi: non si rompe niente. */
  #adminContent {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  #adminContent > .admin-client-header {
    order: 0;
  }

  #adminContent > section:has(#adminRegistrations) {
    order: 1;
  }

  #adminContent > section:has(#adminAccounts) {
    order: 2;
  }

  #adminContent > section:has(#adminArchive) {
    order: 3;
  }

  #adminContent > .admin-products-panel {
    order: 4;
  }

  /* I due pulsanti piu' pericolosi erano i piu' piccoli: "Elimina" account era
     72x34. Lo standard della pagina stessa e' 44 px (riga 2965). */
  .admin-actions .secondary-button,
  .admin-account-full-cell .admin-full-button {
    min-height: 44px;
  }

  .admin-account-table .admin-actions {
    justify-content: stretch;
  }
}

@media (max-width: 640px) {
  /* CLIENTE — le carte dei piani nel modulo di registrazione tengono un fondo
     di 218 px (riga 503) anche quando il contenuto e' corto: quattro piani
     fanno quasi due schermate di vuoto. */
  .plan-option > span {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  /* CLIENTE — nello storico acquisti "Apri dashboard" e "Modifica dati" sono
     testo nudo alto 15 px, due bersagli a 8 px l'uno dall'altro. Tutto il resto
     della pagina sta sopra i 34. */
  .purchase-history-panel .history-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* Il pulsante che apre e chiude le impostazioni serve solo da telefono: sopra i
   640 px il pannello e' sempre aperto e il pulsante non c'e' proprio. */
.admin-settings-toggle {
  display: none;
}

@media (max-width: 640px) {
  .admin-settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    margin-top: 10px;
  }

  /* Chiuso: resta l'intestazione con il suo pulsante, sparisce tutto il resto
     (catalogo prodotti, parametri tracking, policy FREE e PROMO). Sono quasi
     5.000 px, cioe' sei schermate, di roba che si tocca due volte l'anno. */
  .admin-products-panel.admin-settings-closed > *:not(.services-heading) {
    display: none;
  }
}

/* Nella colonna Azioni degli account i pulsanti adesso possono essere due
   ("Rinvia verifica" appare solo a chi non ha ancora verificato la mail) e in
   137 px non ci stanno affiancati: .admin-actions e' nowrap (riga 3225). Qui
   vanno a capo, e solo in questa tabella - nelle registrazioni la colonna e'
   piu' larga e i due pulsanti ci stanno da sempre. */
.admin-account-table .admin-actions {
  flex-wrap: wrap;
  row-gap: 7px;
}

/* Reset prova ed Elimina ci stanno affiancati anche a 1366 px, dove la tabella
   e' alla sua larghezza minima. Il telefono ha le sue misure, piu' forti. */
.admin-account-table .admin-actions .secondary-button {
  padding: 7px 8px;
}

/* Etichetta per i lettori di schermo: il campo ha gia' il suo placeholder, ma
   un placeholder non e' un'etichetta e sparisce appena si scrive. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ricerca cliente/email. L'input eredita lo stile globale (riga 444): qui serve
   solo dirgli quanto essere largo, perche' di suo prenderebbe tutta la riga. */
.admin-search {
  /* display esplicito: label e' grid per tutto il portale (riga 434) e l'input,
     stirato dalla griglia, prendeva l'altezza del contenitore invece della sua. */
  display: block;
  flex: 0 1 260px;
  min-width: 0;
}

.admin-search input {
  width: 100%;
}

.admin-search input {
  min-height: 44px;
}

@media (max-width: 640px) {
  /* Da telefono il campo va a riga sua, a tutta larghezza: e' la prima cosa che
     si tocca quando si cerca un cliente e non deve stare stretto.
     .services-heading e' un flex SENZA wrap (riga 1770 circa): senza questa
     riga il flex-basis del 100% non manda a capo, comprime, e il campo finisce
     sopra la prima carta. Vale solo per l'admin, dove i campi ci sono. */
  /* La testata di un pannello admin ha fino a tre pezzi (titolo, schede, campo
     di ricerca) e in 321 px su una riga non ci stanno: e' un flex nowrap con
     justify-content: space-between, quindi i figli sfondano invece di andare a
     capo. In colonna ognuno prende la riga sua e non c'e' niente da incastrare. */
  .admin-page .services-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .admin-page .admin-account-tools {
    justify-content: flex-start;
  }

  /* Le schede sono a loro volta un flex nowrap (riga 3090): affiancate chiedono
     piu' spazio di quanto ce ne sia. A capo, e larghe uguali. */
  .admin-page .admin-tab-menu {
    flex-wrap: wrap;
  }

  .admin-page .admin-tab-menu .secondary-button {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* La testata qui e' in COLONNA, quindi il flex-basis di 260px della regola
     base diventa un'ALTEZZA di 260px invece di una larghezza. */
  .admin-search {
    flex: 0 0 auto;
    min-width: 0;
  }
}

/* Pezzi che esistono solo da telefono (data corta, stato in una parola, la ✕
   di Elimina): sul computer non si vedono. */
.admin-phone {
  display: none;
}

/* La pastiglia dello stato che si puo' premere: e' il comando per confermare a
   mano l'email di un account fermo sulla verifica (Marco, 25/9/2026). Sembra
   una pastiglia come le altre, ma si comporta da pulsante. */
button.account-pill-action {
  /* La regola generale dei pulsanti (riga 663) dipinge il fondo di giallo e
     scrive in scuro: sulla pastiglia faceva testo giallo su fondo giallo,
     cioe' invisibile. Qui si rimette il vestito della pastiglia. */
  background: transparent;
  /* Niente color qui: lo decide .account-pill (giallo) o .account-pill.active
     (verde), altrimenti la scritta diventa bianca e lo stato non si legge. */
  min-height: 24px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
}

button.account-pill-action:hover:not(:disabled),
button.account-pill-action:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 204, 51, .14);
}

button.account-pill-action:disabled {
  cursor: default;
  opacity: .6;
}

/* ADMIN, elenco account da telefono (Marco, 23/9/2026: "teniamo Creato, mail,
   Attivo, Full ed Elimina, ma facciamo delle righe tipo excel"; e al primo
   tentativo: "non ci siamo").

   Da 1100 px in giu' ogni riga di .purchase-history-panel diventa una scheda:
   per l'elenco account, sette etichette e mezzo schermo a cliente. Qui torna
   una tabella vera, una riga per account, con le cinque colonne che servono a
   intervenire al volo. Il primo tentativo nascondeva due celle ma lasciava le
   sette <col> del computer: le celle scivolavano di posto e Elimina usciva dal
   bordo. In piu' il testo dentro le celle andava a capo (la data su tre righe).
   Gli indici qui sotto dipendono dall'ordine delle colonne: lo controlla
   tests/test_admin_account_telefono.js. */
@media (max-width: 760px) {
  /* In 390 px ogni pixel serve alla tabella: il pannello cede meta' margine. */
  .purchase-history-panel:has(.admin-account-table) {
    padding-left: 12px;
    padding-right: 12px;
  }

  .purchase-history-panel .admin-account-table {
    display: table;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    background: rgba(15, 23, 42, .52);
    border-radius: 10px;
    overflow: hidden;
  }

  /* Le sette colonne del computer: con cinque celle per riga farebbero
     scivolare tutto di due posti. */
  .purchase-history-panel .admin-account-table colgroup {
    display: none;
  }

  .purchase-history-panel .admin-account-table thead {
    display: table-header-group;
  }

  .purchase-history-panel .admin-account-table tbody {
    display: table-row-group;
    gap: 0;
  }

  .purchase-history-panel .admin-account-table tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .purchase-history-panel .admin-account-table th,
  .purchase-history-panel .admin-account-table td {
    display: table-cell;
  }

  .purchase-history-panel .admin-account-table tbody tr + tr {
    border-top: 1px solid var(--line);
  }

  /* L'etichetta della scheda ("CREATO", "ACCOUNT"...) sta una volta sola, in
     cima, come intestazione. */
  .purchase-history-panel .admin-account-table td::before {
    content: none;
  }

  .purchase-history-panel .admin-account-table th {
    padding: 6px 4px;
    font-size: 9.5px;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .purchase-history-panel .admin-account-table td {
    padding: 5px 4px;
    font-size: 12px;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Niente a capo DENTRO le celle: le regole delle schede lo permettevano, ed
     e' per quello che la data finiva su tre righe e le email su due. */
  .purchase-history-panel .admin-account-table td * {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Profilo e Registrazioni: roba da scrivania. */
  .purchase-history-panel .admin-account-table th:nth-child(3),
  .purchase-history-panel .admin-account-table td:nth-child(3),
  .purchase-history-panel .admin-account-table th:nth-child(4),
  .purchase-history-panel .admin-account-table td:nth-child(4) {
    display: none;
  }

  /* Larghezze: con table-layout fixed decide l'intestazione. L'email prende
     tutto quello che resta. */
  .purchase-history-panel .admin-account-table th:nth-child(1) {
    width: 70px;
  }

  .purchase-history-panel .admin-account-table th:nth-child(5) {
    width: 68px;
  }

  .purchase-history-panel .admin-account-table th:nth-child(6) {
    width: 60px;
  }

  /* La colonna della ✕ non ha bisogno di titolo: "AZIONI" non ci stava. */
  .purchase-history-panel .admin-account-table th:nth-child(7) {
    width: 40px;
    font-size: 0;
  }

  /* Seconde righe (id, nome, dettaglio dello stato), testi lunghi del
     computer e "Rinvia verifica": via. Restano sul computer. */
  .purchase-history-panel .admin-account-table td small,
  .purchase-history-panel .admin-account-table .admin-desk,
  .purchase-history-panel .admin-account-table [data-account-resend],
  .purchase-history-panel .admin-account-table [data-account-trial-reset] {
    display: none;
  }

  .purchase-history-panel .admin-account-table .admin-phone {
    display: inline-block;
  }

  .purchase-history-panel .admin-account-table td:nth-child(1) {
    font-size: 10px;
    letter-spacing: -.1px;
  }

  /* L email su una riga sola, tagliata coi puntini se non ci sta: le regole
     delle schede la spezzavano ovunque, anche a meta parola. */
  .purchase-history-panel .admin-account-table tbody td:nth-child(2) > strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    font-weight: 700;
  }

  /* Lo stato in minuscolo e senza spaziatura: in maiuscolo "ATTIVO" non
     entrava nella colonna e usciva "ATTI...". */
  .purchase-history-panel .admin-account-table .account-pill {
    max-width: 100%;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
  }

  .purchase-history-panel .admin-account-table .admin-actions {
    display: block;
  }

  /* Full ed Elimina: 34 px, cosi' la riga resta sui 44 px di una riga di
     elenco del telefono. Elimina chiede comunque conferma con l'email
     dell'account, e Full si rimette com'era con un altro tocco. */
  .purchase-history-panel .admin-account-table .admin-full-button,
  .purchase-history-panel .admin-account-table .admin-actions .secondary-button {
    width: 100%;
    min-height: 34px;
    padding: 0 2px;
    font-size: 10px;
    letter-spacing: 0;
  }

  /* La testata dei pannelli admin: le schede (Sintesi / Foglio dati, Tutte /
     Da confermare) affiancate a meta ciascuna invece che una per riga, e il
     campo di ricerca a tutta larghezza. Mezza schermata di pulsanti in meno
     prima di arrivare ai dati. */
  .admin-page .admin-account-tools > * {
    flex: 1 1 100%;
  }

  .admin-page .admin-tab-menu {
    flex-wrap: nowrap;
  }

  .admin-page .admin-tab-menu .secondary-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .purchase-history-panel .admin-account-table .admin-actions .danger-button .admin-phone {
    font-size: 15px;
    line-height: 1;
  }
}

/* I due store sotto la frase "l'account si crea dall'app" (14/10/2026). */
.account-store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
}

/* Sei lingue dal 14/10/2026: sul telefono i sei pulsanti vanno a capo invece
   di spingere la pagina di lato. */
@media (max-width: 560px) {
  .portal-language-switch {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
  }

  .portal-language-switch .portal-language-option {
    min-height: 30px;
    padding: 6px 7px;
  }
}