/* Account settings and player identity share the same editor on every screen. */
.settings-workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-tabs { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); position: sticky; top: 100px; }
.settings-tabs button { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); text-align: left; font: inherit; font-size: 13px; background: transparent; cursor: pointer; }
.settings-tabs button .icon { width: 18px; height: 18px; flex-shrink: 0; }
.settings-tabs button:hover { background: var(--surface-2); color: var(--text); }
.settings-tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.settings-panels, .settings-tab-panel { min-width: 0; }
.settings-tab-panel[hidden], #profile-edit-section[hidden], .profile-field-error[hidden] { display: none; }
.settings-tab-panel > .panel { margin: 0; padding: 28px; }
.settings-tab-panel > .panel + .panel { margin-top: 22px; }
.settings-description { color: var(--muted); margin: 0 0 22px; font-size: 14px; line-height: 1.6; }
.settings-tab-panel .toggle-row { gap: 20px; padding-block: 20px; }
.settings-tab-panel .toggle-row p { line-height: 1.6; margin-top: 7px; }
.settings-tab-panel .security-form { margin-top: 28px; padding-top: 28px; }
.profile-editor-panel { margin-bottom: 24px; padding: 28px; }
#profile-edit-section { scroll-margin-top: 100px; }
.profile-editor-panel .panel-title { gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.profile-editor-username { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.profile-fields { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.profile-fields:disabled { opacity: .65; }
.profile-media-fields { display: grid; gap: 22px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.profile-media-field { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 26px; align-items: center; }
.profile-media-preview { display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); border: 1px solid var(--border); }
.profile-media-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-media-preview.avatar { width: 96px; height: 96px; border-radius: 50%; justify-self: center; }
.profile-media-preview.avatar .avatar { width: 100%; height: 100%; border: 0; border-radius: inherit; }
.profile-media-preview.banner { width: 100%; aspect-ratio: 4 / 1; border-radius: 10px; }
.profile-media-preview.banner > span { padding: 12px; display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 10px; }
.profile-media-preview .icon { width: 18px; flex-shrink: 0; }
.profile-media-copy { min-width: 0; }
.profile-media-copy h4 { margin: 0 0 8px; font-size: 14px; }
.profile-media-copy p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.profile-media-actions { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.profile-media-actions label { cursor: pointer; }
.profile-file-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.profile-media-actions:has(input:focus-visible) label { outline: 2px solid var(--accent); outline-offset: 4px; }
.profile-media-status { display: block; color: var(--accent); line-height: 1.6; margin-top: 10px; }
.profile-text-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.profile-bio-field { grid-column: 1 / -1; }
.profile-text-fields .form-field { min-width: 0; margin-bottom: 24px; }
.profile-field-help { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-top: 8px; }
.profile-field-help small { color: var(--muted); line-height: 1.6; font-size: 12px; }
.profile-field-help [data-profile-count] { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.profile-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--border); padding-top: 24px; }
.profile-form-footer p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.profile-form-footer .button { flex-shrink: 0; }
.profile-field-error, .profile-media-copy .profile-field-error { color: #ed6b86; font-size: 13px; line-height: 1.6; margin-top: 12px; }
.profile-save-error { margin: 0 0 20px; }
.profile-page-top { gap: 20px; flex-wrap: wrap; }
.profile-page-top .button-row { margin: 0; gap: 10px; }
.profile-overview.panel { padding: 0; margin-bottom: 28px; overflow: hidden; }
.profile-overview .profile-cover { position: relative; height: auto; aspect-ratio: 4 / 1; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.profile-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-overview .profile-cover { width: 100%; min-width: 0; isolation: isolate; z-index: 0; }
.profile-overview .profile-avatar-editor { position: relative; align-self: start; width: 112px; height: 112px; padding: 0; border-radius: 50%; }
.profile-image-choose { position: absolute; inset: 0; z-index: 2; display: flex; align-items: end; justify-content: end; width: 100%; padding: 20px; border-radius: inherit; background: linear-gradient(transparent 35%, #100b2580); color: #fff; opacity: 0; cursor: pointer; transition: opacity .18s ease; }
.profile-image-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-width: 0; padding: 0; border: 0; border-radius: inherit; opacity: 0; cursor: pointer; }
.profile-image-input:disabled { cursor: wait; }
.profile-image-edit-label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #ffffff55; border-radius: 10px; background: #15111ee6; font-size: 13px; font-weight: 700; line-height: 1.3; }
.profile-image-edit-label .icon { width: 18px; height: 18px; flex-shrink: 0; }
.profile-avatar-editor .profile-image-choose { inset: 5px; width: auto; padding: 6px; align-items: center; justify-content: center; background: #100b25b3; }
.profile-avatar-editor .profile-image-edit-label { flex-direction: column; padding: 0; gap: 6px; border: 0; border-radius: 0; background: none; font-size: 12px; }
.profile-avatar-editor .profile-image-edit-label .icon { width: 24px; height: 24px; }
.profile-image-remove { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff55; border-radius: 50%; background: #15111ee6; color: #fff; opacity: 0; transition: opacity .18s ease; }
.profile-image-remove .icon { width: 16px; height: 16px; }
.profile-avatar-editor .profile-image-remove { top: 0; right: 0; width: 28px; height: 28px; }
.profile-image-editor:hover .profile-image-choose, .profile-image-editor:hover .profile-image-remove,
.profile-image-editor:focus-within .profile-image-choose, .profile-image-editor:focus-within .profile-image-remove { opacity: 1; }
.profile-image-choose:has(.profile-image-input:focus-visible) { outline: 3px solid var(--accent); outline-offset: -5px; }
.profile-cover .profile-image-choose { inset: 14px 14px auto auto; width: auto; padding: 0; border-radius: 10px; background: none; opacity: 1; }
.profile-cover:has(.profile-image-remove) .profile-image-choose { right: 56px; }
.profile-cover .profile-image-remove { opacity: 1; }
.profile-cover .profile-image-choose:has(.profile-image-input:enabled):hover .profile-image-edit-label,
.profile-cover .profile-image-choose:has(.profile-image-input:focus-visible) .profile-image-edit-label { border-color: #b994ff; background: #2b1d42; box-shadow: 0 0 0 3px #a57aff26; }
.profile-cover .profile-image-choose:has(.profile-image-input:focus-visible) { outline-offset: 3px; }
.profile-cover .profile-image-remove:enabled:is(:hover, :focus-visible) { border-color: #f18ca6; background: #4b1830; color: #ffc5d2; box-shadow: 0 0 0 3px #ed6b8626; }
.profile-cover .profile-image-edit-label,
.profile-cover .profile-image-remove { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.profile-image-feedback .profile-field-error { color: #ed6b86; }
.profile-image-feedback .profile-media-status { color: var(--accent); font-size: 12px; }
.profile-overview .profile-identity { position: relative; z-index: 1; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: end; gap: 24px; margin: -48px 0 0; padding: 0 32px 28px; }
.profile-overview .profile-identity .avatar.huge { width: 112px; height: 112px; border: 5px solid var(--surface); box-shadow: var(--shadow); }
.profile-overview .profile-identity-copy { padding-top: 66px; min-width: 0; }
.profile-overview .profile-identity h2 { margin: 0 0 10px; font: 700 clamp(23px, 3vw, 32px)/1.2 var(--font-pixel, 'Outfit', sans-serif); overflow-wrap: anywhere; }
.profile-overview .profile-identity .tag { margin: 0 0 6px; flex-shrink: 0; }
.profile-overview .profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: var(--muted); line-height: 1.6; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.profile-meta > span { display: flex; align-items: center; gap: 7px; }
.profile-meta .icon { width: 15px; height: 15px; }
.profile-about { margin: 0 32px; padding: 24px 0 28px; border-top: 1px solid var(--border); }
.profile-about h3 { font-size: 14px; margin: 0 0 12px; }
.profile-about p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.profile-columns { gap: 24px; margin-block: 28px; }
.profile-columns > .panel { padding: 26px; }
.profile-columns .activity-row { padding-block: 18px; gap: 14px; }
.profile-columns .activity-row small { margin-top: 6px; line-height: 1.5; }
.game-detail-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; margin-bottom: 12px; }
.game-detail-heading .game-detail-favorite { position: static; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.game-detail-heading .game-detail-favorite .icon { width: 22px; height: 22px; }
.game-detail-heading .game-detail-favorite.active { background: #a83c6826; border-color: #d96c9955; color: #ed81a8; }
.game-detail-heading .game-detail-favorite.active .icon { fill: currentColor; }
.play-panel .secondary-actions > .button { flex: 1; }

.profile-image-feedback { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.profile-image-info { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.profile-image-info > strong { display: block; margin-bottom: 6px; font-size: 12px; }
.profile-about .profile-image-info p { font-size: 12px; line-height: 1.65; white-space: normal; }
.profile-about .profile-image-info .profile-media-status { margin-top: 8px; color: var(--accent); }
dialog.profile-image-cropper { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 26px; overflow: auto; }
.profile-image-cropper .modal-header { margin-bottom: 18px; }
.profile-image-cropper .modal-header p { max-width: 52ch; line-height: 1.6; }
.profile-crop-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-bottom: 14px; font-size: 12px; }
.profile-crop-info > span { color: var(--muted); }
.profile-crop-info > strong { color: var(--accent); }
.profile-crop-stage { position: relative; aspect-ratio: var(--crop-aspect); width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; cursor: grab; touch-action: none; user-select: none; background: #fff; }
.profile-crop-stage.profile-crop-avatar { display: block; width: min(100%, 360px, 42dvh); height: auto; margin-inline: auto; }
.profile-crop-stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.profile-crop-stage.is-dragging { cursor: grabbing; }
.profile-crop-stage canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.profile-crop-grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 33.1%, #fff8 33.1%, #fff8 33.4%, transparent 33.4%, transparent 66.4%, #fff8 66.4%, #fff8 66.7%, transparent 66.7%), linear-gradient(to bottom, transparent 33.1%, #fff8 33.1%, #fff8 33.4%, transparent 33.4%, transparent 66.4%, #fff8 66.4%, #fff8 66.7%, transparent 66.7%); }
.profile-crop-circle { position: absolute; inset: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 999px #0008; pointer-events: none; }
.profile-crop-help { margin: 12px 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.profile-crop-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) 48px auto; gap: 12px; align-items: center; margin: 18px 0; }
.profile-crop-controls label, .profile-crop-controls output { font-size: 12px; }
.profile-crop-controls output { text-align: center; font-variant-numeric: tabular-nums; }
.profile-crop-controls input { width: 100%; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.profile-crop-warning { margin-block: 12px; color: var(--yellow); font-size: 12px; line-height: 1.6; }
.profile-crop-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 20px; margin-top: 18px; border-top: 1px solid var(--border); }
.profile-crop-footer .button { min-height: 44px; }
.profile-crop-error[hidden] { display: none; }
@media (max-width: 680px) {
  .profile-image-feedback { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  dialog.profile-image-cropper { padding: 18px; }
  .profile-crop-controls { gap: 8px; grid-template-columns: auto minmax(0, 1fr) 42px; }
  .profile-crop-controls .profile-crop-reset { grid-column: 1 / -1; justify-self: start; }
  .profile-crop-footer .button { flex: 1; }
}

/* Família — controle parental */
.settings-tab-panel > .panel.family-panel { padding: 0; overflow: hidden; border-color: #71509655; }
.settings-tab-panel > .panel.family-panel--list { padding: 0; }
.family-hero-actions { margin-top: 18px; }
.family-hero-actions .button { min-height: 44px; box-shadow: 0 8px 24px #00000033; }
.family-list-home { display: flex; flex-direction: column; gap: 20px; }
.family-list-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.family-list-intro h3 { font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 22px; margin: 6px 0 8px; letter-spacing: -0.4px; }
.family-list-intro p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 52ch; }
.family-list-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.family-list-eyebrow .icon { width: 14px; height: 14px; }
.family-list-summary { display: flex; flex-wrap: wrap; gap: 10px; }
.family-summary-chip { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); min-width: 120px; }
.family-summary-chip small { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.family-summary-chip strong { font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 20px; }
.family-summary-chip--warn { border-color: #f7c76744; background: #f7c7670f; }
.family-summary-chip--warn strong { color: var(--yellow); }
.family-list-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.family-list-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.family-list-search .icon { width: 18px; height: 18px; flex-shrink: 0; }
.family-list-search input { flex: 1; min-height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); padding: 0 12px; }
.family-list-filter { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.family-list-filter select { min-height: 42px; font-size: 13px; border-radius: 10px; padding-inline: 12px 28px; }
.family-list-count { margin: 0; font-size: 12px; color: var(--muted); }
.family-empty-state { text-align: center; padding: 36px 24px; border-radius: 16px; border: 1px dashed var(--border); background: var(--surface-2); }
.family-empty-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
.family-empty-icon .icon { width: 28px; height: 28px; }
.family-empty-state h4 { margin: 0 0 8px; font-size: 17px; }
.family-empty-state p { margin: 0 auto 18px; max-width: 36ch; font-size: 14px; color: var(--muted); line-height: 1.6; }
.family-form-modal { padding: 0; border: 0; background: transparent; }
.family-form-modal .family-form-grid { margin-top: 0; }
.family-create-modal { width: min(560px, calc(100% - 32px)); }
.family-avatar-picker { margin-bottom: 20px; }
.family-avatar-picker-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.family-avatar-picker-head label { flex: 1; font-size: 12px; font-weight: 600; color: var(--muted); }
.family-avatar-picker-head .text-link { padding: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.family-avatar-scroll-next .icon { transform: rotate(180deg); }
.family-avatar-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px;
  scrollbar-width: thin;
}
.family-avatar-option {
  flex: 0 0 auto; scroll-snap-align: start; padding: 3px; border-radius: 16px; border: 2px solid transparent;
  background: var(--surface); cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.family-avatar-option:hover { transform: translateY(-2px); border-color: var(--border); }
.family-avatar-option.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.family-avatar-option img { display: block; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.family-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.family-minor-avatar .family-minor-avatar-img { border-radius: 50%; }
.family-profile-avatar { padding: 0; overflow: hidden; background: transparent; border: 2px solid #ffffff22; }
.family-profile-avatar-img { width: 72px; height: 72px; border-radius: 18px; }
.family-avatar-card .button { margin-top: 12px; }
.family-hero { position: relative; min-height: 220px; isolation: isolate; }
.family-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.family-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(22, 12, 48, 0.92) 0%, rgba(35, 18, 72, 0.78) 38%, rgba(35, 18, 72, 0.15) 72%);
  pointer-events: none;
}
.family-hero-copy { position: relative; z-index: 1; padding: 28px 32px 32px; max-width: 520px; color: #fff; }
.family-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 10px; font-size: 11px; font-weight: 600;
  color: #e8dcff; background: rgba(133, 80, 243, 0.2); border: 1px solid rgba(152, 102, 218, 0.45);
}
.family-chip .icon { width: 14px; height: 14px; color: #c4a8ff; }
.family-chip--muted { color: var(--muted); background: var(--surface-2); border-color: var(--border); font-weight: 500; }
.family-chip--muted .icon { display: none; }
.family-hero-copy h3 { font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 28px; font-weight: 650; letter-spacing: -0.6px; line-height: 1.15; margin: 0; }
.family-hero-copy p { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: #d8c9ef; max-width: 46ch; }
.family-panel-body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 28px; }
.family-section-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 16px; }
.family-section-title .icon { width: 18px; height: 18px; color: var(--accent); }
.family-minor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.family-minor-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
.family-minor-avatar {
  display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.family-minor-avatar .icon { width: 20px; height: 20px; }
.family-minor-card strong { display: block; font-size: 14px; }
.family-minor-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.family-empty { margin: 0; }
.family-form {
  padding: 24px 26px 26px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(133, 80, 243, 0.08), transparent 55%), var(--surface-2);
  border: 1px solid var(--border);
}
.family-form-head h4 { font-size: 16px; margin: 0; }
.family-form-head p { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.family-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 22px; }
.family-form-pin { grid-column: 1 / -1; max-width: 280px; }
.family-form .form-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--muted); }
.family-form .form-field input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 10px; }
.family-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.family-consent input { margin-top: 3px; flex-shrink: 0; }
.family-submit { margin-top: 20px; width: 100%; max-width: 320px; min-height: 46px; }
.family-minor-open { width: 100%; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.family-minor-open:hover { border-color: #9866da55; background: var(--surface-3); transform: translateY(-1px); }
.family-minor-copy { flex: 1; min-width: 0; }
.family-minor-chevron { color: var(--muted); flex-shrink: 0; }
.family-minor-chevron .icon { width: 18px; height: 18px; }

/* Detalhe do perfil supervisionado */
.family-panel--detail { border-color: #71509644; background: var(--surface); }
.family-detail-body { display: flex; flex-direction: column; gap: 0; }
.family-profile-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.family-profile-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(133, 80, 243, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(75, 219, 163, 0.12), transparent 50%),
    linear-gradient(135deg, #2a1a4a, #1a1528 58%, var(--surface));
}
.family-profile-hero-inner { position: relative; z-index: 1; padding: 22px 32px 28px; }
.family-back-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0 18px;
  font-size: 13px; color: var(--muted); cursor: pointer; background: none; border: 0;
}
.family-back-link:hover { color: var(--text); }
.family-back-link .icon { width: 16px; height: 16px; transform: rotate(180deg); }
.family-profile-identity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.family-profile-avatar {
  width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center;
  font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 24px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7542e7, #4bdba3); box-shadow: 0 8px 28px #7542e733;
  border: 2px solid #ffffff18;
}
.family-profile-copy h2 { font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 26px; letter-spacing: -0.5px; margin: 6px 0 10px; line-height: 1.15; }
.family-profile-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.family-profile-meta { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.family-profile-actions .button { white-space: nowrap; min-height: 44px; }
.family-section-nav {
  display: flex; gap: 6px; padding: 12px 32px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); position: sticky; top: 80px; z-index: 2;
}
.family-section-nav a {
  padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted);
  border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.family-section-nav a:hover { color: var(--text); background: var(--surface-3); }
.family-section-nav a.is-active {
  color: var(--text); background: var(--surface); border-color: #9866da55; box-shadow: inset 0 0 0 1px #9866da33;
}
.family-page-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.family-access-list { margin: 0; padding-left: 1.15rem; font-size: 13px; line-height: 1.65; color: var(--muted); display: flex; flex-direction: column; gap: 10px; }
.family-access-info .family-card-head { margin-bottom: 12px; }
.family-rules-summary-line { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: 13px; }
.family-rules-summary-line strong { color: var(--muted); font-weight: 600; }
.family-rules-summary-line span { text-align: right; color: var(--text); }
.family-detail-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px;
  padding: 24px 32px 32px; align-items: start;
}
.family-detail-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.family-detail-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 140px; }
.family-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--shadow);
}
.family-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.family-card-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.family-card-head h4 > .icon { width: 18px; height: 18px; color: var(--accent); }
.family-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.family-stat-card {
  display: flex; gap: 12px; align-items: center; padding: 14px 14px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.family-stat-card small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.family-stat-card strong { font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 17px; line-height: 1.2; }
.family-stat-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.family-stat-icon .icon { width: 18px; height: 18px; }
.family-stat-violet .family-stat-icon { background: #8550f322; color: var(--accent-fill); }
.family-stat-blue .family-stat-icon { background: #5c72f622; color: #8ba4ff; }
.family-stat-teal .family-stat-icon { background: #4bdba318; color: var(--green); }
.family-stat-amber .family-stat-icon { background: #f7c76718; color: var(--yellow); }
.family-report-days { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.family-report-days select { min-height: 38px; font-size: 13px; border-radius: 10px; }
.family-report-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.family-subpanel {
  padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  min-width: 0;
}
.family-subpanel h5 { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.family-table-wrap { overflow-x: auto; margin: 0 -4px; }
.family-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.family-table th, .family-table td { padding: 11px 8px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.family-table th { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.family-table tbody tr:last-child td { border-bottom: 0; }
.family-rank {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px;
  border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft);
}
.family-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; max-height: 260px; overflow-y: auto; }
.family-activity-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.family-activity-list li:last-child { border-bottom: 0; }
.family-list-leading {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--accent);
}
.family-list-leading .icon { width: 16px; height: 16px; }
.family-activity-list strong { display: block; font-size: 13px; margin-bottom: 2px; }
.family-activity-list time, .family-list-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.family-muted-li { list-style: none; padding: 0; border: 0; }
.family-empty-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 16px; color: var(--muted); }
.family-empty-panel .icon { width: 28px; height: 28px; opacity: 0.45; }
.family-empty-panel p { margin: 0; font-size: 13px; line-height: 1.55; max-width: 28ch; }
.family-skeleton-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.family-skeleton-grid span { height: 72px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: family-shimmer 1.2s ease-in-out infinite; }
.family-loading-copy { text-align: center; color: var(--muted); font-size: 13px; margin: 0; }
@keyframes family-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.family-time-meter { padding: 4px 0; }
.family-time-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.family-time-meter-top strong { font-size: 14px; }
.family-time-meter-top span { font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 20px; font-weight: 650; color: var(--green); }
.family-time-meter--low .family-time-meter-top span { color: var(--yellow); }
.family-time-meter-track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 8px; }
.family-time-meter-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-fill), var(--green)); transition: width 0.35s ease; }
.family-time-meter--low .family-time-meter-track i { background: linear-gradient(90deg, #e8a84a, var(--yellow)); }
.family-time-meter small { font-size: 12px; color: var(--muted); }
.family-time-meter--open p { margin: 0 0 6px; font-size: 14px; }
.family-rail-card h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.family-rail-card h5 .icon { width: 16px; color: var(--accent); }
.family-rail-tip p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.family-access-card .settings-description { margin: -6px 0 16px; }
.family-act-as-form .button { margin-top: 14px; width: 100%; }
.family-rules-card .family-policy-form { border: 0; padding: 0; background: transparent; display: flex; flex-direction: column; gap: 18px; }
.family-rule-block {
  padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
}
.family-rule-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.family-rule-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.family-rule-icon .icon { width: 20px; height: 20px; }
.family-rule-head h4 { margin: 0; font-size: 15px; }
.family-rule-head p { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.family-field-hint { margin: 12px 0 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.family-genre-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.family-genre-chip {
  position: relative; cursor: pointer; margin: 0;
}
.family-genre-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.family-genre-chip span {
  display: block; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); transition: 0.15s;
}
.family-genre-chip input:checked + span { border-color: #9866da66; background: var(--accent-soft); color: var(--accent); }
.family-genre-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.family-social-grid { display: flex; flex-direction: column; gap: 0; }
.family-social-row { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--border); }
.family-social-row:last-child { border-bottom: 0; }
.family-social-row p { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.family-rule-save {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding-top: 4px;
  border-top: 1px solid var(--border); margin-top: 4px; padding-top: 20px;
}
.family-rule-save .form-field { flex: 1; min-width: 200px; max-width: 280px; margin: 0; }
.family-rule-save .button { min-height: 44px; min-width: 180px; }
.family-policy-form select, .family-policy-form input[type="number"], .family-policy-form input[type="password"] {
  width: 100%; min-height: 44px; border-radius: 10px;
}
.family-acting-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 28px; font-size: 13px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(75, 219, 163, 0.14), rgba(133, 80, 243, 0.12));
}
.family-acting-bar .icon { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; color: var(--green); }
html.family-acting .family-acting-bar {
  position: fixed; left: 0; right: 0; top: 80px; z-index: 49;
  box-shadow: 0 8px 24px #00000022;
}
html.family-acting .workspace { padding-top: 148px; }
html.family-acting .sidebar { top: 128px; }
html.family-acting .family-section-nav { top: 148px; }
.sidebar-bottom .family-exit-nav {
  width: 100%; margin-bottom: 8px; color: #9ef0cd; border: 1px solid rgba(75, 219, 163, 0.35);
  background: rgba(75, 219, 163, 0.08); border-radius: 10px;
}
.sidebar-bottom .family-exit-nav:hover { background: rgba(75, 219, 163, 0.16); color: #c8f7e3; }
.toast-error { border-color: #f7c76755; }
.toast-error > .icon { color: var(--yellow); }
@media (max-width: 1100px) {
  .settings-workspace { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .settings-tabs { position: static; flex-direction: row; overflow-x: auto; }
  .settings-tabs button { flex: 1; justify-content: center; white-space: nowrap; padding: 12px; }
}
@media (max-width: 680px) {
  .settings-tabs { padding: 5px; gap: 3px; }
  .settings-tabs button { flex: 0 0 auto; font-size: 12px; }
  .settings-tab-panel > .panel, .profile-editor-panel { padding: 20px; }
  .settings-tab-panel > .panel.family-panel { padding: 0; }
  .family-hero-actions .button { width: 100%; }
  .family-list-toolbar { flex-direction: column; align-items: stretch; }
  .family-list-filter { justify-content: space-between; }
  .family-hero-copy { padding: 22px 20px 26px; }
  .family-panel-body { padding: 20px; }
  .family-form-grid { grid-template-columns: minmax(0, 1fr); }
  .family-form-pin { max-width: none; }
  .family-submit { max-width: none; }
  .family-stat-grid, .family-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-report-columns { grid-template-columns: minmax(0, 1fr); }
  .family-acting-bar { padding-inline: 16px; }
  html.family-acting .family-acting-bar { top: 67px; }
  html.family-acting .workspace { padding-top: 132px; }
  html.family-acting .sidebar { top: 115px; }
  html.family-acting .family-section-nav { top: 132px; }
  .family-profile-hero-inner, .family-detail-grid, .family-section-nav { padding-inline: 20px; }
  .family-profile-identity { grid-template-columns: auto minmax(0, 1fr); }
  .family-profile-actions { grid-column: 1 / -1; }
  .family-profile-actions .button { width: 100%; }
  .family-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .family-detail-rail { position: static; }
  .family-section-nav { top: 67px; overflow-x: auto; flex-wrap: nowrap; }
  .family-section-nav a { flex-shrink: 0; }
  .family-rule-save { flex-direction: column; align-items: stretch; }
  .family-rule-save .form-field, .family-rule-save .button { max-width: none; width: 100%; }
  .profile-media-field { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .profile-media-preview.avatar { justify-self: start; }
  .profile-media-preview.banner { max-width: 100%; }
  .profile-text-fields { grid-template-columns: minmax(0, 1fr); }
  .profile-form-footer { flex-direction: column; align-items: stretch; gap: 16px; }
  .profile-form-footer .button { width: 100%; }
  .profile-overview .profile-identity { grid-template-columns: 80px minmax(0, 1fr); gap: 12px 16px; padding: 0 20px 22px; margin-top: -30px; }
  .profile-overview .profile-identity .avatar.huge { width: 80px; height: 80px; }
  .profile-overview .profile-avatar-editor { width: 80px; height: 80px; }
  .profile-overview .profile-identity-copy { padding-top: 48px; }
  .profile-overview .profile-identity .tag { grid-column: 2; justify-self: start; margin: 0; }
  .profile-overview .profile-meta { font-size: 12px; gap: 6px; flex-direction: column; align-items: start; }
  .profile-overview .profile-cover { min-height: 110px; }
  .profile-about { margin-inline: 20px; padding-block: 20px; }
  .profile-columns > .panel { padding: 20px; }
  .settings-tab-panel .toggle-row, .account-session-panel { flex-wrap: wrap; }
}
@media (hover: none), (pointer: coarse), (max-width: 680px) {
  .profile-image-choose, .profile-image-remove { opacity: 1; }
  .profile-image-choose { padding: 12px; }
  .profile-image-edit-label { font-size: 11px; padding: 8px 10px; }
  .profile-avatar-editor .profile-image-choose { padding: 0; background: none; align-items: end; justify-content: end; }
  .profile-avatar-editor .profile-image-edit-label { display: grid; place-items: center; width: 32px; height: 32px; padding: 7px; border: 1px solid #ffffff55; border-radius: 50%; background: #15111ee6; }
  .profile-avatar-editor .profile-image-edit-label .icon { width: 18px; height: 18px; }
  .profile-avatar-editor .profile-image-edit-label span { display: none; }
}