/* FourColorComic v40.31.159 — unified Settings experience */

#settings{
  --set-bg:#061019;
  --set-panel:#08141d;
  --set-panel-soft:#0b1823;
  --set-line:#243947;
  --set-line-strong:#39586b;
  --set-text:#eef5f8;
  --set-muted:#93a6b2;
  --set-cyan:#67d7ff;
  --set-green:#7be4b2;
  --set-red:#ff7b86;
  max-width:1320px;
  margin:0 auto;
}
#settings>.settingsgrid.fcc159-retired-grid{display:none!important}
#settings .fcc159-settings-intro{
  position:relative;
  display:block!important;
  overflow:hidden;
  margin:0 0 14px!important;
  padding:20px 22px!important;
  border:1px solid rgba(103,215,255,.22)!important;
  border-radius:17px!important;
  background:
    radial-gradient(circle at 10% -25%,rgba(103,215,255,.11),transparent 35%),
    radial-gradient(circle at 96% 10%,rgba(113,87,255,.08),transparent 27%),
    linear-gradient(145deg,rgba(8,20,29,.98),rgba(5,13,20,.98))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18)!important;
}
#settings .fcc159-settings-intro:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,#63d9ff,#7464ff 55%,transparent 92%);
}
#settings .fcc159-settings-intro .badge{
  display:inline-flex;
  margin-bottom:7px;
  padding:5px 9px;
  border-color:rgba(123,228,178,.32)!important;
  background:rgba(123,228,178,.08)!important;
  color:#98efc2!important;
}
#settings .fcc159-settings-intro h1{
  margin:0 0 5px!important;
  font-size:clamp(25px,2.6vw,34px)!important;
  letter-spacing:-.025em;
}
#settings .fcc159-settings-intro p{
  max-width:760px!important;
  margin:0!important;
  color:#a5b6c0!important;
  font-size:12px!important;
  line-height:1.55!important;
}

#settings .fcc159-settings-shell{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:14px;
  align-items:start;
}
#settings .fcc159-settings-rail{
  position:sticky;
  top:86px;
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid var(--set-line);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(8,20,29,.97),rgba(5,13,20,.97));
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
#settings .fcc159-account-summary{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:3px 2px 12px;
  border-bottom:1px solid #20333f;
}
#settings .fcc159-summary-avatar{
  width:44px;
  height:44px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid #4b6782;
  border-radius:50%;
  background:linear-gradient(145deg,#4fbbe8,#6b63f5);
  color:white;
  font-size:16px;
  font-weight:900;
}
#settings .fcc159-summary-avatar img{width:100%;height:100%;object-fit:cover}
#settings .fcc159-account-summary>div:last-child{min-width:0;display:grid;gap:2px}
#settings .fcc159-account-summary b,
#settings .fcc159-account-summary small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#settings .fcc159-account-summary b{font-size:11.5px}
#settings .fcc159-account-summary small{color:#80939f;font-size:8.5px}

#settings .fcc159-settings-nav{
  display:grid;
  gap:5px;
}
#settings .fcc159-settings-nav a{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-height:38px;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:9px;
  color:#cbd8de;
  text-decoration:none;
  background:transparent;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
#settings .fcc159-settings-nav a:hover{
  border-color:#314c5b;
  background:#0b1a25;
  color:white;
}
#settings .fcc159-settings-nav a>span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:rgba(255,255,255,.045);
  color:#7adfff;
  font-size:10px;
}
#settings .fcc159-settings-nav a>b{font-size:10px;line-height:1.2}
#settings .fcc159-settings-rail>p{
  margin:0;
  padding:10px 2px 0;
  border-top:1px solid #20333f;
  color:#738894;
  font-size:8.5px;
  line-height:1.5;
}

