/* Account-scoped panel appearance studio.
   Material presets deliberately keep corner radii low-to-medium. */

.panel-appearance {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.panel-appearance__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ui-stroke-subtle, var(--color-border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--ui-layer-alt, var(--color-surface-2)) 82%, transparent);
}

.panel-appearance__tab {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ui-text-secondary, var(--color-text-muted));
  font: inherit;
  font-size: .84rem;
  font-weight: 850;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.panel-appearance__tab svg {
  width: 17px;
  height: 17px;
}

.panel-appearance__tab:hover {
  color: var(--ui-text, var(--color-text));
  background: color-mix(in srgb, var(--ui-layer, var(--color-surface)) 72%, transparent);
}

.panel-appearance__tab.is-active {
  color: var(--ui-brand-petrol, var(--color-primary-active));
  border-color: color-mix(in srgb, var(--ui-brand-teal, var(--color-primary)) 28%, var(--ui-stroke-subtle, var(--color-border)));
  background: var(--ui-layer, var(--color-surface));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-brand-petrol, var(--color-primary)) 9%, transparent);
}

.panel-appearance__pane[hidden] {
  display: none !important;
}

.panel-appearance__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-appearance__heading h3 {
  margin: 0 0 4px;
  font-size: .96rem;
  font-weight: 900;
}

.panel-appearance__heading p {
  margin: 0;
  max-width: 62ch;
}

.panel-appearance__badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--ui-brand-teal, var(--color-primary)) 24%, var(--ui-stroke-subtle, var(--color-border)));
  border-radius: 5px;
  background: var(--ui-brand-wash, var(--color-primary-highlight));
  color: var(--ui-brand-petrol, var(--color-primary-active));
  font-size: .7rem;
  font-weight: 850;
}

.panel-material-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.panel-material-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 126px auto;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--ui-stroke-subtle, var(--color-border));
  border-radius: 8px;
  background: var(--ui-layer, var(--color-surface));
  color: var(--ui-text, var(--color-text));
  text-align: right;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.panel-material-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ui-brand-teal, var(--color-primary)) 42%, var(--ui-stroke-subtle, var(--color-border)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-brand-petrol, var(--color-primary)) 11%, transparent);
}

.panel-material-card.is-active {
  border-color: var(--ui-brand-teal, var(--color-primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-brand-teal, var(--color-primary)) 17%, transparent), 0 10px 24px color-mix(in srgb, var(--ui-brand-petrol, var(--color-primary)) 10%, transparent);
}

.panel-material-card__preview {
  --preview-radius: 6px;
  --preview-surface: #f8fafb;
  --preview-surface-2: #e9eff1;
  --preview-border: rgba(39, 79, 86, .18);
  --preview-shadow: 0 7px 16px rgba(29, 63, 70, .11);
  --preview-filter: none;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 29% 1fr;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--preview-border);
  border-radius: var(--preview-radius);
  background: var(--preview-surface);
  box-shadow: var(--preview-shadow);
  isolation: isolate;
}

.panel-material-card__preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--preview-texture, none);
}

.panel-material-card__rail,
.panel-material-card__canvas {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--preview-border);
  border-radius: max(2px, calc(var(--preview-radius) - 2px));
  background: var(--preview-surface-2);
  box-shadow: var(--preview-element-shadow, none);
  backdrop-filter: var(--preview-filter);
  -webkit-backdrop-filter: var(--preview-filter);
}

.panel-material-card__rail i,
.panel-material-card__canvas i,
.panel-material-card__canvas b {
  display: block;
  height: 7px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ui-brand-teal, var(--color-primary)) 25%, var(--preview-surface));
}

.panel-material-card__rail i:first-child {
  height: 19px;
  background: color-mix(in srgb, var(--ui-brand-teal, var(--color-primary)) 62%, var(--preview-surface));
}

.panel-material-card__canvas b {
  height: 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-brand-teal, var(--color-primary)) 23%, var(--preview-surface)), color-mix(in srgb, var(--ui-brand-copper, var(--color-accent)) 20%, var(--preview-surface)));
}

.panel-material-card__canvas i:nth-of-type(2) {
  width: 72%;
}

.panel-material-card__meta {
  display: grid;
  gap: 5px;
}

.panel-material-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-material-card__title strong {
  font-size: .84rem;
  font-weight: 900;
}

.panel-material-card__title span {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ui-layer-alt, var(--color-surface-2));
  color: var(--ui-text-tertiary, var(--color-text-faint));
  font-size: .64rem;
  font-weight: 800;
}

.panel-material-card__meta small {
  color: var(--ui-text-secondary, var(--color-text-muted));
  font-size: .72rem;
  line-height: 1.75;
}

