/* Tsukiro 3.6.56 — appearance studio consolidation */
body[data-page="profile"] [data-profile-panel="appearance"]{
  --studio-bg:#101016;
  --studio-bg-2:#15151d;
  --studio-line:rgba(255,255,255,.075);
  --studio-muted:#9694a1;
  --studio-radius:22px;
  display:grid;
  gap:16px;
  max-width:1240px;
  margin-inline:auto;
}
body[data-page="profile"] [data-profile-panel="appearance"]>.section-heading{
  margin:0 0 2px;
  padding:2px 2px 10px;
}
body[data-page="profile"] [data-profile-panel="appearance"]>.section-heading h2{
  margin:4px 0 5px;
  font-size:clamp(27px,3vw,38px);
  letter-spacing:-.035em;
}
body[data-page="profile"] [data-profile-panel="appearance"]>.section-heading p{
  max-width:720px;
  margin:0;
  color:var(--studio-muted);
  font-size:13px;
  line-height:1.55;
}
body[data-page="profile"] [data-profile-panel="appearance"] .eyebrow{
  color:color-mix(in srgb,var(--pc-accent) 76%,#fff 24%);
  letter-spacing:.13em;
}

/* Shared studio cards */
body[data-page="profile"] .profile-media-studio,
body[data-page="profile"] #profileFavoriteCustomizer,
body[data-page="profile"] #appearanceForm,
body[data-page="profile"] #rewardCosmeticsStudio{
  width:100%;
  margin:0!important;
  padding:22px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:var(--studio-radius)!important;
  background:linear-gradient(180deg,rgba(20,20,27,.94),rgba(13,13,18,.96))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.16)!important;
  overflow:visible;
}
body[data-page="profile"] .profile-media-studio>.section-heading,
body[data-page="profile"] #rewardCosmeticsStudio>.section-heading{
  margin:0 0 18px;
  padding:0 0 16px;
  border-bottom:1px solid var(--studio-line);
}
body[data-page="profile"] .profile-media-studio>.section-heading h3,
body[data-page="profile"] #rewardCosmeticsStudio>.section-heading h3,
body[data-page="profile"] .appearance-form-head h3,
body[data-page="profile"] .profile-customizer-card__head h3{
  margin:3px 0 4px;
  font-size:20px;
  letter-spacing:-.02em;
}
body[data-page="profile"] .profile-media-studio>.section-heading p,
body[data-page="profile"] #rewardCosmeticsStudio>.section-heading p,
body[data-page="profile"] .appearance-form-head p,
body[data-page="profile"] .profile-customizer-card__head p{
  margin:0;
  color:var(--studio-muted);
  font-size:12px;
  line-height:1.5;
}

/* 01 Media */
body[data-page="profile"] .profile-image-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
body[data-page="profile"] .profile-image-field{
  display:grid!important;
  grid-template-columns:116px minmax(0,1fr)!important;
  align-items:center!important;
  gap:15px!important;
  min-width:0;
  padding:14px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.022)!important;
}
body[data-page="profile"] .profile-upload-preview{
  border:1px solid rgba(255,255,255,.09)!important;
  background:#1a1a22!important;
  box-shadow:none!important;
}
body[data-page="profile"] .avatar-preview{width:104px!important;height:104px!important;border-radius:25px!important}
body[data-page="profile"] .banner-preview{width:112px!important;height:78px!important;border-radius:16px!important}
body[data-page="profile"] .profile-image-field>div:last-child{min-width:0}
body[data-page="profile"] .profile-image-field strong{font-size:13px!important}
body[data-page="profile"] .profile-image-field p{margin:4px 0 10px!important;color:var(--studio-muted)!important;font-size:10px!important;line-height:1.45!important}
body[data-page="profile"] .profile-image-field input[type="url"]{
  width:min(100%,360px)!important;
  height:38px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:10px!important;
  background:#0d0d12!important;
  color:#f6f4f8!important;
}
body[data-page="profile"] .profile-image-field .file-button{
  min-height:36px!important;
  margin:7px 0 0 7px!important;
  border:1px solid var(--studio-line)!important;
  background:#191920!important;
  color:#d7d4dc!important;
}
body[data-page="profile"] .profile-media-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--studio-line);
}

