/* qPokoy OAuth brand styling — visual only, auth logic unchanged */
.qp-auth-yandex{
  height:44px;
  gap:10px;
  border-radius:11px;
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(148,163,184,.34) !important;
  color:#f8fafc !important;
  box-shadow:none !important;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}

/* Keep the existing Yandex markup/JS, but replace the old hand-drawn mark visually. */
.qp-auth-yandex .qp-auth-oauth-icon svg{
  display:none !important;
}

.qp-auth-yandex:hover{
  background:rgba(30,41,59,.9) !important;
  border-color:rgba(148,163,184,.52) !important;
}
.qp-auth-yandex:active{
  transform:translateY(1px);
  background:rgba(15,23,42,.9) !important;
}

/* Yandex ID mark: archived original Yandex LLC vector, presented on the brand-red disc. */
.qp-auth-yandex .qp-auth-oauth-icon{
  position:relative;
  display:block;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:#fc3f1d;
  overflow:hidden;
}
.qp-auth-yandex .qp-auth-oauth-icon::after{
  content:"";
  position:absolute;
  inset:3px;
  background:transparent url("https://upload.wikimedia.org/wikipedia/commons/8/81/Yandex_ID_icon.svg") center/contain no-repeat;
  filter:invert(1);
}

.qp-auth-oauth-label{font-weight:500;}

/* Final shared OAuth button surface. */
.qp-auth-oauth{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;padding:0 16px;background:linear-gradient(180deg,#101b2a 0%,#07111e 100%);border:1px solid rgba(201,218,244,.78);border-radius:22px;color:#f5f8ff;box-shadow:0 0 0 1px rgba(74,120,184,.26),0 5px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(67,110,171,.28);font-size:14px;font-weight:600;line-height:20px;letter-spacing:.01em;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.qp-auth-oauth-icon,.qp-auth-oauth-icon svg{display:block;width:24px;height:24px;flex:0 0 24px;}
.qp-auth-oauth:hover{background:linear-gradient(180deg,#14243a 0%,#091728 100%);border-color:#d6e4ff;box-shadow:0 0 0 1px rgba(103,157,235,.42),0 7px 17px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(67,110,171,.32);}
.qp-auth-oauth:active{transform:translateY(1px);background:#091421;box-shadow:0 0 0 1px rgba(103,157,235,.3),inset 0 1px 2px rgba(0,0,0,.35);}

/* Dark auth inputs only. OAuth buttons and auth behavior stay unchanged. */
html[data-theme="dark"] .qp-auth-field input{
  background:#0f172a !important;
  border-color:rgba(148,163,184,.28) !important;
  color:#f8fafc !important;
  caret-color:#f8fafc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  color-scheme:dark;
}
html[data-theme="dark"] .qp-auth-field input:focus{
  border-color:rgba(96,165,250,.72) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.14),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html[data-theme="dark"] .qp-auth-field input:-webkit-autofill,
html[data-theme="dark"] .qp-auth-field input:-webkit-autofill:hover,
html[data-theme="dark"] .qp-auth-field input:-webkit-autofill:focus,
html[data-theme="dark"] .qp-auth-field input:-webkit-autofill:active{
  -webkit-text-fill-color:#f8fafc !important;
  caret-color:#f8fafc !important;
  -webkit-box-shadow:0 0 0 1000px #0f172a inset !important;
  box-shadow:0 0 0 1000px #0f172a inset !important;
  border-color:rgba(148,163,184,.28) !important;
  transition:background-color 9999s ease-out 0s;
}
html[data-theme="dark"] .qp-auth-field input:-webkit-autofill:focus{
  border-color:rgba(96,165,250,.72) !important;
  -webkit-box-shadow:0 0 0 1000px #0f172a inset,0 0 0 3px rgba(59,130,246,.14) !important;
  box-shadow:0 0 0 1000px #0f172a inset,0 0 0 3px rgba(59,130,246,.14) !important;
}

/* Responsive abstract auth background. Built from CSS gradients, so it stays sharp on 4K/5K/ultrawide displays. */
html[data-theme="dark"] #qpAuthGate{
  isolation:isolate;
  overflow:hidden !important;
  background:
    radial-gradient(120% 86% at 50% -24%,rgba(72,99,135,.42) 0 18%,rgba(32,48,70,.20) 34%,transparent 52%),
    radial-gradient(80% 58% at -8% 72%,rgba(47,70,99,.34) 0 24%,transparent 54%),
    radial-gradient(86% 62% at 108% 32%,rgba(46,69,98,.32) 0 22%,transparent 53%),
    linear-gradient(145deg,#05080e 0%,#09111c 42%,#070c14 72%,#04070c 100%) !important;
}
html[data-theme="dark"] #qpAuthGate::before,
html[data-theme="dark"] #qpAuthGate::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
html[data-theme="dark"] #qpAuthGate::before{
  width:max(980px,86vw);
  height:max(520px,47vw);
  left:min(-280px,-16vw);
  bottom:min(-250px,-12vw);
  border-radius:50%;
  background:linear-gradient(165deg,rgba(52,76,108,.62) 0%,rgba(16,27,42,.92) 42%,rgba(5,9,15,.98) 72%);
  box-shadow:
    0 -1px 0 rgba(167,193,224,.16),
    0 -24px 72px rgba(72,101,139,.10),
    0 -70px 140px rgba(44,67,96,.08);
  transform:rotate(13deg);
  transform-origin:center;
}
html[data-theme="dark"] #qpAuthGate::after{
  width:max(1120px,92vw);
  height:max(500px,41vw);
  right:min(-360px,-20vw);
  top:min(-210px,-9vw);
  border-radius:50%;
  background:linear-gradient(345deg,rgba(54,79,112,.58) 0%,rgba(15,26,40,.94) 44%,rgba(5,9,15,.99) 76%);
  box-shadow:
    0 1px 0 rgba(157,185,218,.14),
    0 26px 80px rgba(64,91,126,.10),
    0 72px 150px rgba(42,64,91,.07);
  transform:rotate(-10deg);
  transform-origin:center;
}
html[data-theme="dark"] #qpAuthGate .qp-auth-card{
  position:relative;
  z-index:1;
}
@media (max-width:560px){
  html[data-theme="dark"] #qpAuthGate::before{
    width:150vw;
    height:78vw;
    left:-64vw;
    bottom:-10vw;
    opacity:.82;
  }
  html[data-theme="dark"] #qpAuthGate::after{
    width:160vw;
    height:72vw;
    right:-72vw;
    top:-8vw;
    opacity:.80;
  }
}
@media (min-width:2200px){
  html[data-theme="dark"] #qpAuthGate::before{width:76vw;height:38vw;left:-12vw;bottom:-11vw;}
  html[data-theme="dark"] #qpAuthGate::after{width:78vw;height:34vw;right:-14vw;top:-8vw;}
}