/* Global glass shell (not limited to #user-panel only). */
:root[data-site-glass] {
  --site-glass-filter: blur(14px) saturate(1.2);
  --site-glass-surface: color-mix(in srgb, var(--ui-layer, var(--color-surface)) 82%, transparent);
  --site-glass-surface-strong: color-mix(in srgb, var(--ui-layer-alt, var(--color-surface-2)) 84%, transparent);
}

:root[data-site-glass] body {
  background:
    radial-gradient(circle at 7% 8%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent 34%),
    var(--color-bg);
}

:root[data-site-glass] :is(
  main,
  section,
  .header,
  .hero,
  .section,
  .how,
  .features,
  .student-panel__card,
  .student-panel__nav,
  .panel-avatar,
  .settings-toggle,
  .dashboard-task-service,
  .finance-task-service,
  .finance-panel-heading,
  .prompt-service__hero,
  .prompt-service__search,
  .admin-projects,
  .expert-filters,
  .expert-card,
  .top-expert,
  .learning-guide__card,
  .blog-card,
  .public-folder-hero,
  .public-order-track-card,
  .public-order-receipt,
  .footer,
  .card,
  .card-user,
  .testimonial,
  .for__card,
  .feature,
  .learning-stepper,
  .messages-layout,
  .messages-sidebar,
  .messages-main,
  .messages-main__header,
  .messages-main__chat,
  .messages-main__input-area,
  .messages-options__menu,
  .messages-call-overlay,
  .style-manager,
  .style-manager__sidebar,
  .style-manager__editor,
  .style-manager__preview,
  .file-manager,
  .file-manager__panel,
  .version-control,
  .version-control__panel
) {
  backdrop-filter: var(--site-glass-filter);
  -webkit-backdrop-filter: var(--site-glass-filter);
}

:root[data-site-glass] :is(
  main,
  section,
  .header,
  .hero,
  .section,
  .how,
  .features,
  .student-panel__card,
  .student-panel__nav,
  .panel-avatar,
  .settings-toggle,
  .dashboard-task-service,
  .finance-task-service,
  .finance-panel-heading,
  .prompt-service__hero,
  .prompt-service__search,
  .admin-projects,
  .expert-filters,
  .expert-card,
  .top-expert,
  .learning-guide__card,
  .blog-card,
  .public-folder-hero,
  .public-order-track-card,
  .public-order-receipt,
  .footer,
  .card,
  .card-user,
  .testimonial,
  .for__card,
  .feature,
  .learning-stepper,
  .messages-layout,
  .messages-sidebar,
  .messages-main,
  .messages-main__header,
  .messages-main__chat,
  .messages-main__input-area,
  .messages-options__menu,
  .messages-call-overlay,
  .style-manager,
  .style-manager__sidebar,
  .style-manager__editor,
  .style-manager__preview,
  .file-manager,
  .file-manager__panel,
  .version-control,
  .version-control__panel
) {
  background-color: var(--site-glass-surface);
  background-image: none;
  border-color: color-mix(in srgb, var(--color-border) 52%, transparent);
}

:root[data-site-glass] .student-panel__card {
  background-color: color-mix(in srgb, var(--site-glass-surface) 66%, var(--site-glass-surface-strong) 34%);
}

.panel-material-card__preview[data-material-preview="precision"] {
  --preview-radius: 2px;
  --preview-surface: #fbfcfc;
  --preview-surface-2: #f0f3f3;
  --preview-shadow: none;
}

.panel-material-card__preview[data-material-preview="glass"] {
  --preview-radius: 8px;
  --preview-surface: rgba(239, 249, 250, .62);
  --preview-surface-2: rgba(255, 255, 255, .54);
  --preview-border: rgba(255, 255, 255, .88);
  --preview-shadow: 0 10px 22px rgba(29, 95, 106, .14);
  --preview-element-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  --preview-filter: blur(9px) saturate(1.2);
  --preview-texture: radial-gradient(circle at 15% 15%, rgba(65, 210, 199, .38), transparent 34%), radial-gradient(circle at 86% 82%, rgba(238, 168, 76, .32), transparent 36%);
}

.panel-material-card__preview[data-material-preview="clay"] {
  --preview-radius: 10px;
  --preview-surface: #eef4f3;
  --preview-surface-2: #dbe9e7;
  --preview-border: rgba(255,255,255,.72);
  --preview-shadow: 7px 7px 15px rgba(46, 81, 84, .16), inset -2px -2px 5px rgba(72, 111, 111, .08), inset 3px 3px 7px rgba(255,255,255,.76);
  --preview-element-shadow: 4px 5px 9px rgba(50, 87, 88, .13), inset 2px 2px 4px rgba(255,255,255,.74);
}

