/* Stellar AI Settings — premium compact system v45 */

.panel.settings-panel-wide{
  width:min(900px,calc(100vw - 40px))!important;
  max-height:86dvh!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:24px!important;
  background:#101012!important;
  box-shadow:0 34px 120px rgba(0,0,0,.5)!important;
}

.panel.settings-panel-wide .panel-head{
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  padding:10px 12px 10px 20px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  background:rgba(16,16,18,.94)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.panel.settings-panel-wide .panel-head>div{min-width:0}
.panel.settings-panel-wide .panel-head h2{
  margin:0!important;
  color:#f7f7f8!important;
  font-size:20px!important;
  font-weight:680!important;
  letter-spacing:-.035em!important;
}
.panel.settings-panel-wide .panel-head p{
  margin:3px 0 0!important;
  max-width:590px!important;
  color:#85858e!important;
  font-size:11px!important;
  line-height:1.35!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.panel.settings-panel-wide .close{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#a7a7b0!important;
  font-size:23px!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease!important;
}
.panel.settings-panel-wide .close:hover{
  border-color:rgba(255,255,255,.08)!important;
  background:#1b1b1e!important;
  color:#fff!important;
}
.panel.settings-panel-wide .panel-body{
  padding:0!important;
  overflow:hidden!important;
  background:#101012!important;
}

.settings-dev-shell{
  display:grid!important;
  grid-template-columns:210px minmax(0,1fr)!important;
  min-height:520px!important;
  height:min(650px,calc(86dvh - 65px))!important;
  background:#101012!important;
}
.settings-dev-nav{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding:14px 12px!important;
  border-right:1px solid rgba(255,255,255,.065)!important;
  background:#0c0c0e!important;
}
.settings-dev-account{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:58px!important;
  padding:9px 10px!important;
  margin:0 0 4px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:14px!important;
  background:#141416!important;
}
.settings-dev-account-avatar{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:12px!important;
  background:#f0f0f2!important;
  color:#111114!important;
  font-size:13px!important;
  font-weight:850!important;
}
.settings-dev-account-copy{
  min-width:0!important;
  display:grid!important;
  gap:2px!important;
}
.settings-dev-account-copy strong,
.settings-dev-account-copy small{
  min-width:0!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.settings-dev-account-copy strong{
  color:#efeff1!important;
  font-size:12px!important;
  font-weight:760!important;
}
.settings-dev-account-copy small{
  color:#777780!important;
  font-size:10px!important;
}

.settings-dev-nav-tabs{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
}
.settings-dev-tab{
  position:relative!important;
  width:100%!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 12px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  background:transparent!important;
  color:#8d8d96!important;
  font-size:12px!important;
  font-weight:700!important;
  text-align:left!important;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease!important;
}
.settings-dev-tab::before{
  content:""!important;
  width:6px!important;
  height:6px!important;
  flex:0 0 6px!important;
  margin-right:10px!important;
  border-radius:999px!important;
  background:#3b3b41!important;
  transition:background-color .14s ease,box-shadow .14s ease!important;
}
.settings-dev-tab:hover{
  background:#151518!important;
  color:#dcdce1!important;
}
.settings-dev-tab[aria-selected="true"]{
  border-color:rgba(157,140,255,.16)!important;
  background:rgba(157,140,255,.08)!important;
  color:#f4f3ff!important;
}
.settings-dev-tab[aria-selected="true"]::before{
  background:#9d8cff!important;
  box-shadow:0 0 12px rgba(157,140,255,.5)!important;
}
.settings-dev-nav-footer{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
  margin-top:auto!important;
  padding-top:10px!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
}
.settings-dev-nav-footer .btn{
  min-width:0!important;
  min-height:40px!important;
  padding:0 8px!important;
  border-radius:10px!important;
  font-size:10px!important;
}
.settings-dev-nav-footer .danger{
  border-color:rgba(255,123,123,.14)!important;
  background:transparent!important;
  color:#c99090!important;
}

.settings-dev-content{
  min-width:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  padding:24px 26px 28px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#34343a transparent!important;
  background:
    radial-gradient(520px 220px at 85% -6%,rgba(157,140,255,.055),transparent 70%),
    #101012!important;
}
.settings-dev-content::-webkit-scrollbar{width:8px!important}
.settings-dev-content::-webkit-scrollbar-thumb{
  border:2px solid transparent!important;
  border-radius:999px!important;
  background:#333339!important;
  background-clip:padding-box!important;
}

.settings-dev-pane[hidden]{display:none!important}
.settings-dev-pane{
  max-width:650px!important;
  margin:0 auto!important;
}
.settings-dev-heading{
  margin:0 0 18px!important;
  padding:0 1px!important;
}
.settings-dev-kicker{
  margin:0 0 7px!important;
  color:#8f83ef!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
.settings-dev-heading h3{
  margin:0!important;
  color:#f4f4f6!important;
  font-size:27px!important;
  line-height:1.05!important;
  font-weight:650!important;
  letter-spacing:-.045em!important;
}
.settings-dev-heading>p:last-child{
  max-width:560px!important;
  margin:7px 0 0!important;
  color:#8e8e97!important;
  font-size:12px!important;
  line-height:1.55!important;
}

.settings-dev-card,
.settings-usage-hero{
  margin:0 0 10px!important;
  padding:17px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:17px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.018),transparent 36%),
    #151517!important;
  box-shadow:none!important;
}
.settings-dev-card:hover{
  border-color:rgba(255,255,255,.105)!important;
}
.settings-dev-card-title{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
.settings-dev-card-title>div{min-width:0!important}
.settings-dev-card-title strong{
  display:block!important;
  margin:0!important;
  color:#ededf0!important;
  font-size:13px!important;
  font-weight:760!important;
  letter-spacing:-.015em!important;
}
.settings-dev-card-title small{
  display:block!important;
  max-width:530px!important;
  margin:4px 0 0!important;
  color:#7f7f88!important;
  font-size:10.5px!important;
  line-height:1.55!important;
}

.settings-stack-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.settings-stack-card{
  position:relative!important;
  min-width:0!important;
  min-height:74px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px 12px!important;
  border:1px solid rgba(255,255,255,.065)!important;
  border-radius:13px!important;
  background:#101012!important;
  cursor:pointer!important;
  transition:border-color .14s ease,background-color .14s ease,transform .14s ease!important;
}
.settings-stack-card:hover{
  border-color:rgba(255,255,255,.13)!important;
  background:#131315!important;
  transform:translateY(-1px)!important;
}
.settings-stack-card input{
  width:16px!important;
  height:16px!important;
  margin:0!important;
  accent-color:#9d8cff!important;
}
.settings-stack-card span{
  min-width:0!important;
  display:grid!important;
  gap:2px!important;
}
.settings-stack-card b{
  color:#e8e8ec!important;
  font-size:12px!important;
  font-weight:750!important;
}
.settings-stack-card em{
  color:#777780!important;
  font-size:9.5px!important;
  font-style:normal!important;
}
.settings-stack-card:has(input:checked){
  border-color:rgba(157,140,255,.34)!important;
  background:rgba(157,140,255,.07)!important;
}

.settings-toggle-row{
  min-height:62px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:8px 0!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
.settings-toggle-row:last-child{
  border-bottom:0!important;
  padding-bottom:0!important;
}
.settings-toggle-row:first-child{padding-top:0!important}
.settings-toggle-copy{
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
}
.settings-toggle-copy strong{
  color:#ededf0!important;
  font-size:12px!important;
  font-weight:720!important;
}
.settings-toggle-copy small{
  color:#7f7f88!important;
  font-size:10.5px!important;
  line-height:1.45!important;
}
.settings-switch{
  position:relative!important;
  width:44px!important;
  height:26px!important;
  min-width:44px!important;
  min-height:26px!important;
  flex:0 0 44px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:999px!important;
  background:#26262b!important;
}
.settings-switch::after{
  content:""!important;
  position:absolute!important;
  top:3px!important;
  left:3px!important;
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  background:#9a9aa2!important;
  transition:transform .16s ease,background-color .16s ease!important;
}
.settings-switch[aria-checked="true"]{
  border-color:rgba(157,140,255,.42)!important;
  background:rgba(157,140,255,.28)!important;
}
.settings-switch[aria-checked="true"]::after{
  transform:translateX(18px)!important;
  background:#f4f1ff!important;
}

.settings-dev-card .inline-actions{
  display:flex!important;
  gap:8px!important;
  margin:0!important;
}
.settings-dev-card .inline-actions .btn{
  min-height:42px!important;
  flex:1 1 0!important;
  border-radius:11px!important;
  font-size:11px!important;
}
.settings-dev-card .btn.primary,
.settings-usage-hero .btn.primary,
.settings-report-actions .btn.primary{
  border:1px solid #f0f0f2!important;
  background:#f0f0f2!important;
  color:#111114!important;
  box-shadow:none!important;
}
.settings-dev-card .btn.ghost,
.settings-usage-hero .btn.ghost,
.settings-report-actions .btn.ghost{
  border-color:rgba(255,255,255,.085)!important;
  background:#101012!important;
  color:#d1d1d7!important;
}

.settings-discord-profile{
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:11px!important;
  padding:10px!important;
  border:1px solid rgba(255,255,255,.065)!important;
  border-radius:13px!important;
  background:#101012!important;
}
.settings-discord-avatar{
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:12px!important;
  background:#1a1a1e!important;
  color:#bdb5ff!important;
}
.settings-discord-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}
.settings-discord-copy{
  min-width:0!important;
  display:grid!important;
  gap:2px!important;
}
.settings-discord-copy strong,
.settings-discord-copy small{
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.settings-discord-copy strong{font-size:12px!important;color:#e9e9ec!important}
.settings-discord-copy small{font-size:9.5px!important;color:#777780!important}
.settings-connected-pill{
  min-height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 8px!important;
  border:1px solid rgba(112,226,173,.18)!important;
  border-radius:999px!important;
  background:rgba(112,226,173,.07)!important;
  color:#8bdeb4!important;
  font-size:8.5px!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
}

.settings-api-key-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
}
.settings-api-key-field{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:11px!important;
  background:#0d0d0f!important;
  color:#cfcfd5!important;
  padding:0 12px!important;
  font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  outline:none!important;
}
.settings-api-key-row .btn{min-height:44px!important;border-radius:11px!important}
.settings-api-key-actions{
  display:flex!important;
  justify-content:flex-start!important;
  margin-top:8px!important;
}
.settings-api-key-actions .btn{min-height:38px!important;font-size:10px!important}
.settings-api-key-note{
  margin:9px 0 0!important;
  color:#73737c!important;
  font-size:9.5px!important;
  line-height:1.5!important;
}

.settings-usage-hero{
  position:relative!important;
  overflow:hidden!important;
  padding:20px!important;
  border-color:rgba(157,140,255,.2)!important;
  background:
    radial-gradient(360px 160px at 95% 0%,rgba(157,140,255,.11),transparent 70%),
    #151517!important;
}
.settings-usage-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
}
.settings-usage-head>div>strong{
  display:block!important;
  color:#fff!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:680!important;
  letter-spacing:-.05em!important;
}
.settings-usage-head>span{
  color:#9898a1!important;
  font-size:10px!important;
  text-align:right!important;
}
.settings-usage-track{
  height:7px!important;
  margin:16px 0!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:#28282d!important;
}
.settings-usage-fill{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#f0edff,#9d8cff)!important;
}
.settings-billing-meta{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  margin:0 0 14px!important;
}
.settings-billing-meta>div{
  min-width:0!important;
  padding:10px 11px!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:11px!important;
  background:#101012!important;
}
.settings-billing-meta span,
.settings-billing-meta strong{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.settings-billing-meta span{
  color:#74747d!important;
  font-size:9px!important;
}
.settings-billing-meta strong{
  margin-top:3px!important;
  color:#e4e4e8!important;
  font-size:11px!important;
}

.settings-report-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:10px!important;
}
.settings-report-card{
  min-width:0!important;
  min-height:108px!important;
  display:flex!important;
  flex-direction:column!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.065)!important;
  border-radius:14px!important;
  background:#151517!important;
}
.settings-report-card.settings-report-primary{
  border-color:rgba(157,140,255,.22)!important;
  background:rgba(157,140,255,.065)!important;
}
.settings-report-card span{
  color:#777780!important;
  font-size:9.5px!important;
}
.settings-report-card strong{
  margin:9px 0 4px!important;
  color:#f0f0f2!important;
  font-size:24px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}
.settings-report-card small{
  margin-top:auto!important;
  color:#74747d!important;
  font-size:9px!important;
  line-height:1.35!important;
}
.settings-report-list{
  display:grid!important;
  gap:0!important;
}
.settings-report-list>div{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
}
.settings-report-list>div:last-child{border-bottom:0!important}
.settings-report-list span{
  color:#7f7f88!important;
  font-size:10.5px!important;
}
.settings-report-list strong{
  min-width:0!important;
  max-width:60%!important;
  color:#dadade!important;
  font-size:10.5px!important;
  text-align:right!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.settings-report-actions{
  display:flex!important;
  gap:8px!important;
  margin-top:10px!important;
}
.settings-report-actions .btn{
  min-height:42px!important;
  flex:1 1 0!important;
  border-radius:11px!important;
  font-size:10.5px!important;
}
.settings-report-note{
  margin:12px 1px 0!important;
  color:#696971!important;
  font-size:9.5px!important;
  line-height:1.5!important;
}

.settings-panel-wide .settings-sheet{
  max-width:500px!important;
  margin:0 auto!important;
  display:grid!important;
  gap:10px!important;
  padding:10px 0!important;
}
.settings-panel-wide .settings-sheet .card,
.settings-panel-wide .settings-sheet .google-box{
  padding:16px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:15px!important;
  background:#151517!important;
}
.settings-panel-wide .settings-sheet .card>strong,
.settings-panel-wide .settings-sheet .google-box>strong{
  color:#eeeef1!important;
  font-size:13px!important;
}
.settings-panel-wide .settings-sheet .card>small,
.settings-panel-wide .settings-sheet .google-box>small{
  margin-top:4px!important;
  color:#7f7f88!important;
  font-size:10.5px!important;
}
.settings-panel-wide .settings-sheet .field input{
  min-height:46px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:11px!important;
  background:#0d0d0f!important;
}
.settings-panel-wide .settings-sheet .settings-auth-note{
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:12px!important;
  background:#131315!important;
  color:#777780!important;
  font-size:10px!important;
}
.settings-panel-wide .auth-divider{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#6f6f77!important;
  font-size:9px!important;
}
.settings-panel-wide .auth-divider::before,
.settings-panel-wide .auth-divider::after{
  content:""!important;
  height:1px!important;
  flex:1!important;
  background:rgba(255,255,255,.06)!important;
}

@media(max-width:700px){
  .panel-backdrop.open{
    align-items:end!important;
    padding:0!important;
  }
  .panel.settings-panel-wide{
    width:100%!important;
    max-height:90dvh!important;
    border-radius:24px 24px 0 0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
  }
  .panel.settings-panel-wide .panel-head{
    min-height:60px!important;
    padding:8px 10px 8px 14px!important;
  }
  .panel.settings-panel-wide .panel-head h2{font-size:18px!important}
  .panel.settings-panel-wide .panel-head p{
    max-width:calc(100vw - 92px)!important;
    font-size:10px!important;
  }
  .settings-dev-shell{
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    min-height:0!important;
    height:calc(90dvh - 60px)!important;
  }
  .settings-dev-nav{
    position:relative!important;
    z-index:3!important;
    display:block!important;
    padding:8px 10px 7px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.065)!important;
    background:rgba(12,12,14,.98)!important;
  }
  .settings-dev-account{display:none!important}
  .settings-dev-nav-tabs{
    display:flex!important;
    gap:5px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
    padding-bottom:1px!important;
  }
  .settings-dev-nav-tabs::-webkit-scrollbar{display:none!important}
  .settings-dev-tab{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:44px!important;
    padding:0 13px!important;
    border-radius:999px!important;
    white-space:nowrap!important;
  }
  .settings-dev-tab::before{display:none!important}
  .settings-dev-tab[aria-selected="true"]{
    border-color:rgba(157,140,255,.22)!important;
    background:rgba(157,140,255,.1)!important;
  }
  .settings-dev-nav-footer{display:none!important}
  .settings-dev-content{
    min-height:0!important;
    padding:16px 14px max(24px,calc(14px + env(safe-area-inset-bottom)))!important;
  }
  .settings-dev-pane{max-width:none!important}
  .settings-dev-heading{margin-bottom:14px!important}
  .settings-dev-heading h3{font-size:24px!important}
  .settings-dev-heading>p:last-child{font-size:11px!important}
  .settings-dev-card,
  .settings-usage-hero{
    padding:15px!important;
    border-radius:15px!important;
  }
  .settings-stack-grid{grid-template-columns:1fr 1fr!important}
  .settings-stack-card{min-height:68px!important}
  .settings-toggle-row{min-height:66px!important}
  .settings-billing-meta{grid-template-columns:1fr 1fr!important}
  .settings-billing-meta>div:last-child:nth-child(odd){grid-column:1/-1!important}
  .settings-report-grid{grid-template-columns:1fr 1fr!important}
  .settings-report-card{min-height:98px!important}
  .settings-discord-profile{
    grid-template-columns:40px minmax(0,1fr)!important;
  }
  .settings-discord-profile>.btn,
  .settings-connected-pill{
    grid-column:1/-1!important;
    justify-self:start!important;
  }
  .settings-api-key-row{grid-template-columns:1fr!important}
  .settings-api-key-row .btn{width:100%!important}
}

@media(max-width:420px){
  .settings-stack-grid{grid-template-columns:1fr!important}
  .settings-report-grid{grid-template-columns:1fr 1fr!important}
  .settings-usage-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .settings-usage-head>span{text-align:left!important}
  .settings-billing-meta{grid-template-columns:1fr!important}
  .settings-billing-meta>div:last-child:nth-child(odd){grid-column:auto!important}
  .settings-dev-card .inline-actions{display:grid!important}
  .settings-report-actions{display:grid!important}
}


/* Stellar AI Settings v46 — ChatGPT-inspired calm settings surface.
   Keep Stellar's controls and identity; simplify the presentation. */

.panel.settings-panel-wide{
  width:min(900px,calc(100vw - 40px))!important;
  max-height:86dvh!important;
  border:1px solid #333!important;
  border-radius:18px!important;
  background:#212121!important;
  box-shadow:0 20px 70px rgba(0,0,0,.42)!important;
}

.panel.settings-panel-wide .panel-head{
  min-height:60px!important;
  padding:8px 10px 8px 18px!important;
  border-bottom:1px solid #333!important;
  background:#212121!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.panel.settings-panel-wide .panel-head h2{
  color:#ececec!important;
  font-size:18px!important;
  font-weight:650!important;
  letter-spacing:-.02em!important;
}
.panel.settings-panel-wide .panel-head p{
  display:none!important;
}
.panel.settings-panel-wide .close{
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#b4b4b4!important;
}
.panel.settings-panel-wide .close:hover{
  background:#2f2f2f!important;
  color:#fff!important;
}

.panel.settings-panel-wide .panel-body{
  background:#212121!important;
}
.settings-dev-shell{
  grid-template-columns:210px minmax(0,1fr)!important;
  height:min(650px,calc(86dvh - 60px))!important;
  background:#212121!important;
}

.settings-dev-nav{
  gap:6px!important;
  padding:12px 10px!important;
  border-right:1px solid #333!important;
  background:#171717!important;
}
.settings-dev-account{
  min-height:52px!important;
  padding:7px 8px!important;
  margin-bottom:6px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
}
.settings-dev-account:hover{
  background:#212121!important;
}
.settings-dev-account-avatar{
  width:34px!important;
  height:34px!important;
  border:0!important;
  border-radius:50%!important;
  background:#ececec!important;
  color:#111!important;
  font-size:12px!important;
}
.settings-dev-account-copy strong{
  color:#ececec!important;
  font-size:11.5px!important;
}
.settings-dev-account-copy small{
  color:#8f8f8f!important;
  font-size:9.5px!important;
}

.settings-dev-nav-tabs{
  gap:2px!important;
}
.settings-dev-tab{
  min-height:40px!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#b4b4b4!important;
  font-size:12px!important;
  font-weight:520!important;
}
.settings-dev-tab::before{
  display:none!important;
}
.settings-dev-tab:hover{
  background:#212121!important;
  color:#ececec!important;
}
.settings-dev-tab[aria-selected="true"]{
  border:0!important;
  background:#2f2f2f!important;
  color:#fff!important;
  font-weight:600!important;
}
.settings-dev-nav-footer{
  grid-template-columns:1fr!important;
  gap:3px!important;
  padding-top:8px!important;
  border-top:1px solid #2a2a2a!important;
}
.settings-dev-nav-footer .btn{
  justify-content:flex-start!important;
  min-height:38px!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#b4b4b4!important;
  font-size:10.5px!important;
}
.settings-dev-nav-footer .btn:hover{
  background:#212121!important;
  color:#fff!important;
}
.settings-dev-nav-footer .danger{
  color:#e98b8b!important;
}

.settings-dev-content{
  padding:24px 30px 30px!important;
  background:#212121!important;
  scrollbar-color:#4a4a4a transparent!important;
}
.settings-dev-content::-webkit-scrollbar-thumb{
  background:#4a4a4a!important;
}

.settings-dev-pane{
  max-width:620px!important;
}
.settings-dev-heading{
  margin-bottom:18px!important;
}
.settings-dev-kicker{
  display:none!important;
}
.settings-dev-heading h3{
  color:#ececec!important;
  font-size:20px!important;
  font-weight:650!important;
  letter-spacing:-.025em!important;
}
.settings-dev-heading>p:last-child{
  margin-top:5px!important;
  color:#9b9b9b!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}

.settings-dev-card,
.settings-usage-hero{
  margin:0!important;
  padding:16px 0!important;
  border:0!important;
  border-bottom:1px solid #333!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.settings-dev-card:first-of-type,
.settings-usage-hero:first-of-type{
  border-top:1px solid #333!important;
}
.settings-dev-card:hover{
  border-color:#333!important;
}
.settings-dev-card-title{
  margin-bottom:12px!important;
}
.settings-dev-card-title strong{
  color:#ececec!important;
  font-size:12.5px!important;
  font-weight:600!important;
}
.settings-dev-card-title small{
  color:#8f8f8f!important;
  font-size:10.5px!important;
}

.settings-stack-grid{
  gap:7px!important;
}
.settings-stack-card{
  min-height:62px!important;
  padding:9px 10px!important;
  border:1px solid #3a3a3a!important;
  border-radius:10px!important;
  background:#262626!important;
  transform:none!important;
}
.settings-stack-card:hover{
  border-color:#4a4a4a!important;
  background:#2b2b2b!important;
  transform:none!important;
}
.settings-stack-card input{
  accent-color:#fff!important;
}
.settings-stack-card b{
  color:#ececec!important;
  font-size:11.5px!important;
  font-weight:600!important;
}
.settings-stack-card em{
  color:#8c8c8c!important;
  font-size:9px!important;
}
.settings-stack-card:has(input:checked){
  border-color:#6b6b6b!important;
  background:#303030!important;
}

.settings-toggle-row{
  min-height:58px!important;
  padding:9px 0!important;
  border-bottom:1px solid #333!important;
}
.settings-toggle-row:last-child{border-bottom:0!important}
.settings-toggle-copy strong{
  color:#ececec!important;
  font-size:12px!important;
  font-weight:550!important;
}
.settings-toggle-copy small{
  color:#8f8f8f!important;
  font-size:10.5px!important;
}
.settings-switch{
  width:42px!important;
  height:24px!important;
  min-width:42px!important;
  min-height:24px!important;
  flex-basis:42px!important;
  border:0!important;
  background:#4a4a4a!important;
}
.settings-switch::after{
  top:3px!important;
  left:3px!important;
  width:18px!important;
  height:18px!important;
  background:#d0d0d0!important;
}
.settings-switch[aria-checked="true"]{
  background:#e7e7e7!important;
}
.settings-switch[aria-checked="true"]::after{
  transform:translateX(18px)!important;
  background:#212121!important;
}

.settings-dev-card .inline-actions{
  gap:7px!important;
}
.settings-dev-card .inline-actions .btn,
.settings-report-actions .btn,
.settings-api-key-row .btn,
.settings-api-key-actions .btn,
.settings-usage-hero .btn{
  min-height:40px!important;
  border-radius:9px!important;
  font-size:10.5px!important;
}
.settings-dev-card .btn.primary,
.settings-usage-hero .btn.primary,
.settings-report-actions .btn.primary{
  border:1px solid #ececec!important;
  background:#ececec!important;
  color:#111!important;
}
.settings-dev-card .btn.primary:hover,
.settings-usage-hero .btn.primary:hover,
.settings-report-actions .btn.primary:hover{
  background:#fff!important;
}
.settings-dev-card .btn.ghost,
.settings-usage-hero .btn.ghost,
.settings-report-actions .btn.ghost{
  border:1px solid #3a3a3a!important;
  background:#262626!important;
  color:#d8d8d8!important;
}
.settings-dev-card .btn.ghost:hover,
.settings-usage-hero .btn.ghost:hover,
.settings-report-actions .btn.ghost:hover{
  background:#2f2f2f!important;
}

.settings-discord-profile{
  min-height:54px!important;
  padding:8px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.settings-discord-avatar{
  width:38px!important;
  height:38px!important;
  border:0!important;
  border-radius:50%!important;
  background:#303030!important;
  color:#d0d0d0!important;
}
.settings-discord-copy strong{
  color:#ececec!important;
}
.settings-discord-copy small{
  color:#8f8f8f!important;
}
.settings-connected-pill{
  border:0!important;
  background:#2f2f2f!important;
  color:#b4b4b4!important;
  letter-spacing:0!important;
}

.settings-api-key-field{
  min-height:42px!important;
  border:1px solid #3a3a3a!important;
  border-radius:9px!important;
  background:#171717!important;
  color:#d8d8d8!important;
}
.settings-api-key-note{
  color:#858585!important;
}

.settings-usage-hero{
  padding:18px 0!important;
  border-color:#333!important;
  background:transparent!important;
}
.settings-usage-head>div>strong{
  color:#ececec!important;
  font-size:30px!important;
  font-weight:650!important;
  letter-spacing:-.04em!important;
}
.settings-usage-head>span{
  color:#8f8f8f!important;
}
.settings-usage-track{
  height:6px!important;
  margin:15px 0!important;
  background:#3a3a3a!important;
}
.settings-usage-fill{
  background:#ececec!important;
}
.settings-billing-meta{
  gap:0!important;
  margin-bottom:14px!important;
}
.settings-billing-meta>div{
  padding:9px 11px!important;
  border:0!important;
  border-right:1px solid #333!important;
  border-radius:0!important;
  background:transparent!important;
}
.settings-billing-meta>div:last-child{border-right:0!important}
.settings-billing-meta span{color:#8a8a8a!important}
.settings-billing-meta strong{color:#e0e0e0!important}

.settings-report-grid{
  gap:7px!important;
}
.settings-report-card{
  min-height:100px!important;
  border:1px solid #333!important;
  border-radius:10px!important;
  background:#262626!important;
}
.settings-report-card.settings-report-primary{
  border-color:#444!important;
  background:#2b2b2b!important;
}
.settings-report-card span,
.settings-report-card small{
  color:#8f8f8f!important;
}
.settings-report-card strong{
  color:#ececec!important;
  font-size:22px!important;
}
.settings-report-list>div{
  border-bottom:1px solid #333!important;
}
.settings-report-list span{color:#8f8f8f!important}
.settings-report-list strong{color:#d8d8d8!important}
.settings-report-note{color:#777!important}

.settings-panel-wide .settings-sheet{
  max-width:470px!important;
}
.settings-panel-wide .settings-sheet .card,
.settings-panel-wide .settings-sheet .google-box{
  padding:15px!important;
  border:1px solid #333!important;
  border-radius:12px!important;
  background:#262626!important;
}
.settings-panel-wide .settings-sheet .card>strong,
.settings-panel-wide .settings-sheet .google-box>strong{
  color:#ececec!important;
}
.settings-panel-wide .settings-sheet .card>small,
.settings-panel-wide .settings-sheet .google-box>small{
  color:#8f8f8f!important;
}
.settings-panel-wide .settings-sheet .field input{
  border:1px solid #3a3a3a!important;
  border-radius:9px!important;
  background:#171717!important;
}
.settings-panel-wide .settings-sheet .settings-auth-note{
  border:0!important;
  background:transparent!important;
  color:#8a8a8a!important;
}
.settings-panel-wide .auth-divider{color:#777!important}
.settings-panel-wide .auth-divider::before,
.settings-panel-wide .auth-divider::after{background:#333!important}

@media(max-width:700px){
  .panel.settings-panel-wide{
    max-height:90dvh!important;
    border-color:#333!important;
    border-radius:18px 18px 0 0!important;
    background:#212121!important;
  }
  .panel.settings-panel-wide .panel-head{
    min-height:56px!important;
    border-bottom:1px solid #333!important;
    background:#212121!important;
  }
  .settings-dev-shell{
    height:calc(90dvh - 56px)!important;
  }
  .settings-dev-nav{
    padding:7px 10px!important;
    border-bottom:1px solid #333!important;
    background:#171717!important;
  }
  .settings-dev-nav-tabs{
    gap:4px!important;
    overflow-x:auto!important;
  }
  .settings-dev-tab{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:44px!important;
    padding:0 12px!important;
    border-radius:8px!important;
    white-space:nowrap!important;
  }
  .settings-dev-tab[aria-selected="true"]{
    background:#2f2f2f!important;
  }
  .settings-dev-content{
    padding:18px 16px max(24px,calc(14px + env(safe-area-inset-bottom)))!important;
    background:#212121!important;
  }
  .settings-dev-heading h3{font-size:19px!important}
  .settings-dev-card,
  .settings-usage-hero{
    padding:15px 0!important;
  }
  .settings-report-grid{grid-template-columns:1fr 1fr!important}
  .settings-billing-meta{
    grid-template-columns:1fr!important;
  }
  .settings-billing-meta>div{
    border-right:0!important;
    border-bottom:1px solid #333!important;
  }
  .settings-billing-meta>div:last-child{border-bottom:0!important}
}

@media(max-width:420px){
  .settings-dev-content{
    padding-inline:14px!important;
  }
  .settings-stack-grid{grid-template-columns:1fr!important}
  .settings-report-grid{grid-template-columns:1fr!important}
}