/* Genyleap account + GenyConnect mobile composition, 2026-10-12.
   Presentational only: purchase, credentials, endpoint and subscription data
   remain managed by existing production JS/PHP. */
.account-dashboard .account-service-tabs{
  min-width:0;
}
.account-dashboard .account-service-tab{
  min-width:0;
}
.account-dashboard .account-service-tab>.account-badge{
  white-space:nowrap;
}
.account-dashboard .gc-subscriptions{
  gap:17px;
}
.account-dashboard .gc-sub-card{
  min-width:0;
  border-radius:21px;
  border-color:color-mix(in srgb,var(--gc-accent) 13%,var(--line));
  box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 4%,transparent);
}
.account-dashboard .gc-sub-header{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  column-gap:13px;
  row-gap:7px;
  min-width:0;
  padding:21px 22px 18px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);
}
.account-dashboard .gc-sub-mark{
  width:50px;
  height:50px;
  align-self:start;
  font-size:1.65rem;
  border-radius:16px;
  background:color-mix(in srgb,var(--gc-accent) 8%,var(--paper));
}
.account-dashboard .gc-sub-heading{
  min-width:0;
  flex:initial;
  flex-basis:auto;
}
.account-dashboard .gc-sub-eyebrow{
  margin:0 0 5px;
  font-size:.61rem;
  letter-spacing:.055em;
  font-weight:800;
}
.account-dashboard .gc-sub-heading h3{
  margin:0;
  font-size:1.28rem;
  line-height:1.18;
  font-weight:850;
  letter-spacing:-.026em;
  overflow-wrap:anywhere;
}
.account-dashboard .gc-sub-heading p{
  margin:6px 0 0;
  font-size:.73rem;
  line-height:1.45;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.account-dashboard .gc-sub-header-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-self:end;
  gap:7px;
  min-width:max-content;
  align-self:start;
}
.account-dashboard .gc-sub-header-meta .gc-sub-status{
  margin:0;
  padding:7px 10px;
  min-height:30px;
  font-size:.7rem;
  line-height:1.2;
}
.account-dashboard .gc-sub-legacy-label{
  padding:3px 8px;
  border-radius:7px;
  border:1px solid color-mix(in srgb,var(--muted) 15%,var(--line));
  background:color-mix(in srgb,var(--soft) 70%,var(--paper));
  color:var(--muted);
  font-size:.6rem;
  line-height:1.35;
  font-weight:750;
  white-space:nowrap;
}
.account-dashboard .gc-sub-stats{
  gap:10px;
  padding:16px 22px 0;
}
.account-dashboard .gc-sub-stat{
  min-width:0;
  min-height:110px;
  border-radius:14px;
  padding:14px;
  background:color-mix(in srgb,var(--soft) 48%,var(--paper));
  border-color:color-mix(in srgb,var(--line) 82%,transparent);
}
.account-dashboard .gc-sub-stat>span{
  font-size:.7rem;
}
.account-dashboard .gc-sub-stat>strong{
  margin:9px 0 6px;
  line-height:1.22;
}
.account-dashboard .gc-sub-stat>strong.gc-sub-stat-technical{
  font-size:.79rem;
  letter-spacing:0;
  overflow-wrap:anywhere;
}
.account-dashboard .gc-sub-stat>small{
  font-size:.66rem;
  line-height:1.5;
}
.account-dashboard .gc-sub-progress{
  padding:19px 22px;
}
.account-dashboard .gc-sub-progress-label{
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:.7rem;
  line-height:1.45;
}
.account-dashboard .gc-sub-progress-label span:last-child{
  color:var(--gc-accent);
}
.account-dashboard .gc-sub-track{
  height:7px;
}
.account-dashboard .gc-sub-actions{
  padding:16px 22px;
  gap:11px;
  border-top:1px solid var(--line);
}
.account-dashboard .gc-sub-actions .gc-sub-copy,
.account-dashboard .gc-sub-actions .gc-sub-download{
  min-height:46px;
  border-radius:12px !important;
  font-size:.76rem !important;
  line-height:1.35;
  text-align:center;
}
.account-dashboard .gc-sub-privacy{
  font-size:.67rem;
  line-height:1.5;
}
.account-dashboard .gc-sub-more>summary{
  background:color-mix(in srgb,var(--soft) 55%,var(--paper));
  padding:17px 22px;
  font-size:.76rem;
  font-weight:780;
}
.account-dashboard .gc-sub-details-grid{
  gap:0 26px;
  padding:4px 22px 20px;
}
.account-dashboard .gc-sub-detail-row{
  gap:8px 13px;
  font-size:.72rem;
  line-height:1.5;
}
.account-dashboard .gc-sub-detail-row dd{
  max-width:min(72%,330px);
  font-size:.72rem;
  overflow-wrap:anywhere;
}
.account-dashboard .gc-sub-other-servers{
  padding:0 22px 20px;
}
.account-dashboard .gc-sub-other-servers ul{
  margin-top:10px;
}
.account-dashboard .gc-sub-other-servers li{
  gap:10px;
  flex-wrap:wrap;
  padding:12px 0;
  font-size:.76rem;
}
.account-dashboard .gc-sub-server-name{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.account-dashboard .gc-sub-server-flag{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:1.18rem;
  line-height:1;
}
.account-dashboard .gc-sub-server-name strong{
  font-weight:750;
  overflow-wrap:anywhere;
}
.account-dashboard .gc-sub-server-actions{
  margin-inline-start:auto;
  flex-wrap:wrap;
}
.account-dashboard .gc-sub-server-actions button,
.account-dashboard .gc-sub-server-actions a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:6px 9px;
  border-radius:8px;
  text-decoration:none;
  font-size:.71rem;
}
.account-dashboard .gc-sub-server-actions button:hover,
.account-dashboard .gc-sub-server-actions a:hover{
  background:color-mix(in srgb,var(--gc-accent) 7%,var(--paper));
}