.panel-material-card__preview[data-material-preview="soft"] {
  --preview-radius: 8px;
  --preview-surface: #edf2f2;
  --preview-surface-2: #edf2f2;
  --preview-border: transparent;
  --preview-shadow: 8px 8px 17px #ccd4d4, -8px -8px 17px #ffffff;
  --preview-element-shadow: 4px 4px 8px #cbd4d4, -4px -4px 8px #ffffff;
}

.panel-material-card__preview[data-material-preview="editorial"] {
  --preview-radius: 1px;
  --preview-surface: #fffdf8;
  --preview-surface-2: #fffdf8;
  --preview-border: #27383c;
  --preview-shadow: 5px 5px 0 color-mix(in srgb, var(--ui-brand-copper, var(--color-accent)) 68%, #2f3b3e);
}

.panel-material-card__preview[data-material-preview="neo"] {
  --preview-radius: 3px;
  --preview-surface: #fff8df;
  --preview-surface-2: #e0f1ef;
  --preview-border: #173f46;
  --preview-shadow: 5px 5px 0 #173f46;
  --preview-element-shadow: 2px 2px 0 #173f46;
}

.panel-material-card__preview[data-material-preview="aurora"] {
  --preview-radius: 8px;
  --preview-surface: rgba(249,252,252,.66);
  --preview-surface-2: rgba(255,255,255,.58);
  --preview-border: rgba(255,255,255,.88);
  --preview-shadow: 0 12px 25px rgba(54, 66, 98, .15);
  --preview-filter: blur(10px) saturate(1.25);
  --preview-texture: radial-gradient(circle at 8% 16%, rgba(89, 216, 190, .52), transparent 34%), radial-gradient(circle at 92% 10%, rgba(111, 131, 231, .44), transparent 36%), radial-gradient(circle at 52% 100%, rgba(245, 172, 96, .4), transparent 42%);
}

.panel-material-card__preview[data-material-preview="material"] {
  --preview-radius: 9px;
  --preview-surface: #f7faf8;
  --preview-surface-2: color-mix(in srgb, var(--ui-brand-wash, var(--color-primary-highlight)) 68%, white);
  --preview-border: color-mix(in srgb, var(--ui-brand-teal, var(--color-primary)) 19%, white);
  --preview-shadow: 0 8px 18px rgba(43, 70, 73, .13);
  --preview-element-shadow: 0 4px 9px rgba(43, 70, 73, .1);
}

/* Runtime material tokens. The balanced default intentionally keeps the
   established panel appearance unchanged. */
#user-panel[data-panel-material="precision"] {
  --panel-material-radius: 4px;
  --panel-material-surface: var(--ui-layer);
  --panel-material-image: none;
  --panel-material-border: var(--ui-stroke);
  --panel-material-shadow: 0 2px 7px color-mix(in srgb, var(--ui-brand-petrol) 7%, transparent);
  --panel-material-filter: none;
}

#user-panel[data-panel-material="glass"] {
  --panel-material-radius: 10px;
  --panel-material-surface: color-mix(in srgb, var(--ui-layer) 70%, transparent);
  --panel-material-image: linear-gradient(135deg, rgba(255,255,255,.56), color-mix(in srgb, var(--ui-brand-wash) 24%, rgba(255,255,255,.18)));
  --panel-material-border: color-mix(in srgb, var(--ui-brand-teal) 24%, rgba(255,255,255,.72));
  --panel-material-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 15px 32px color-mix(in srgb, var(--ui-brand-petrol) 13%, transparent);
  --panel-material-filter: blur(14px) saturate(1.16);
}

#user-panel[data-panel-material="clay"] {
  --panel-material-radius: 12px;
  --panel-material-surface: color-mix(in srgb, var(--ui-layer-alt) 62%, var(--ui-layer));
  --panel-material-image: linear-gradient(145deg, rgba(255,255,255,.44), color-mix(in srgb, var(--ui-brand-wash) 32%, transparent));
  --panel-material-border: color-mix(in srgb, white 70%, var(--ui-stroke-subtle));
  --panel-material-shadow: 8px 10px 22px color-mix(in srgb, var(--ui-brand-petrol) 13%, transparent), inset 3px 3px 7px rgba(255,255,255,.7), inset -3px -3px 7px color-mix(in srgb, var(--ui-brand-teal) 8%, transparent);
  --panel-material-filter: none;
}

#user-panel[data-panel-material="soft"] {
  --panel-material-radius: 10px;
  --panel-material-surface: color-mix(in srgb, var(--ui-layer-alt) 54%, var(--ui-layer));
  --panel-material-image: none;
  --panel-material-border: transparent;
  --panel-material-shadow: 9px 9px 22px color-mix(in srgb, var(--ui-brand-petrol) 13%, transparent), -8px -8px 20px rgba(255,255,255,.86);
  --panel-material-filter: none;
}