#settings .fcc159-settings-content{min-width:0}
#settings .v403146-settings-layout{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
}
#settings .fcc159-settings-card,
#settings #fcc126CollectionViewSettings{
  position:relative;
  grid-column:1!important;
  margin:0!important;
  min-height:0!important;
  overflow:hidden;
  padding:17px 18px 18px!important;
  border:1px solid var(--set-line)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(8,20,29,.98),rgba(6,15,23,.98))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.12)!important;
}
#settings .fcc159-settings-card:before,
#settings #fcc126CollectionViewSettings:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,rgba(103,215,255,.75),rgba(103,215,255,0));
}
#settings .fcc159-settings-card:after,
#settings #fcc126CollectionViewSettings:after{display:none!important}
#settings .fcc159-settings-card .panelhead,
#settings #fcc126CollectionViewSettings .panelhead{
  margin:0 0 14px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid #20333f;
  align-items:flex-start!important;
}
#settings .fcc159-section-kicker{
  display:block;
  margin-bottom:4px;
  color:#6bdcff;
  font-size:8px;
  font-weight:950;
  letter-spacing:.14em;
}
#settings .fcc159-settings-card .panelhead h2,
#settings #fcc126CollectionViewSettings .panelhead h2{
  margin:0 0 3px!important;
  font-size:17px!important;
  letter-spacing:-.012em;
}
#settings .fcc159-settings-card .panelhead .muted,
#settings #fcc126CollectionViewSettings .panelhead .muted{
  max-width:680px;
  font-size:9.5px!important;
  line-height:1.45!important;
  color:#879aa6!important;
}
#settings .fcc159-settings-card .panelhead>.badge,
#settings #fcc126CollectionViewSettings .panelhead>.badge{
  align-self:center;
  padding:4px 7px;
  font-size:8px!important;
  background:rgba(103,215,255,.05)!important;
  border-color:#2c4655!important;
  color:#9bb0bc!important;
}

/* Profile */
#settings #v403146AccountPanel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
#settings #v403146AccountPanel>.panelhead,
#settings #v403146AccountPanel>#v36ProfileFields{
  grid-column:1/-1;
}
#settings #v36ProfileFields{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:12px;
}
#settings #v36ProfileFields>.v36-profile-editor{
  min-height:132px;
  padding:14px!important;
  align-items:center!important;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  border-color:#284352!important;
  border-radius:12px!important;
  background:#07121a!important;
}
#settings #v36ProfileFields>.v36-profile-editor>div:last-child{
  display:grid;
  justify-items:center;
  gap:5px;
}
#settings .v36-profile-avatar{
  width:66px!important;
  height:66px!important;
  flex-basis:66px!important;
  font-size:21px!important;
  box-shadow:0 0 0 4px rgba(103,215,255,.06);
}
#settings #v36ProfileBio{
  min-height:132px!important;
}
#settings #v403146AccountPanel>.field{
  margin:0!important;
}
#settings #v403146AccountPanel>#saveAccountProfile{
  width:max-content;
  min-width:160px;
  align-self:center;
}
#settings #v403146AccountPanel>#profileStatus{
  align-self:center;
  margin:0!important;
  min-height:36px;
}
#settings .v403146-field-help{
  margin-top:5px!important;
  font-size:8.5px!important;
  color:#778b97!important;
}

/* General fields */
#settings .field{gap:5px}
#settings .field label{
  color:#b8c7ce;
  font-size:9px;
  font-weight:850;
  letter-spacing:.02em;
}
#settings .input,
#settings .select,
#settings .textarea{
  min-height:40px;
  border:1px solid #29414e!important;
  border-radius:9px!important;
  background:#050e15!important;
  color:#edf5f8!important;
  box-shadow:none!important;
}
#settings .textarea{padding:10px 11px}
#settings .input:focus,
#settings .select:focus,
#settings .textarea:focus{
  border-color:#55c9ee!important;
  box-shadow:0 0 0 2px rgba(85,201,238,.08)!important;
}
#settings input[readonly]{
  color:#99aab4!important;
  background:#07121a!important;
}
#settings .btn{
  min-height:35px;
  border-radius:8px!important;
  font-weight:850;
}
#settings .btn.primary{
  background:linear-gradient(180deg,#59cff4,#42b9df)!important;
  border-color:#6bdcff!important;
  color:#031019!important;
  box-shadow:none!important;
}