/* 02 Atmosphere + favorites: one card, separated by quiet dividers */
body[data-page="profile"] #profileFavoriteCustomizer{display:block!important}
body[data-page="profile"] .profile-customizer-card__head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0 0 16px!important;
  padding:0 0 16px!important;
  border-bottom:1px solid var(--studio-line);
}
body[data-page="profile"] .profile-customizer-limit{
  flex:0 0 auto;
  padding:6px 10px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.025)!important;
  color:#b8b4c0!important;
  font-size:10px!important;
}
body[data-page="profile"] .profile-customizer-section{
  padding:15px 0 0;
  border:0!important;
  background:transparent!important;
}
body[data-page="profile"] .profile-customizer-section+.profile-customizer-section,
body[data-page="profile"] .profile-premium-customizer{
  margin-top:17px!important;
  padding-top:17px!important;
  border-top:1px solid var(--studio-line)!important;
}
body[data-page="profile"] .profile-customizer-section__title{
  margin-bottom:10px;
}
body[data-page="profile"] .profile-customizer-section__title .appearance-label,
body[data-page="profile"] .profile-premium-customizer__head strong{
  color:#f2eff5;
  font-size:13px!important;
  font-weight:800;
}
body[data-page="profile"] .profile-customizer-section__title small{
  display:block;
  margin-top:3px;
  color:var(--studio-muted)!important;
  font-size:10px!important;
  line-height:1.45;
}
body[data-page="profile"] .profile-favorite-editor-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
body[data-page="profile"] .profile-picker{
  padding:12px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.02)!important;
}
body[data-page="profile"] .profile-picker-search input,
body[data-page="profile"] .profile-premium-field select,
body[data-page="profile"] .profile-premium-field input{
  min-height:42px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:11px!important;
  background:#0c0c11!important;
  color:#f7f4fa!important;
  box-shadow:none!important;
}
body[data-page="profile"] .profile-basic-theme-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:10px!important;
}
body[data-page="profile"] .profile-basic-theme{
  min-height:68px!important;
  padding:11px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:13px!important;
  background:#101017!important;
  box-shadow:none!important;
}
body[data-page="profile"] .profile-basic-theme::before{opacity:.38!important}
body[data-page="profile"] .profile-basic-theme.is-active{
  border-color:color-mix(in srgb,var(--pc-accent) 72%,rgba(255,255,255,.12))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc-accent) 28%,transparent)!important;
}
body[data-page="profile"] .profile-premium-customizer__head{margin-bottom:10px!important}
body[data-page="profile"] .profile-premium-pill{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.08);
  color:#e9c8dc!important;
}
body[data-page="profile"] .profile-premium-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
body[data-page="profile"] .profile-premium-field--wide{grid-column:span 3!important}
body[data-page="profile"] .profile-customizer-actions{
  margin-top:14px!important;
  padding-top:0!important;
}

/* 03 Details */
body[data-page="profile"] #appearanceForm{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
body[data-page="profile"] .appearance-form-head{
  grid-column:1/-1;
  padding-bottom:16px;
  border-bottom:1px solid var(--studio-line);
}
body[data-page="profile"] .frame-picker-field{
  grid-column:1/-1;
  display:grid;
  gap:10px;
  padding:0 0 16px;
  border-bottom:1px solid var(--studio-line);
}
body[data-page="profile"] .frame-picker-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
}
body[data-page="profile"] .frame-picker-head small,
body[data-page="profile"] #appearanceForm .field-hint,
body[data-page="profile"] .premium-palette-head small{
  color:var(--studio-muted)!important;
  font-size:10px!important;
  line-height:1.45!important;
}
body[data-page="profile"] .selected-frame-card{
  min-height:72px!important;
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding:10px 12px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.022)!important;
}
body[data-page="profile"] .selected-frame-card .frame-preview{flex:0 0 auto}
body[data-page="profile"] #profileFramePicker{
  gap:10px!important;
  padding-top:2px!important;
}
body[data-page="profile"] #profileFramePicker.is-collapsed{display:none!important}
body[data-page="profile"] .frame-tier{
  padding:12px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.016)!important;
}
body[data-page="profile"] .frame-tier-head{margin-bottom:10px!important}
body[data-page="profile"] .frame-tier-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
}
body[data-page="profile"] .frame-choice{
  min-width:0;
  min-height:112px!important;
  padding:9px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:13px!important;
  background:#111118!important;
}
body[data-page="profile"] #appearanceForm>label{
  display:grid!important;
  align-content:start;
  gap:7px!important;
  min-width:0;
  padding:12px!important;
  border:1px solid var(--studio-line);
  border-radius:14px;
  background:rgba(255,255,255,.018);
  color:#e8e4ec!important;
  font-size:11px!important;
}
body[data-page="profile"] #appearanceForm>label select{
  width:100%;
  height:42px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:11px!important;
  background:#0c0c11!important;
  color:#f7f4fa!important;
}
body[data-page="profile"] .premium-palette{
  grid-column:1/-1;
  margin:0!important;
  padding:13px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.018)!important;
}
body[data-page="profile"] .palette-presets{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
body[data-page="profile"] .palette-presets button{
  min-height:38px!important;
  padding:0 12px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:10px!important;
  background:#121219!important;
  color:#d9d5df!important;
}
body[data-page="profile"] .palette-inputs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
body[data-page="profile"] .palette-inputs label{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0;
  min-height:48px;
  padding:6px 7px 6px 10px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:11px!important;
  background:#0d0d12!important;
}
body[data-page="profile"] .palette-inputs input[type="color"]{
  width:42px!important;
  height:34px!important;
  padding:2px!important;
  border-radius:8px!important;
}
body[data-page="profile"] #appearanceForm>.button[type="submit"]{
  grid-column:1/-1!important;
  justify-self:start!important;
  margin-top:1px;
}

