/*
 * Vibe Web
 * A base funcional/visual vem do PWA. Este arquivo compõe a experiência autenticada
 * para desktop sem reimplementar os fluxos do app.
 */

@media (min-width: 760px) {
  html,
  body {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow: auto !important;
    overscroll-behavior: auto;
  }

  body {
    position: static !important;
    inset: auto !important;
    min-height: 100vh;
  }

  .app-shell {
    width: 100%;
    max-width: none !important;
    height: auto !important;
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent;
    box-shadow: none;
  }

  .web-page > .screen,
  .app-shell > .lp-screen {
    width: 100%;
    max-width: none;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    scrollbar-width: auto;
  }

  .web-page > .screen {
    padding: 0;
  }

  .app-shell > .screen:not(.lp-screen) {
    width: min(100%,760px);
    height: auto !important;
    min-height: 100vh;
    margin: 0 auto;
    overflow: visible !important;
    padding: 42px 30px 60px;
  }

  .web-page > .screen::-webkit-scrollbar,
  .app-shell > .lp-screen::-webkit-scrollbar {
    display: initial;
  }

  .web-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px minmax(0,1fr);
  }

  .web-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 680px;
    padding: 25px 16px 18px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(92,102,160,.12);
    background: rgba(248,247,255,.88);
    -webkit-backdrop-filter: blur(30px) saturate(1.12);
    backdrop-filter: blur(30px) saturate(1.12);
    box-shadow: 12px 0 42px rgba(72,67,145,.055);
    z-index: 40;
  }

  .web-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 2px 9px 20px;
  }

  .web-sidebar-brand .logo {
    width: 43px;
    height: 43px;
    flex: none;
  }

  .web-sidebar-brand > div {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .web-sidebar-brand strong {
    font-size: 20px;
    letter-spacing: -.55px;
    line-height: 1;
  }

  .web-sidebar-brand small {
    color: var(--muted);
    font-size: 8px;
    white-space: nowrap;
  }

  .web-nav {
    display: grid;
    gap: 5px;
    min-height: 0;
  }

  .web-nav-label {
    padding: 8px 11px 4px;
    color: #8b91a7;
    font-size: 7.5px;
    font-weight: 950;
    letter-spacing: 1.1px;
  }

  .web-nav-label-more {
    margin-top: 13px;
  }

  .web-nav-item {
    width: 100%;
    height: 43px;
    padding: 0 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #69718e;
    text-align: left;
    font-size: 11px;
    font-weight: 850;
    transition: .16s ease;
  }

  .web-nav-item .icon {
    width: 18px;
    height: 18px;
    flex: none;
  }

  .web-nav-item:hover {
    background: rgba(255,255,255,.62);
    color: #5748d9;
  }

  .web-nav-item.active {
    color: #fff;
    background: linear-gradient(90deg,#6351ff,#b85bef);
    box-shadow: 0 10px 25px rgba(105,75,255,.19);
  }

  .web-nav-item.secondary {
    height: 39px;
    font-size: 10px;
  }

  .web-sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(92,102,160,.10);
  }

  .web-sidebar-user {
    padding: 9px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 9px;
    align-items: center;
  }

  .web-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,#ece8ff,#e7f3ff);
    color: #5d4be1;
    font-size: 11px;
    font-weight: 950;
  }

  .web-sidebar-user > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .web-sidebar-user strong,
  .web-sidebar-user small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .web-sidebar-user strong {
    font-size: 9.5px;
  }

  .web-sidebar-user small {
    color: var(--muted);
    font-size: 8px;
  }

  .web-logout {
    width: 100%;
    height: 38px;
    margin-top: 4px;
    padding: 0 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    color: #858ca3;
    font-size: 9.5px;
    font-weight: 850;
  }

  .web-logout:hover {
    background: #fff0f3;
    color: #d62e51;
  }

  .web-logout .icon {
    width: 16px;
    height: 16px;
  }

  .web-workspace {
    min-width: 0;
    min-height: 100vh;
    background:
      radial-gradient(circle at 95% 0,rgba(137,103,255,.08),transparent 26%),
      radial-gradient(circle at 15% 100%,rgba(75,151,255,.06),transparent 24%);
  }

  .web-page {
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    padding: 30px 38px 72px;
  }

  .web-page > .screen {
    animation: screenIn .24s ease both;
  }

  .web-page .header,
  .web-page .home-header {
    margin-bottom: 22px;
  }

  .web-page .header h2,
  .web-page .home-brand h2 {
    font-size: 28px;
    letter-spacing: -.8px;
  }

  .web-page .header p,
  .web-page .home-brand p {
    margin-top: 4px;
    font-size: 11px;
  }

  .web-page .header .logo,
  .web-page .home-brand .logo {
    width: 45px;
    height: 45px;
  }

  .web-page .icon-btn {
    width: 44px;
    height: 44px;
  }

  /* Tarefas */
  .web-home-screen {
    max-width: 1180px;
    margin: 0 auto;
  }

  .web-home-layout {
    display: grid;
    grid-template-columns: 320px minmax(0,1fr);
    gap: 24px;
    align-items: start;
  }

  .web-home-rail {
    min-width: 0;
    position: sticky;
    top: 24px;
    display: grid;
    gap: 12px;
  }

  .web-home-rail .home-balance {
    min-height: 152px;
    margin: 0;
    padding: 21px;
    border-radius: 28px;
    align-items: flex-end;
  }

  .web-home-rail .home-balance-copy strong {
    margin: 7px 0 4px;
    font-size: 34px;
  }

  .web-home-rail .home-balance-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }

  .web-home-rail .active-account-card,
  .web-home-rail > .no-task {
    margin: 0;
  }

  .web-home-rail .active-account-card {
    grid-template-columns: minmax(0,1fr);
    padding: 15px;
    gap: 12px;
  }

  .web-home-rail .active-account-avatar {
    width: 48px;
    height: 48px;
  }

  .web-home-rail .active-account-meta {
    justify-content: space-between;
    padding-top: 11px;
    border-top: 1px solid var(--line);
  }

  .web-home-rail .task-limit-warning {
    width: 100%;
    margin: 0;
  }

  .web-task-column {
    min-width: 0;
    max-width: 760px;
  }

  .web-task-column .task-live-head,
  .web-task-column .task-feed-head,
  .web-task-column .task-deck,
  .web-task-column .task-demand-note,
  .web-task-column > .no-task,
  .web-task-column .task-penalty-card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .web-task-column .task-live-head {
    min-height: 64px;
    padding: 0 4px 10px;
  }

  .web-task-column .task-live-head strong {
    font-size: 15px;
  }

  .web-task-column .task-live-reward b {
    font-size: 25px;
  }

  .web-task-column .deck-card {
    padding: 20px;
    border-radius: 29px;
  }

  .web-task-column .instagram-profile-preview {
    padding: 17px;
  }

  .web-task-column .avatar.xl {
    width: 84px;
    height: 84px;
  }

  .web-task-column .profile-copy h3 {
    font-size: 18px;
  }

  .web-task-column .post-preview img,
  .web-task-column .post-preview video {
    max-height: 520px;
    object-fit: cover;
  }

  /* Dock da tarefa, centralizado dentro da área de trabalho, não da viewport inteira. */
  .app-shell > .task-action-dock {
    position: fixed;
    left: calc(240px + (100vw - 240px)/2);
    right: auto;
    bottom: 20px;
    width: min(720px,calc(100vw - 310px));
    height: 72px;
    transform: translateX(-50%);
    z-index: 130;
  }

  .app-shell > .execution-action-dock {
    position: fixed;
    left: calc(240px + (100vw - 240px)/2);
    right: auto;
    bottom: 20px;
    width: min(720px,calc(100vw - 310px));
    transform: translateX(-50%);
    z-index: 130;
  }

  .task-execution-screen {
    width: min(100%,860px);
    margin: 0 auto;
    padding-bottom: 110px;
  }

  .execution-status-hero {
    gap: 14px;
    padding: 12px;
  }

  .execution-timer-block,
  .execution-reward-block {
    padding: 20px;
  }

  .execution-timer-block strong {
    font-size: 48px;
  }

  .execution-reward-block strong {
    font-size: 34px;
  }

  .execution-account,
  .execution-target,
  .execution-guide {
    padding: 18px;
  }

  /* Ganhos */
  .earnings-screen {
    max-width: 1180px;
    margin: 0 auto;
  }

  .web-earnings-layout {
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(390px,1.08fr);
    gap: 24px;
    align-items: start;
  }

  .web-earnings-summary {
    display: grid;
    gap: 12px;
  }

  .earnings-overview {
    gap: 12px;
  }

  .earnings-card {
    min-height: 154px;
    padding: 18px;
  }

  .earnings-card strong {
    font-size: 30px;
  }

  .web-earnings-summary .service-wallet-strip,
  .web-earnings-summary .withdraw-main,
  .web-earnings-summary .withdraw-info {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .web-earnings-history {
    margin: 0;
    min-width: 0;
  }

  .web-earnings-history .history-list {
    padding: 5px 18px;
  }

  .web-earnings-history .history-row {
    min-height: 76px;
  }

  .web-earnings-history .history-all-btn {
    margin-top: 10px;
  }

  /* Contas */
  .accounts-screen {
    max-width: 1220px;
    margin: 0 auto;
  }

  .quality-earnings {
    padding: 20px;
  }

  .quality-earnings-head strong {
    font-size: 14px;
  }

  .quality-bands {
    gap: 9px;
  }

  .accounts-view-tabs {
    max-width: 480px;
    margin-top: 16px;
  }

  .accounts-tools {
    margin: 12px 0 16px;
  }

  .accounts-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 15px;
  }

  .accounts-screen .account-card {
    align-self: start;
    padding: 16px;
  }

  .accounts-screen .account-card.expanded {
    grid-column: 1 / -1;
  }

  .accounts-screen .account-row {
    grid-template-columns: 56px minmax(0,1fr) auto;
  }

  .account-list-avatar {
    width: 56px;
    height: 56px;
  }

  .accounts-screen .account-detail {
    grid-template-columns: 126px minmax(0,1fr);
    gap: 20px;
  }

  .accounts-screen .account-card.expanded .account-detail {
    grid-template-columns: 150px minmax(0,1fr);
  }

  .accounts-screen .score-big {
    padding: 18px 8px;
  }

  .accounts-screen .score-big b {
    font-size: 38px;
  }

  .accounts-screen .factor {
    grid-template-columns: minmax(0,1fr) 100px 32px;
    gap: 9px;
    min-height: 26px;
    font-size: 10px;
  }

  .accounts-screen .factor .bar {
    height: 8px;
  }

  /* Novidades */
  .web-page main.screen > .news-tags ~ .stack {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 15px;
  }

  .news-card {
    min-height: 175px;
    padding: 21px;
  }

  .news-card h3 {
    font-size: 20px;
  }

  .news-card p {
    font-size: 11px;
    line-height: 1.55;
  }

  .news-art.has-image {
    width: 132px;
    height: 132px;
  }

  /* Ajustes */
  .settings-screen {
    width: min(100%,960px);
    margin: 0 auto;
  }

  .settings-screen > .account-card {
    padding: 18px;
  }

  .settings-card {
    padding: 5px 18px;
  }

  .setting-row {
    min-height: 68px;
  }

  .setting-left h4 {
    font-size: 13px;
  }

  .setting-left p {
    font-size: 10px;
  }

  /* Serviços */
  .services-screen {
    max-width: 1180px;
    margin: 0 auto;
  }

  .services-wallet-hero {
    min-height: 126px;
    padding: 22px;
  }

  .services-wallet-hero strong {
    font-size: 36px;
  }

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

  .service-card {
    min-height: 86px;
    padding: 14px;
  }

  .service-orders-section {
    max-width: 900px;
  }

  /* Movimentações: lista larga, não cards espalhados. */
  .movements-screen,
  .payments-screen,
  .support-screen {
    width: min(100%,1080px);
    margin: 0 auto;
  }

  .movement-search-shell {
    grid-template-columns: minmax(0,1fr) auto;
    padding: 12px;
  }

  .movement-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .movement-card {
    min-height: 102px;
    padding: 16px 18px;
  }

  .movement-advanced-filters {
    grid-template-columns: repeat(3,minmax(0,1fr)) auto;
    align-items: end;
  }

  .movement-filter-actions {
    min-width: 190px;
  }

  .payments-balance-grid {
    gap: 13px;
  }

  .payments-balance-grid article {
    min-height: 112px;
    padding: 18px;
  }

  .payment-filter-bar {
    padding: 13px;
  }

  .support-intro {
    padding: 18px;
  }

  .support-ticket-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
  }

  /* Drawers/modal deixam de nascer do rodapé como em um telefone. */
  .modal-backdrop,
  .withdraw-backdrop,
  .profile-drawer-backdrop,
  .service-order-backdrop,
  .movement-detail-backdrop,
  .email-auth-backdrop {
    align-items: center;
    justify-content: center;
    padding: 32px;
  }

  .modal,
  .withdraw-drawer,
  .profile-drawer,
  .service-order-drawer,
  .movement-detail-drawer,
  .email-auth-drawer,
  .account-picker {
    width: min(680px,calc(100vw - 90px));
    max-height: calc(100vh - 64px);
    border-radius: 28px;
  }

  .drawer-handle {
    display: none;
  }

  .toast {
    left: calc(240px + (100vw - 240px)/2);
    bottom: 26px;
  }

  html.dark-theme .web-sidebar {
    background: rgba(13,15,18,.95);
    border-right-color: rgba(255,255,255,.07);
    box-shadow: 12px 0 42px rgba(0,0,0,.24);
  }

  html.dark-theme .web-nav-item {
    color: #9aa0ac;
  }

  html.dark-theme .web-nav-item:hover {
    color: #c1b7ff;
    background: #171a20;
  }

  html.dark-theme .web-sidebar-footer {
    border-color: rgba(255,255,255,.07);
  }

  html.dark-theme .web-user-avatar {
    background: #211a3a;
    color: #b7abff;
  }
}