#user-panel[data-panel-material="editorial"] {
  --panel-material-radius: 2px;
  --panel-material-surface: var(--ui-layer);
  --panel-material-image: linear-gradient(90deg, transparent 0 97%, color-mix(in srgb, var(--ui-brand-copper) 24%, transparent) 97%);
  --panel-material-border: color-mix(in srgb, var(--ui-brand-petrol) 76%, var(--ui-stroke));
  --panel-material-shadow: 5px 5px 0 color-mix(in srgb, var(--ui-brand-copper) 46%, var(--ui-brand-petrol));
  --panel-material-filter: none;
}

#user-panel[data-panel-material="neo"] {
  --panel-material-radius: 4px;
  --panel-material-surface: color-mix(in srgb, var(--ui-brand-wash) 46%, var(--ui-layer));
  --panel-material-image: none;
  --panel-material-border: var(--ui-brand-petrol);
  --panel-material-shadow: 5px 5px 0 var(--ui-brand-petrol);
  --panel-material-filter: none;
}

#user-panel[data-panel-material="aurora"] {
  --panel-material-radius: 10px;
  --panel-material-surface: color-mix(in srgb, var(--ui-layer) 68%, transparent);
  --panel-material-image: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--ui-brand-teal) 28%, transparent), transparent 42%), radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--ui-brand-copper) 24%, transparent), transparent 42%);
  --panel-material-border: color-mix(in srgb, white 68%, var(--ui-stroke));
  --panel-material-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 16px 34px color-mix(in srgb, var(--ui-brand-petrol) 14%, transparent);
  --panel-material-filter: blur(14px) saturate(1.2);
}

#user-panel[data-panel-material="material"] {
  --panel-material-radius: 10px;
  --panel-material-surface: color-mix(in srgb, var(--ui-brand-wash) 34%, var(--ui-layer));
  --panel-material-image: none;
  --panel-material-border: color-mix(in srgb, var(--ui-brand-teal) 18%, var(--ui-stroke-subtle));
  --panel-material-shadow: 0 8px 18px color-mix(in srgb, var(--ui-brand-petrol) 12%, transparent);
  --panel-material-filter: none;
}

#user-panel[data-panel-material="aurora"] {
  background:
    radial-gradient(circle at 13% 18%, color-mix(in srgb, var(--ui-brand-teal) 18%, transparent), transparent 36%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--ui-brand-copper) 14%, transparent), transparent 38%),
    var(--ui-canvas);
}

#user-panel[data-panel-material]:not([data-panel-material="balanced"]) :is(
  .student-panel__card,
  .settings-toggle,
  .dashboard-task-service,
  .access-control__head,
  .contacts-panel__card
) {
  border-radius: var(--panel-material-radius) !important;
  border-color: var(--panel-material-border) !important;
  background: var(--panel-material-surface) !important;
  background-image: var(--panel-material-image) !important;
  box-shadow: var(--panel-material-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#user-panel[data-panel-material]:not([data-panel-material="balanced"]) :is(
  .student-panel__nav,
  .panel-avatar
) {
  border-radius: var(--panel-material-radius) !important;
  border-color: var(--panel-material-border) !important;
  background-color: var(--panel-material-surface) !important;
  box-shadow: var(--panel-material-shadow) !important;
  backdrop-filter: var(--panel-material-filter) !important;
  -webkit-backdrop-filter: var(--panel-material-filter) !important;
}

#user-panel[data-panel-material="precision"] :is(
  .student-panel__nav,
  .student-panel__card,
  .settings-toggle,
  .panel-avatar
) {
  background-image: none !important;
}

#user-panel[data-panel-material="editorial"] :is(
  .student-panel__nav > button,
  .student-panel__nav-group summary,
  .student-panel__nav-group-items button,
  .settings-menu-btn
),
#user-panel[data-panel-material="neo"] :is(
  .student-panel__nav > button,
  .student-panel__nav-group summary,
  .student-panel__nav-group-items button,
  .settings-menu-btn
) {
  border-radius: 3px !important;
}

#user-panel[data-panel-material="clay"] :is(
  .student-panel__nav > button,
  .student-panel__nav-group summary,
  .student-panel__nav-group-items button,
  .settings-menu-btn
) {
  box-shadow: 4px 5px 10px color-mix(in srgb, var(--ui-brand-petrol) 11%, transparent), inset 2px 2px 4px rgba(255,255,255,.72) !important;
}

@media (max-width: 980px) {
  .panel-material-picker__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .panel-appearance__heading {
    display: grid;
  }

  .panel-material-picker__grid {
    grid-template-columns: 1fr;
  }
}