/* Desktop account settings: carry the mobile control style onto PC without changing billing/auth logic. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard{
    padding:20px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard .qp-account-row{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:10px !important;
    margin-top:12px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard .qp-account-email{
    grid-column:1 / -1 !important;
    min-width:0 !important;
    padding:12px 14px !important;
    overflow:hidden !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:var(--panel-muted) !important;
    color:var(--text) !important;
    font-size:14px !important;
    line-height:1.35 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingTerm{
    grid-column:1 / -1 !important;
    margin:0 !important;
    padding:0 2px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingPurchase,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAuthLogoutBtn,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingDisableRenew,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingUnlinkCard,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAuthDeleteAccountBtn{
    width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
    margin:0 !important;
    padding:0 14px !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings{
    margin-top:10px !important;
    padding-top:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings > div[style*="display:flex"]:not(#qpBillingDeleteWrap){
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:10px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingDeleteWrap{
    display:block !important;
    margin-top:10px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAuthDeleteAccountBtn{
    border-color:color-mix(in srgb,var(--danger) 34%,var(--border)) !important;
    background:color-mix(in srgb,var(--danger) 7%,var(--panel-muted)) !important;
    color:color-mix(in srgb,var(--danger) 82%,var(--text)) !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingStatus,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings > .settings-card-subtitle{
    padding:0 2px !important;
    line-height:1.4 !important;
  }
}

/* Desktop account settings: wide access action and exit beside account deletion. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard > .settings-title,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard > .settings-card-subtitle{
    grid-column:1 / -1 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard .qp-account-row,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings,
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings > div[style*="display:flex"]{
    display:contents !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountEmail{
    grid-column:1 / -1 !important;
    order:10;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingTerm{
    grid-column:1 / -1 !important;
    order:20;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingPurchase{
    grid-column:1 / -1 !important;
    order:30;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingDisableRenew{
    grid-column:1 !important;
    order:40;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingUnlinkCard{
    grid-column:2 !important;
    order:40;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAuthLogoutBtn{
    grid-column:1 !important;
    order:50;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAuthDeleteAccountBtn{
    grid-column:2 !important;
    order:50;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingStatus{
    grid-column:1 / -1 !important;
    order:60;
    margin-top:0 !important;
  }

  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings > .settings-card-subtitle{
    grid-column:1 / -1 !important;
    order:70;
    margin-top:0 !important;
  }
}

/* Desktop account settings: keep actions in the requested rows. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountEmail{grid-row:2 !important;}
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingTerm{grid-row:3 !important;}
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingPurchase{grid-row:4 !important;}
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingDisableRenew{grid-row:5 !important;}
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingUnlinkCard{grid-row:5 !important;}
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAuthLogoutBtn{grid-row:6 !important;}
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAuthDeleteAccountBtn{grid-row:6 !important;}
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingStatus{grid-row:7 !important;}
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpBillingSettings > .settings-card-subtitle{grid-row:8 !important;}
}

/* Keep desktop account action rows compact instead of stretching empty space between buttons. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #incomeAnalytics .analytics-settings-host #settings[data-settings-tab="data"] #qpAccountCard{
    align-content:start !important;
    grid-auto-rows:max-content !important;
    row-gap:10px !important;
  }
}

/* Legal/info order below Yandex OAuth; retain existing desktop typography. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #qpAuthYandex + nav + p{
    margin:10px 0 0 !important;
    font-size:11px !important;
    line-height:1.45 !important;
    text-align:center !important;
    opacity:.72 !important;
  }

  #qpAuthYandex + nav + p a{
    opacity:1 !important;
  }

  #qpAuthYandex + nav{
    margin-top:8px !important;
  }
}