/* Collection choice */
#settings .fcc125-view-choice{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
  margin:0!important;
}
#settings .fcc125-view-choice .btn{
  position:relative;
  min-height:82px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) 20px;
  gap:10px;
  align-items:center;
  padding:11px!important;
  text-align:left!important;
  border:1px solid #29414e!important;
  background:#07121a!important;
}
#settings .fcc125-view-choice .btn:hover{border-color:#426273!important}
#settings .fcc125-view-choice .btn.active{
  border-color:#5ccdf3!important;
  background:rgba(92,205,243,.075)!important;
  box-shadow:inset 0 0 0 1px rgba(92,205,243,.08)!important;
}
#settings .fcc159-choice-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#102432;
  color:#7ce0ff;
  font-size:19px;
}
#settings .fcc125-view-choice .btn>span:nth-child(2){display:grid;gap:3px}
#settings .fcc125-view-choice .btn b{font-size:11px}
#settings .fcc125-view-choice .btn small{
  color:#7f929e;
  font-size:8.5px;
  line-height:1.35;
}
#settings .fcc125-view-choice .btn i{
  visibility:hidden;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#57caef;
  color:#031019;
  font-style:normal;
  font-size:10px;
  font-weight:950;
}
#settings .fcc125-view-choice .btn.active i{visibility:visible}
#settings .fcc125-view-note{
  margin-top:8px!important;
  font-size:8.5px!important;
  color:#778b97!important;
}

/* Privacy */
#settings #v40SocialPanel .v40-profile-grid{
  grid-template-columns:minmax(0,360px)!important;
  margin-bottom:8px;
}
#settings #v40SocialPanel .v403146-collector-help{
  display:grid!important;
  grid-template-columns:auto 1fr;
  gap:9px!important;
  margin:12px 0 8px!important;
  padding:10px 11px!important;
  border-color:#294552!important;
  background:#07131c!important;
}
#settings #v40SocialPanel .v403146-collector-help b{
  color:#8fe7ff;
  font-size:9px;
}
#settings #v40SocialPanel .v403146-collector-help span{
  font-size:9px;
  line-height:1.45;
}
#settings #v40SocialPanel .form-section-title{
  margin:15px 0 7px!important;
  color:#a9bbc5;
  font-size:10px;
  font-weight:900;
}
#settings .v40-social-search{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:7px!important;
}
#settings .v40-social-columns{
  gap:10px!important;
  margin-top:12px!important;
}
#settings .v40-social-columns>div{
  padding:11px;
  border:1px solid #223844;
  border-radius:11px;
  background:#07121a;
}
#settings .v40-social-columns h3{
  margin:0 0 7px;
  font-size:10.5px!important;
}
#settings .v40-social-row{
  padding:8px!important;
  border-color:#263e4b!important;
  border-radius:9px!important;
  background:#061019!important;
}

/* Photos */
#settings #v34PhotoSettings .v34-setting-toggle{
  align-items:center!important;
  padding:12px!important;
  border-color:#29414e!important;
  border-radius:11px!important;
  background:#07121a!important;
}
#settings #v34PhotoSettings .v34-setting-toggle input{
  width:18px;
  height:18px;
  accent-color:#58ccef;
}
#settings #v34PhotoSettings .v34-setting-toggle b{font-size:10px}
#settings #v34PhotoSettings .v34-setting-toggle small{
  margin-top:3px;
  font-size:8.5px;
}
#settings #v34PhotoStatus{margin:8px 0 0!important}

/* Security */
#settings #v403146SecurityPanel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}
#settings #v403146SecurityPanel>.panelhead{grid-column:1/-1}
#settings #v403146SecurityPanel>.field{margin:0!important}
#settings #v403146SecurityPanel>#changeAccountPassword{
  width:max-content;
  min-width:135px;
}
#settings #v403146SecurityPanel>#passwordStatus{
  margin:0!important;
  align-self:center;
}