@media (min-width: 900px) {
  /* Landing: mesmo conteúdo e mesmas ações, agora usando a largura disponível. */
  .lp-screen {
    max-width: 1380px;
    padding: 32px 52px 58px;
  }

  .lp-top {
    max-width: 1280px;
    margin: 0 auto;
  }

  .lp-brand .logo {
    width: 48px;
    height: 48px;
  }

  .lp-brand strong {
    font-size: 22px;
  }

  .lp-brand small {
    font-size: 10px;
  }

  .lp-hero {
    max-width: 1280px;
    margin: 0 auto;
    padding: 76px 0 34px;
    display: grid;
    grid-template-columns: minmax(0,1.02fr) minmax(430px,.98fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 72px;
    align-items: start;
  }

  .lp-hero > .lp-eyebrow,
  .lp-hero > h1,
  .lp-hero > p,
  .lp-hero > .lp-explore,
  .lp-hero > .lp-auth-card {
    grid-column: 1;
  }

  .lp-hero > .lp-product-stage {
    grid-column: 2;
    grid-row: 1 / 7;
    width: 100%;
    margin: 0;
    min-height: 500px;
    align-self: center;
  }

  .lp-hero h1 {
    max-width: 620px;
    margin-top: 15px;
    font-size: clamp(58px,6vw,88px);
    line-height: .94;
    letter-spacing: -4px;
  }

  .lp-hero > p {
    max-width: 590px;
    font-size: 17px;
  }

  .lp-auth-card.hero-auth {
    width: min(100%,520px);
    margin-top: 28px;
  }

  .lp-task-preview {
    width: min(92%,520px);
    margin-top: 40px;
    padding: 20px;
  }

  .lp-preview-profile img {
    width: 78px;
    height: 78px;
  }

  .lp-preview-profile strong {
    font-size: 14px;
  }

  .lp-preview-profile span {
    font-size: 12px;
  }

  .lp-preview-profile small {
    font-size: 10px;
  }

  .lp-promise,
  .lp-how,
  .lp-quality,
  .lp-footer {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  .lp-promise {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
  }

  .lp-how {
    padding: 30px;
  }

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

  .lp-quality {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(520px,1.2fr);
    align-items: center;
    gap: 42px;
  }


}

@media (min-width: 1280px) {
  .web-page main.screen > .news-tags ~ .stack {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

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

@media (min-width: 760px) and (max-width: 1050px) {
  .web-shell {
    grid-template-columns: 82px minmax(0,1fr);
  }

  .web-sidebar {
    padding: 22px 10px 16px;
  }

  .web-sidebar-brand {
    justify-content: center;
    padding: 0 0 20px;
  }

  .web-sidebar-brand > div,
  .web-nav-label,
  .web-nav-item span,
  .web-sidebar-user > div,
  .web-logout span {
    display: none;
  }

  .web-nav-item,
  .web-logout {
    justify-content: center;
    padding: 0;
  }

  .web-nav-item {
    height: 45px;
  }

  .web-nav-item.secondary {
    height: 41px;
  }

  .web-sidebar-user {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 8px 0;
  }

  .web-page {
    padding: 26px 24px 70px;
  }

  .web-home-layout,
  .web-earnings-layout {
    grid-template-columns: 1fr;
  }

  .web-home-rail {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .web-home-rail .task-limit-warning {
    grid-column: 1 / -1;
  }

  .web-task-column {
    max-width: none;
  }

  .app-shell > .task-action-dock,
  .app-shell > .execution-action-dock {
    left: calc(82px + (100vw - 82px)/2);
    width: min(720px,calc(100vw - 130px));
  }

  .toast {
    left: calc(82px + (100vw - 82px)/2);
  }

  .accounts-list {
    grid-template-columns: 1fr;
  }

  .service-list,
  .support-ticket-list,
  .web-page main.screen > .news-tags ~ .stack {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}


/* Web refinement v4: use the monitor, not a stretched phone */
@media (min-width: 1051px) {
  .web-page {
    max-width: 1520px;
    padding: 34px 46px 80px;
  }

  /* TASKS */
  .web-home-screen {
    max-width: 1320px;
  }

  .web-home-layout {
    grid-template-columns: 350px minmax(620px, 860px);
    gap: 34px;
    justify-content: center;
  }

  .web-home-rail {
    top: 32px;
  }

  .web-task-column {
    width: 100%;
    max-width: 860px;
  }

  .web-task-column .task-live-head {
    padding: 3px 8px 14px;
  }

  .web-task-column .task-live-head > div:first-child small {
    font-size: 9px;
  }

  .web-task-column .task-live-head strong {
    font-size: 18px;
  }

  .web-task-column .task-live-reward {
    padding: 11px 14px;
  }

  .web-task-column .task-live-reward b {
    font-size: 28px;
  }

  .web-task-column .deck-card {
    min-height: 440px;
    padding: 26px;
  }

  .web-task-column .instagram-profile-preview {
    min-height: 380px;
    padding: 26px;
    display: grid;
    align-content: center;
  }

  .web-task-column .profile-line {
    gap: 18px;
  }

  .web-task-column .avatar.xl {
    width: 104px;
    height: 104px;
  }

  .web-task-column .profile-copy h3 {
    font-size: 22px;
  }

  .web-task-column .profile-copy > strong {
    font-size: 13px;
  }

  .web-task-column .profile-copy p {
    font-size: 12px;
    line-height: 1.45;
  }

  .web-task-column .task-profile-stats {
    margin-top: 20px;
  }

  .web-task-column .task-profile-stats b {
    font-size: 14px;
  }

  .web-task-column .task-description {
    margin-top: 22px;
    padding-top: 18px;
  }

  .web-task-column .task-description strong {
    font-size: 15px;
  }

  .web-task-column .task-description p {
    font-size: 11px;
  }

  .web-task-column > .no-task,
  .web-task-column > .task-penalty-card {
    min-height: 440px;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 50px;
  }

  /* ACCOUNTS */
  .accounts-screen {
    max-width: 1320px;
  }

  .accounts-commandbar {
    display: grid;
    grid-template-columns: auto minmax(320px,1fr) auto auto;
    gap: 12px;
    align-items: center;
    margin: 18px 0;
    padding: 10px;
    border-radius: 20px;
  }

  .accounts-commandbar .accounts-view-tabs {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .accounts-commandbar .accounts-view-tabs button {
    min-width: 104px;
    height: 42px;
  }

  .accounts-commandbar .accounts-search {
    height: 42px;
    margin: 0;
    background: rgba(247,248,255,.78);
    border-color: rgba(92,102,160,.09);
    box-shadow: none;
  }

  .accounts-commandbar .accounts-search input {
    font-size: 12px;
  }

  .accounts-layout-toggle {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(239,240,247,.84);
  }

  .accounts-layout-toggle button {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #8188a0;
  }

  .accounts-layout-toggle button .icon {
    width: 17px;
    height: 17px;
  }

  .accounts-layout-toggle button.active {
    color: #5e4ae1;
    background: #fff;
    box-shadow: 0 5px 14px rgba(72,67,145,.09);
  }

  .accounts-commandbar .accounts-add {
    height: 42px;
    padding: 0 15px;
  }

  .accounts-list-cards {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
  }

  .accounts-list-cards .account-card:not(.expanded) {
    min-height: 92px;
  }

  .accounts-list-cards .account-card.expanded {
    grid-column: 1 / -1;
  }

  .accounts-list-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .accounts-list-list .account-card {
    width: 100%;
    padding: 12px 16px;
    border-radius: 19px;
  }

  .accounts-list-list .account-card.expanded {
    grid-column: auto;
    padding: 16px 18px;
  }

  .accounts-list-list .account-row {
    grid-template-columns: 50px minmax(0,1fr) minmax(220px,auto);
    min-height: 58px;
  }

  .accounts-list-list .account-list-avatar {
    width: 48px;
    height: 48px;
  }

  .accounts-list-list .account-list-copy {
    display: grid;
    grid-template-columns: minmax(180px,.7fr) minmax(160px,.55fr) minmax(220px,1fr);
    align-items: center;
    gap: 18px;
  }

  .accounts-list-list .account-list-copy h3,
  .accounts-list-list .account-list-copy p,
  .accounts-list-list .account-list-copy > span {
    margin: 0;
  }

  .accounts-list-list .account-list-copy p {
    font-size: 10px;
  }

  .accounts-list-list .account-list-copy > span {
    font-size: 9px;
  }

  .accounts-list-list .account-list-score {
    min-width: 210px;
  }

  .accounts-list-list .account-rating-summary {
    justify-content: flex-end;
  }

  .accounts-list-list .account-detail {
    margin-top: 15px;
    padding-top: 18px;
    grid-template-columns: 160px minmax(0,1fr);
  }

  .accounts-empty-result {
    grid-column: 1 / -1;
  }

  /* SETTINGS */
  .settings-screen {
    width: 100%;
    max-width: 1240px;
  }

  .settings-profile-hero {
    min-height: 142px;
    padding: 24px 26px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .settings-profile-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
  }

  .settings-profile-avatar {
    width: 76px;
    height: 76px;
    flex: none;
  }

  .settings-profile-main > div {
    min-width: 0;
  }

  .settings-profile-main span {
    color: #6d59e3;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1px;
  }

  .settings-profile-main h3 {
    margin: 4px 0 3px;
    font-size: 22px;
    letter-spacing: -.5px;
  }

  .settings-profile-main p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
  }

  .settings-profile-status {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .settings-profile-edit {
    height: 40px;
    padding: 0 14px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ece9ff;
    color: #5d49dd;
    font-size: 10px;
    font-weight: 900;
  }

  .settings-profile-edit .icon {
    width: 15px;
    height: 15px;
  }

  .settings-dashboard {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    margin-top: 18px;
  }

  .settings-panel {
    min-width: 0;
    padding: 20px;
    border-radius: 24px;
  }

  .settings-panel > header {
    min-height: 74px;
    padding: 1px 2px 15px;
    border-bottom: 1px solid var(--line);
  }

  .settings-panel > header span {
    color: #7562e5;
    font-size: 7.5px;
    font-weight: 950;
    letter-spacing: 1px;
  }

  .settings-panel > header h3 {
    margin: 4px 0 3px;
    font-size: 17px;
  }

  .settings-panel > header p {
    margin: 0;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.45;
  }

  .settings-option-grid {
    display: grid;
    gap: 8px;
    padding-top: 12px;
  }

  .settings-option {
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: 43px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 10px 11px;
    border-radius: 17px;
    background: rgba(247,248,255,.70);
    border: 1px solid rgba(92,102,160,.07);
    text-align: left;
  }

  button.settings-option {
    cursor: pointer;
  }

  button.settings-option:hover {
    background: #fff;
    border-color: rgba(99,86,255,.13);
    box-shadow: 0 8px 22px rgba(72,67,145,.07);
  }

  .settings-option .setting-icon {
    width: 43px;
    height: 43px;
    margin: 0;
  }

  .settings-option-copy {
    min-width: 0;
  }

  .settings-option-copy h4 {
    margin: 0;
    font-size: 11.5px;
  }

  .settings-option-copy p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.35;
  }

  .settings-option-arrow,
  .settings-option-ok {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #8a91a7;
  }

  .settings-option-arrow .icon,
  .settings-option-ok .icon {
    width: 15px;
    height: 15px;
  }

  .settings-option-ok {
    color: #14925c;
    background: #e3f8ed;
  }

  .settings-option .theme-cycle {
    min-width: 90px;
  }

  .settings-session {
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .settings-session > div {
    display: grid;
    gap: 3px;
  }

  .settings-session > div span {
    color: #8174ca;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: 1px;
  }

  .settings-session > div strong {
    font-size: 12px;
  }

  .settings-session > div small {
    color: var(--muted);
    font-size: 9px;
  }

  .settings-signout {
    height: 40px;
    padding: 0 14px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff0f3;
    color: #d42e52;
    font-size: 10px;
    font-weight: 900;
  }

  .settings-signout .icon {
    width: 15px;
    height: 15px;
  }

  .settings-legal-links {
    margin-top: 18px;
  }

  /* SERVICES */
  .service-order-form label > small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.35;
    font-weight: 600;
  }

  html.dark-theme .accounts-commandbar {
    background: rgba(17,19,24,.94);
    border-color: rgba(255,255,255,.07);
  }

  html.dark-theme .accounts-commandbar .accounts-search,
  html.dark-theme .accounts-layout-toggle,
  html.dark-theme .settings-option {
    background: #15181d;
    border-color: rgba(255,255,255,.06);
  }

  html.dark-theme .accounts-layout-toggle button.active {
    background: #211a3a;
    color: #b6a9ff;
  }

  html.dark-theme .settings-profile-edit {
    background: #211a3a;
    color: #b6a9ff;
  }

  html.dark-theme button.settings-option:hover {
    background: #191c21;
    border-color: rgba(155,140,255,.15);
  }

  html.dark-theme .settings-option-ok {
    background: #14251e;
    color: #55d69e;
  }

  html.dark-theme .settings-signout {
    background: #2a171d;
    color: #ff879e;
  }
}

@media (min-width: 1400px) {
  .accounts-list-cards {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .accounts-list-cards .account-card.expanded {
    grid-column: 1 / -1;
  }

  .web-home-layout {
    grid-template-columns: 370px minmax(720px, 900px);
    gap: 42px;
  }
}

@media (min-width: 760px) and (max-width: 1050px) {
  .accounts-commandbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .accounts-commandbar .accounts-view-tabs,
  .accounts-commandbar .accounts-search {
    grid-column: 1 / -1;
  }

  .accounts-layout-toggle {
    display: flex;
  }

  .settings-profile-hero,
  .settings-session {
    align-items: flex-start;
    flex-direction: column;
  }

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


/* Narrow desktop-window fallback. Mobile devices still receive the original PWA repo. */
@media (max-width: 759px) {
  .accounts-commandbar {
    display: grid;
    gap: 9px;
    margin: 12px 0;
    padding: 9px;
    border-radius: 19px;
  }

  .accounts-commandbar .accounts-view-tabs {
    margin: 0;
  }

  .accounts-layout-toggle {
    display: flex;
    gap: 5px;
  }

  .accounts-layout-toggle button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f0f1f6;
    color: #7d849e;
  }

  .accounts-layout-toggle button.active {
    background: #ece8ff;
    color: #5e49df;
  }

  .settings-profile-hero {
    padding: 16px;
    border-radius: 23px;
    display: grid;
    gap: 14px;
  }

  .settings-profile-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .settings-profile-avatar {
    width: 58px;
    height: 58px;
  }

  .settings-profile-main span {
    font-size: 7px;
    color: #6956df;
    font-weight: 900;
    letter-spacing: 1px;
  }

  .settings-profile-main h3 {
    margin: 3px 0;
    font-size: 16px;
  }

  .settings-profile-main p {
    margin: 0;
    color: var(--muted);
    font-size: 9px;
  }

  .settings-profile-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .settings-profile-edit {
    padding: 10px 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ece9ff;
    color: #5d49dd;
    font-size: 9px;
    font-weight: 900;
  }

  .settings-dashboard {
    display: grid;
    gap: 11px;
    margin-top: 12px;
  }

  .settings-panel {
    padding: 15px;
    border-radius: 22px;
  }

  .settings-panel > header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }

  .settings-panel > header span {
    color: #7562e5;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: 1px;
  }

  .settings-panel > header h3 {
    margin: 3px 0;
    font-size: 14px;
  }

  .settings-panel > header p {
    margin: 0;
    color: var(--muted);
    font-size: 8px;
  }

  .settings-option-grid {
    display: grid;
    gap: 7px;
    padding-top: 10px;
  }

  .settings-option {
    width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 9px;
    border-radius: 15px;
    background: rgba(247,248,255,.74);
    text-align: left;
  }

  .settings-option-copy h4 {
    margin: 0;
    font-size: 10px;
  }

  .settings-option-copy p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 8px;
  }

  .settings-session {
    margin-top: 11px;
    padding: 14px;
    border-radius: 19px;
    display: grid;
    gap: 11px;
  }

  .settings-session > div {
    display: grid;
    gap: 2px;
  }

  .settings-session > div span,
  .settings-session > div small {
    font-size: 8px;
    color: var(--muted);
  }

  .settings-signout {
    padding: 11px;
    border-radius: 12px;
    background: #fff0f3;
    color: #d42e52;
    font-size: 9px;
    font-weight: 900;
  }
}


/* Task account rotation */
@media (min-width: 760px) {
  .task-auto-switch,
  .task-account-growth {
    width: 100%;
    margin: 0;
    border-radius: 22px;
  }

  .task-auto-switch {
    min-height: 138px;
    padding: 16px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 12px;
    align-items: start;
  }

  .task-auto-switch-icon,
  .task-account-growth-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,#ece8ff,#e7f3ff);
    color: #5d49df;
  }

  .task-auto-switch-icon .icon,
  .task-account-growth-icon .icon {
    width: 19px;
    height: 19px;
  }

  .task-auto-switch-copy {
    min-width: 0;
  }

  .task-auto-switch-copy small,
  .task-account-growth small {
    display: block;
    color: #7461df;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .95px;
  }

  .task-auto-switch-copy strong,
  .task-account-growth strong {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
  }

  .task-auto-switch-copy p,
  .task-account-growth p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 8.7px;
    line-height: 1.42;
  }

  .task-auto-switch-copy > span {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #68708c;
    font-size: 8px;
    font-weight: 750;
  }

  .task-auto-switch-copy > span .icon {
    width: 12px;
    height: 12px;
  }

  .task-auto-switch.ready .task-auto-switch-copy > span {
    color: #0a8752;
  }

  .task-auto-switch.waiting {
    opacity: .86;
  }

  .task-auto-switch > .toggle {
    margin-top: 2px;
  }

  .task-auto-switch > .toggle:disabled {
    opacity: .42;
    cursor: not-allowed;
  }

  .task-account-growth {
    min-height: 150px;
    padding: 16px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 12px;
  }

  .task-account-growth > div {
    min-width: 0;
  }

  .task-account-growth > button {
    grid-column: 1 / -1;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #ece9ff;
    color: #5c49dd;
    font-size: 9px;
    font-weight: 900;
  }

  .task-account-growth > button .icon {
    width: 15px;
    height: 15px;
  }

  html.dark-theme .task-auto-switch-icon,
  html.dark-theme .task-account-growth-icon,
  html.dark-theme .task-account-growth > button {
    background: #211a3a;
    color: #b7abff;
  }
}

@media (max-width: 759px) {
  .task-auto-switch,
  .task-account-growth {
    margin: 10px 0;
    padding: 14px;
    border-radius: 20px;
  }

  .task-auto-switch {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: 10px;
    align-items: start;
  }

  .task-auto-switch-icon,
  .task-account-growth-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #ece9ff;
    color: #5d49df;
  }

  .task-auto-switch-copy small,
  .task-account-growth small {
    color: #7461df;
    font-size: 7px;
    font-weight: 900;
  }

  .task-auto-switch-copy strong,
  .task-account-growth strong {
    display: block;
    margin-top: 3px;
    font-size: 10px;
  }

  .task-auto-switch-copy p,
  .task-account-growth p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.4;
  }

  .task-auto-switch-copy > span {
    margin-top: 7px;
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 7.5px;
    color: var(--muted);
  }

  .task-account-growth {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 10px;
  }

  .task-account-growth > button {
    grid-column: 1 / -1;
    min-height: 38px;
    border-radius: 12px;
    background: #ece9ff;
    color: #5c49dd;
    font-size: 9px;
    font-weight: 900;
  }
}