/* 04 Rewards */
body[data-page="profile"] #rewardCosmeticsStudio>.section-heading .eyebrow::before{content:"04 · ";}
body[data-page="profile"] #rewardCosmeticsStudio .reward-library-group{
  margin-top:12px!important;
  padding:13px!important;
  border:1px solid var(--studio-line)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.018)!important;
}
body[data-page="profile"] #rewardCosmeticsStudio .reward-stats-link{
  display:inline-flex;
  margin-top:13px;
}

/* Buttons: quiet surfaces, accent only for primary action */
body[data-page="profile"] [data-profile-panel="appearance"] .button-primary{
  box-shadow:none!important;
}
body[data-page="profile"] [data-profile-panel="appearance"] .button-secondary,
body[data-page="profile"] [data-profile-panel="appearance"] .button-ghost,
body[data-page="profile"] [data-profile-panel="appearance"] .file-button{
  box-shadow:none!important;
}

@media(max-width:900px){
  body[data-page="profile"] .profile-image-grid{grid-template-columns:1fr!important}
  body[data-page="profile"] .profile-basic-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body[data-page="profile"] .profile-premium-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-page="profile"] .profile-premium-field--wide{grid-column:span 2!important}
  body[data-page="profile"] .frame-tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:640px){
  body[data-page="profile"] [data-profile-panel="appearance"]{gap:12px;width:100%;min-width:0}
  body[data-page="profile"] [data-profile-panel="appearance"]>.section-heading{padding-inline:2px}
  body[data-page="profile"] .profile-media-studio,
  body[data-page="profile"] #profileFavoriteCustomizer,
  body[data-page="profile"] #appearanceForm,
  body[data-page="profile"] #rewardCosmeticsStudio{
    padding:15px!important;
    border-radius:18px!important;
  }
  body[data-page="profile"] .profile-media-studio>.section-heading,
  body[data-page="profile"] #rewardCosmeticsStudio>.section-heading,
  body[data-page="profile"] .profile-customizer-card__head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:9px!important;
  }
  body[data-page="profile"] .profile-media-studio>.section-heading .small-button{width:100%!important}
  body[data-page="profile"] .profile-image-field{
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:11px!important;
    padding:11px!important;
  }
  body[data-page="profile"] .avatar-preview{width:72px!important;height:72px!important;border-radius:19px!important}
  body[data-page="profile"] .banner-preview{width:72px!important;height:58px!important;border-radius:13px!important}
  body[data-page="profile"] .profile-image-field input[type="url"]{width:100%!important;min-width:0!important}
  body[data-page="profile"] .profile-image-field .file-button{margin:7px 0 0!important;width:100%!important;justify-content:center!important}
  body[data-page="profile"] .profile-media-actions{display:grid!important;grid-template-columns:1fr!important}
  body[data-page="profile"] .profile-media-actions .button{width:100%!important;justify-content:center!important}
  body[data-page="profile"] .profile-favorite-editor-grid,
  body[data-page="profile"] .profile-premium-grid,
  body[data-page="profile"] #appearanceForm{grid-template-columns:1fr!important}
  body[data-page="profile"] .profile-premium-field--wide{grid-column:auto!important}
  body[data-page="profile"] .profile-basic-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-page="profile"] .profile-basic-theme{min-height:64px!important}
  body[data-page="profile"] .profile-customizer-actions{display:grid!important;grid-template-columns:1fr!important}
  body[data-page="profile"] .profile-customizer-actions .button{width:100%!important;justify-content:center!important}
  body[data-page="profile"] .appearance-form-head,
  body[data-page="profile"] .frame-picker-field,
  body[data-page="profile"] .premium-palette,
  body[data-page="profile"] #appearanceForm>.button[type="submit"]{grid-column:1!important}
  body[data-page="profile"] .frame-picker-head{display:grid!important;grid-template-columns:1fr!important}
  body[data-page="profile"] .frame-picker-head .button{width:100%!important;justify-content:center!important}
  body[data-page="profile"] .frame-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-page="profile"] .frame-choice{min-height:104px!important}
  body[data-page="profile"] .palette-inputs{grid-template-columns:1fr!important}
  body[data-page="profile"] #appearanceForm>.button[type="submit"]{width:100%!important;justify-content:center!important}
  body[data-page="profile"] #rewardCosmeticsStudio .reward-library-group{padding:10px!important}
}

@media(max-width:380px){
  body[data-page="profile"] .profile-image-field{grid-template-columns:1fr!important}
  body[data-page="profile"] .avatar-preview{width:82px!important;height:82px!important}
  body[data-page="profile"] .banner-preview{width:100%!important;height:88px!important}
  body[data-page="profile"] .frame-tier-grid{grid-template-columns:1fr 1fr!important}
}