/* Native, read-only member sheet. All styles stay inside this one dialog.
   --paper is DARK text in Creator Studio; never use it as a light background. */
#studio-member-detail {
  --paper:#192a32;
  --smd-muted:#647179;
  --smd-line:#e3e9eb;
  box-sizing:border-box;
  inset:0;
  margin:auto;
  padding:0;
  width:min(720px,calc(100vw - 40px));
  max-width:calc(100vw - 40px);
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid #dbe3e8;
  border-radius:24px;
  background:#fff;
  color:var(--paper,#192a32);
  box-shadow:0 28px 90px rgb(15 30 45 / 22%);
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  font-size:14px;
  line-height:1.65;
  text-align:left;
  letter-spacing:-.025em;
}
#studio-member-detail::backdrop {
  background:rgb(17 29 42 / 42%);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
#studio-member-detail *,
#studio-member-detail *::before,
#studio-member-detail *::after { box-sizing:border-box; }
#studio-member-detail :is(h2,h3,p,dl,dt,dd) { margin:0; padding:0; }
#studio-member-detail :is(button) {
  appearance:none;
  min-height:44px;
  max-width:100%;
  border:1px solid transparent;
  font:inherit;
  font-size:13px;
  font-weight:650;
  letter-spacing:inherit;
  cursor:pointer;
}
#studio-member-detail button:focus-visible { outline:3px solid #829cff; outline-offset:3px; }
#studio-member-detail .smd-header { padding:24px 30px; border-bottom:1px solid var(--smd-line); background:linear-gradient(145deg,#f8faff,#fff 78%); }
#studio-member-detail .smd-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
#studio-member-detail .smd-readonly { display:inline-flex; align-items:center; min-height:28px; padding:3px 10px; border:1px solid #dce3ee; border-radius:7px; color:#52637a; background:#f0f4fa; font-size:11px; font-weight:700; letter-spacing:.015em; }
#studio-member-detail .smd-close { flex-shrink:0; padding:9px 14px; border-color:#dce3e8; border-radius:10px; background:#fff; color:var(--paper,#192a32); }
#studio-member-detail .smd-close:hover { background:#f3f6fa; border-color:#aab9ca; }
#studio-member-detail .smd-profile { display:flex; align-items:center; gap:18px; min-width:0; }
#studio-member-detail .smd-avatar { display:grid; place-items:center; flex:0 0 64px; width:64px; height:64px; overflow:hidden; border:1px solid #d8e2ff; border-radius:20px; background:#eaf0ff; color:#3657a0; font-size:25px; font-weight:700; }
#studio-member-detail .smd-profile-copy { min-width:0; }
#studio-member-detail .smd-eyebrow { color:var(--smd-muted); font-size:11px; font-weight:650; margin-bottom:3px; }
#studio-member-detail .smd-name { color:var(--paper,#192a32); font-size:26px; font-weight:750; line-height:1.35; overflow-wrap:anywhere; }
#studio-member-detail .smd-group { color:#526173; font-size:13px; line-height:1.6; margin-top:5px; overflow-wrap:anywhere; }
#studio-member-detail .smd-source { display:grid; gap:4px; margin-top:20px; padding-top:16px; border-top:1px solid var(--smd-line); color:var(--smd-muted); font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
#studio-member-detail .smd-record { display:flex; flex-wrap:wrap; gap:4px 10px; min-width:0; }
#studio-member-detail .smd-record-label { flex-shrink:0; color:#647179; font-weight:650; }
#studio-member-detail .smd-record > :last-child { min-width:0; overflow-wrap:anywhere; }
#studio-member-detail .smd-source-note { color:#71808c; }
#studio-member-detail .smd-body { display:grid; gap:26px; padding:26px 30px 30px; }
#studio-member-detail .smd-section { min-width:0; }
#studio-member-detail .smd-section-title { margin-bottom:12px; color:var(--paper,#192a32); font-size:13px; font-weight:750; }
#studio-member-detail .smd-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
#studio-member-detail .smd-field { min-width:0; padding:12px 0; border-top:1px solid var(--smd-line); }
#studio-member-detail .smd-label { color:var(--smd-muted); font-size:11px; margin-bottom:4px; }
#studio-member-detail .smd-value { min-width:0; color:var(--paper,#192a32); font-size:13px; font-weight:550; overflow-wrap:anywhere; white-space:pre-wrap; }
#studio-member-detail .smd-memo { min-width:0; padding:16px; border:1px solid var(--smd-line); border-radius:12px; background:#f7f9fa; color:#42525c; font-size:13px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
#studio-member-detail .smd-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 30px; border-top:1px solid var(--smd-line); background:#fff; }
#studio-member-detail .smd-readonly-note { max-width:360px; min-width:0; color:var(--smd-muted); font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
#studio-member-detail .smd-payments { flex-shrink:0; padding:11px 17px; border-radius:11px; border-color:#d3dcf3; background:#edf2ff; color:#284ca4; }
#studio-member-detail .smd-payments:hover:not(:disabled) { background:#e0e9ff; border-color:#9bb0e5; }
#studio-member-detail .smd-payments:disabled { background:#f3f5f7; border-color:#e0e5e9; color:#72808b; cursor:default; }
@media (max-width:640px) {
  #studio-member-detail { width:calc(100vw - 24px); max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); margin:auto; border-radius:20px; }
  #studio-member-detail .smd-header { padding:18px 20px 20px; }
  #studio-member-detail .smd-topline { margin-bottom:16px; }
  #studio-member-detail .smd-profile { gap:13px; }
  #studio-member-detail .smd-avatar { flex-basis:52px; width:52px; height:52px; border-radius:16px; font-size:21px; }
  #studio-member-detail .smd-name { font-size:23px; }
  #studio-member-detail .smd-body { gap:22px; padding:24px 20px; }
  #studio-member-detail .smd-fields { grid-template-columns:minmax(0,1fr); }
  #studio-member-detail .smd-field { padding:12px 0; }
  #studio-member-detail .smd-footer { flex-direction:column; align-items:stretch; gap:14px; padding:18px 20px 20px; }
  #studio-member-detail .smd-readonly-note { max-width:none; }
  #studio-member-detail .smd-payments { width:100%; min-height:46px; }
}
@media (forced-colors:active) {
  #studio-member-detail { border:1px solid CanvasText; }
  #studio-member-detail .smd-readonly,
  #studio-member-detail .smd-avatar { border:1px solid CanvasText; }
}