/* The product selector is a tab strip, never an overflowing card carousel. */
@media(max-width:980px){
  .account-dashboard .account-service-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    overflow:visible;
    padding:5px;
    margin:0 0 20px;
    border-radius:17px;
  }
  .account-dashboard .account-service-tab{
    min-width:0;
    width:100%;
    flex:initial;
    grid-template-columns:38px minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:3px 9px;
    min-height:68px;
    padding:10px 11px;
    border-radius:13px;
    text-align:start;
  }
  .account-dashboard .account-service-tab-mark{
    grid-column:1;
    grid-row:1 / 3;
    width:38px;
    height:38px;
    border-radius:12px;
    align-self:center;
  }
  .account-dashboard .account-service-tab-copy{
    grid-column:2;
    grid-row:1;
    align-self:end;
  }
  .account-dashboard .account-service-tab-copy strong{
    font-size:.79rem;
    line-height:1.23;
    overflow-wrap:anywhere;
  }
  .account-dashboard .account-service-tab-copy small{
    display:none;
  }
  .account-dashboard .account-service-tab>.account-badge{
    grid-column:2;
    grid-row:2;
    justify-self:start;
    margin:0;
    font-size:.63rem;
    line-height:1.2;
    padding:4px 9px;
  }
}
@media(max-width:680px){
  /* Four compact account tiles per row, with logout a full-width action. */
  .account-dashboard .account-sidebar{
    padding:15px;
    border-radius:22px;
  }
  .account-dashboard .account-identity{
    margin-bottom:13px;
    padding:3px 2px 14px;
  }
  .account-dashboard .account-side-nav{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    padding:0;
    margin:0;
    overflow:visible;
  }
  .account-dashboard .account-side-nav button:not(.account-logout){
    width:100%;
    min-width:0;
    min-height:75px;
    padding:8px 4px;
    gap:6px;
    border-radius:16px;
    line-height:1.27;
    font-size:.68rem;
    background:color-mix(in srgb,var(--soft) 36%,var(--paper));
  }
  .account-dashboard .account-side-nav button:not(.account-logout).is-active{
    background:color-mix(in srgb,var(--account-ok) 9%,var(--paper));
  }
  .account-dashboard .account-side-nav button:not(.account-logout) span{
    font-weight:750;
    overflow-wrap:anywhere;
  }
  .account-dashboard .account-side-nav .account-logout{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    min-height:49px;
    margin:5px 0 0;
    padding:10px 13px;
    gap:11px;
    border:1px solid color-mix(in srgb,var(--account-danger) 17%,var(--line));
    border-radius:13px;
    background:color-mix(in srgb,var(--account-danger) 3%,var(--paper));
    color:var(--account-danger);
    text-align:start;
    font-size:.75rem;
    font-weight:750;
  }
  .account-dashboard .account-side-nav .account-logout i{
    display:grid;
    place-items:center;
    flex:0 0 30px;
    width:30px;
    height:30px;
    margin:0;
    border-radius:10px;
    color:var(--account-danger)!important;
    background:color-mix(in srgb,var(--account-danger) 8%,var(--paper));
  }
  .account-dashboard .account-side-nav .account-logout i svg{
    display:block;
    width:18px;
    height:18px;
    color:inherit!important;
    stroke:currentColor;
    opacity:1;
  }
  .account-dashboard .account-side-nav .account-logout span{
    display:block;
    width:auto;
    flex:1;
    margin:0;
    white-space:normal;
    color:inherit;
  }
  .account-dashboard .account-side-nav .account-logout:hover{
    border-color:color-mix(in srgb,var(--account-danger) 32%,var(--line));
    background:color-mix(in srgb,var(--account-danger) 7%,var(--paper));
  }
  .account-dashboard .account-dashboard-main{
    min-width:0;
    padding:20px 14px;
    border-radius:20px;
  }
  .account-dashboard .account-section-head{
    margin-bottom:21px;
  }
  .account-dashboard .account-section-head h2{
    font-size:1.55rem;
    line-height:1.18;
  }
  .account-dashboard .account-section-head p{
    font-size:.78rem;
    line-height:1.6;
  }
  .account-dashboard .account-genyconnect-service-stack{
    gap:15px!important;
  }
  .account-dashboard .gc-sub-list-head{
    gap:8px;
    padding:0 3px 2px;
  }
  .account-dashboard .gc-sub-list-head strong{
    font-size:.98rem;
  }
  .account-dashboard .gc-sub-list-head span{
    font-size:.71rem;
    text-align:end;
  }
  .account-dashboard .gc-sub-header{
    grid-template-columns:45px minmax(0,1fr) auto;
    gap:9px;
    padding:16px;
    flex-wrap:nowrap;
    align-items:start;
  }
  .account-dashboard .gc-sub-mark{
    width:45px;
    height:45px;
    font-size:1.55rem;
    border-radius:14px;
  }
  .account-dashboard .gc-sub-heading{
    flex-basis:auto;
    min-width:0;
  }
  .account-dashboard .gc-sub-eyebrow{
    font-size:.56rem;
    line-height:1.3;
    margin-bottom:4px;
    letter-spacing:.055em;
  }
  .account-dashboard .gc-sub-heading h3{
    font-size:1.22rem;
    line-height:1.15;
  }
  .account-dashboard .gc-sub-heading p{
    font-size:.67rem;
    line-height:1.42;
    margin-top:6px;
  }
  .account-dashboard .gc-sub-header-meta{
    gap:5px;
    min-width:0;
    max-width:110px;
    align-items:flex-end;
  }
  .account-dashboard .gc-sub-header-meta .gc-sub-status{
    min-height:29px;
    padding:6px 9px;
    font-size:.67rem;
    margin:0;
  }
  .account-dashboard .gc-sub-legacy-label{
    font-size:.56rem;
    padding:3px 6px;
  }
  .account-dashboard .gc-sub-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:13px 14px 0;
    gap:9px;
  }
  .account-dashboard .gc-sub-stat{
    min-width:0;
    min-height:105px;
    padding:12px;
    border-radius:13px;
  }
  .account-dashboard .gc-sub-stat>span{
    font-size:.67rem;
  }
  .account-dashboard .gc-sub-stat>strong{
    margin:8px 0 5px;
    font-size:1rem;
  }
  .account-dashboard .gc-sub-stat-time>strong{
    font-size:1.21rem;
  }
  .account-dashboard .gc-sub-stat>strong.gc-sub-stat-technical{
    font-size:.78rem;
  }
  .account-dashboard .gc-sub-stat>small{
    font-size:.63rem;
    line-height:1.47;
  }
  .account-dashboard .gc-sub-progress{
    padding:15px 15px 17px;
  }
  .account-dashboard .gc-sub-progress-label{
    font-size:.68rem;
    margin-bottom:9px;
  }
  .account-dashboard .gc-sub-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    padding:14px;
  }
  .account-dashboard .gc-sub-actions .gc-sub-copy,
  .account-dashboard .gc-sub-actions .gc-sub-download{
    width:100%;
    min-width:0;
    min-height:45px;
    padding:9px 8px!important;
    font-size:.72rem!important;
  }
  .account-dashboard .gc-sub-actions>.gc-sub-renew{
    grid-column:1/-1;
    width:100%;
    min-height:44px;
  }
  .account-dashboard .gc-sub-privacy{
    grid-column:1/-1;
    margin:0;
    text-align:center;
  }
  .account-dashboard .gc-sub-more>summary{
    padding:15px 16px;
    font-size:.73rem;
    line-height:1.45;
  }
  .account-dashboard .gc-sub-details-grid{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding:3px 16px 16px;
  }
  .account-dashboard .gc-sub-other-servers{
    padding:0 16px 16px;
  }
}
@media(max-width:385px){
  .account-dashboard .account-sidebar{padding:11px}
  .account-dashboard .account-side-nav{gap:6px}
  .account-dashboard .account-side-nav button:not(.account-logout){min-height:71px;font-size:.63rem;padding:7px 3px}
  .account-dashboard .account-service-tabs{gap:5px}
  .account-dashboard .account-service-tab{padding:9px 7px;gap:4px 6px;grid-template-columns:31px minmax(0,1fr)}
  .account-dashboard .account-service-tab-mark{width:31px;height:31px;border-radius:10px}
  .account-dashboard .account-service-tab-copy strong{font-size:.73rem}
  .account-dashboard .gc-sub-header{grid-template-columns:41px minmax(0,1fr) auto;gap:7px;padding:14px 12px}
  .account-dashboard .gc-sub-mark{width:41px;height:41px}
  .account-dashboard .gc-sub-header-meta .gc-sub-status{padding:6px 7px;font-size:.63rem}
  .account-dashboard .gc-sub-legacy-label{font-size:.54rem}
  .account-dashboard .gc-sub-stats{padding-inline:11px;gap:7px}
  .account-dashboard .gc-sub-stat{padding:10px;min-height:102px}
  .account-dashboard .gc-sub-stat>small{font-size:.6rem}
  .account-dashboard .gc-sub-actions{padding-inline:11px}
}
@media(max-width:345px){
  .account-dashboard .gc-sub-header{grid-template-columns:41px minmax(0,1fr)}
  .account-dashboard .gc-sub-header-meta{
    grid-column:2;
    align-items:flex-start;
    justify-self:start;
    flex-direction:row;
    max-width:none;
    margin-top:1px;
    flex-wrap:wrap;
  }
  .account-dashboard .gc-sub-heading{grid-column:2}
  .account-dashboard .gc-sub-stats{grid-template-columns:minmax(0,1fr)}
  .account-dashboard .gc-sub-stat{min-height:82px}
  .account-dashboard .gc-sub-actions{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .account-dashboard .account-side-nav button:not(.account-logout){
    transition:none;
  }
}

/* Dark-mode parity for the full-width mobile sign-out control. */
@media(max-width:680px){
  html[data-theme="dark"] .account-dashboard .account-side-nav .account-logout{
    color:var(--account-danger)!important;
    border-color:color-mix(in srgb,var(--account-danger) 26%,var(--line))!important;
    background:color-mix(in srgb,var(--account-danger) 7%,var(--paper))!important;
  }
  html[data-theme="dark"] .account-dashboard .account-side-nav .account-logout i{
    color:var(--account-danger)!important;
    background:color-mix(in srgb,var(--account-danger) 13%,var(--paper))!important;
  }
  html[data-theme="dark"] .account-dashboard .account-side-nav .account-logout:hover{
    background:color-mix(in srgb,var(--account-danger) 12%,var(--paper))!important;
  }
}

/* Logout: draw a real SVG instead of the legacy empty CSS-mask span.
   This prevents the blank icon square seen in iOS Safari. */
.account-dashboard .account-side-nav .account-logout i{
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:var(--account-danger)!important;
}
.account-dashboard .account-side-nav .account-logout .account-logout-icon{
  display:block!important;
  width:22px!important;
  height:22px!important;
  min-width:22px;
  min-height:22px;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8;
  opacity:1!important;
  visibility:visible!important;
  flex-shrink:0;
}
@media(max-width:680px){
  .account-dashboard .account-side-nav .account-logout .account-logout-icon{
    width:20px!important;
    height:20px!important;
    min-width:20px;
    min-height:20px;
  }
}