/* Collection data */
#settings #fcc159DataPanel{
  border-color:rgba(255,123,134,.18)!important;
}
#settings #fcc159DataPanel:before{
  background:linear-gradient(180deg,rgba(255,123,134,.7),rgba(255,123,134,0));
}
#settings #fcc159DataPanel .danger-zone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0!important;
  padding:12px!important;
  border:1px solid rgba(255,123,134,.2)!important;
  border-radius:11px!important;
  background:rgba(111,26,34,.08)!important;
}
#settings #fcc159DataPanel .danger-zone b{font-size:10.5px}
#settings #fcc159DataPanel .danger-zone .muted{font-size:8.5px!important}
#settings #fcc159DataPanel .btn.danger{
  min-width:130px;
  border-color:rgba(255,123,134,.4)!important;
  background:rgba(123,30,39,.18)!important;
  color:#ff9ba5!important;
}

/* Status boxes become quiet confirmations rather than full-width developer banners. */
#settings .status{
  border-color:#233946!important;
  border-radius:9px!important;
  background:#061019!important;
  color:#8fa2ad!important;
  font-size:8.5px!important;
  line-height:1.4!important;
}
#settings .status.ok{
  border-color:rgba(123,228,178,.24)!important;
  color:#87ddb0!important;
  background:rgba(47,130,91,.06)!important;
}
#settings .status.err{
  border-color:rgba(255,123,134,.25)!important;
  color:#ffa3ab!important;
  background:rgba(133,34,43,.07)!important;
}

@media(max-width:980px){
  #settings .fcc159-settings-shell{grid-template-columns:1fr}
  #settings .fcc159-settings-rail{
    position:static;
    grid-template-columns:auto 1fr;
    align-items:center;
  }
  #settings .fcc159-account-summary{
    min-width:220px;
    padding:0 12px 0 0;
    border-right:1px solid #20333f;
    border-bottom:0;
  }
  #settings .fcc159-settings-nav{
    display:flex;
    overflow-x:auto;
    gap:5px;
    padding-bottom:2px;
  }
  #settings .fcc159-settings-nav a{
    flex:0 0 auto;
    grid-template-columns:20px auto;
    min-height:34px;
    padding:5px 8px;
  }
  #settings .fcc159-settings-nav a>span{width:20px;height:20px}
  #settings .fcc159-settings-rail>p{display:none}
}
@media(max-width:700px){
  #settings .fcc159-settings-intro{padding:16px!important}
  #settings .fcc159-settings-rail{
    grid-template-columns:1fr;
  }
  #settings .fcc159-account-summary{
    border-right:0;
    border-bottom:1px solid #20333f;
    padding:0 0 10px;
  }
  #settings .fcc159-settings-card,
  #settings #fcc126CollectionViewSettings{padding:14px!important}
  #settings #v403146AccountPanel,
  #settings #v403146SecurityPanel{grid-template-columns:1fr}
  #settings #v403146AccountPanel>.panelhead,
  #settings #v403146AccountPanel>#v36ProfileFields,
  #settings #v403146SecurityPanel>.panelhead{grid-column:1}
  #settings #v36ProfileFields{grid-template-columns:1fr}
  #settings .fcc125-view-choice{grid-template-columns:1fr!important}
  #settings .v40-social-columns{grid-template-columns:1fr!important}
  #settings #fcc159DataPanel .danger-zone{align-items:stretch;flex-direction:column}
  #settings #fcc159DataPanel .btn.danger{width:100%}
}
@media(max-width:480px){
  #settings .fcc159-settings-nav a>b{display:none}
  #settings .fcc159-settings-nav a{grid-template-columns:24px;padding:5px}
  #settings .fcc159-settings-nav a>span{width:24px;height:24px}
  #settings .fcc159-settings-card .panelhead,
  #settings #fcc126CollectionViewSettings .panelhead{flex-direction:column;gap:7px}
}
#settings .v403146-settings-layout>.v403146-settings-card,
#settings .v403146-settings-layout>#fcc126CollectionViewSettings{order:initial!important}