/* Gaya per layar. Tiap plan menambahkan bagiannya di bawah. */
@font-face {
  font-family: 'Nunito Brand';
  font-style: normal;
  font-weight: 500 600;
  src: url('../vendor/fonts/nunito-latin.woff2') format('woff2');
  font-display: swap;
}

/* Muat awal */
.loading .shimmer { height: 132px; border-radius: var(--radius-l); }
.loading .shimmer + .shimmer { margin-top: 12px; }

/* Onboarding */
.onb { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh;
  padding: calc(32px + var(--safe-t)) 24px calc(32px + var(--safe-b)); }
.onb-hero { margin-bottom: 28px; text-align: center; }
.onb-mark { display: grid; place-items: center; margin-bottom: 20px; }
.onb-hero h1 { margin: 0 0 8px; font-size: 2rem; font-weight: 400; line-height: 1.25; }
.onb-hero p { max-width: 30ch; margin: 0 auto; color: var(--ink-2); }
.onb-form { display: grid; gap: 4px; padding: 20px; }
.onb-form .btn-filled { margin-top: 20px; }

/* Beranda */
.kid { padding: 0; overflow: hidden; }
.kid-main { display: flex; align-items: center; gap: 16px; padding: 16px 8px 16px 16px; transition: background .15s var(--ease); }
.kid-main:active { background: var(--surface-2); }
.kid-main > .ic { color: var(--ink-3); }
.kid-info { flex: 1; min-width: 0; }
.kid-info h2 { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.kid-pct { margin: 2px 0 8px; font-size: .875rem; color: var(--ink-2); }
.kid-pct b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.kid-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--ink-2); }
.kid-stats li { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.next-step { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 0 12px 0 16px;
  border-top: 1px solid var(--outline-soft); font-size: .9375rem; font-weight: 500; }
.next-step .ic { margin-left: auto; color: var(--ink-3); }
.next-step.tone-yellow { color: var(--amber-ink); }
.next-step.tone-green { color: var(--green-ink); }
.next-step.tone-none { color: var(--ink-2); }
a.next-step:active { background: var(--surface-2); }
.empty .ring-wrap { margin: 0 auto; }

/* Keluarga */
.card-title { margin: 0 0 4px; font-size: 1rem; font-weight: 500; }
.code-value { margin: 4px 0 8px; font-size: 1.5rem; font-weight: 500; color: var(--primary); overflow-wrap: anywhere; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fam-kid { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px 4px 8px 16px; }
.avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--avatar-container); color: var(--on-avatar-container); font-weight: 500; }
.fam-kid-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fam-kid-name small { display: block; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fam-empty { padding: 20px 16px; font-size: .875rem; color: var(--ink-3); }
.fam-add { margin-top: 12px; }

/* Reader: quiet, compact and non-sticky. */
.reader-progress{position:fixed;z-index:40;top:0;left:50%;transform:translateX(-50%);width:min(100%,var(--maxw));height:3px;background:var(--primary);pointer-events:none}
.reader-progress[hidden]{display:none}
.reader-progress>i{display:block;width:100%;height:100%;background:var(--accent-container);transform:scaleX(0);transform-origin:left}
.reader { padding: calc(8px + var(--safe-t)) 16px calc(var(--navbar-h) + 96px + var(--safe-b)); }
.reader-header { position:relative; overflow:hidden; text-align:center; padding:16px; margin-bottom:12px;
  border-radius:16px; background:color-mix(in srgb,var(--accent-container) 70%,transparent); color:var(--on-accent-container); }
.reader-header-copy { width:55%; overflow-wrap:anywhere; }
.reader-ornament { position:absolute; right:-8px; bottom:-32px; display:block; width:clamp(180px,50vw,240px); height:auto; max-height:calc(100% + 64px); object-fit:contain; object-position:right bottom; pointer-events:none; }
.reader-ctx { margin:0 0 4px; }
.reader-ctx .badge { max-width:100%; box-sizing:border-box; height:auto; min-height:24px; white-space:normal; }
.reader-ctx[hidden] { display:none; }
.reader-meta { margin:0; color:inherit; font-size:.75rem; line-height:1.35; }
.reader-arabic { margin:4px 0 0; font-size:2.25rem; line-height:1.25; color:inherit; }
.reader-header h1 { margin:0; font-size:1.375rem; line-height:1.2; font-weight:600; }
.reader-meaning { margin:0; color:inherit; font-size:.8125rem; line-height:1.3; }
.basmalah { margin:0; padding:24px 0 6px; border-bottom:1px solid var(--outline-soft);
  text-align:center; font-size:1.75rem; line-height:1.5; }
.ayat-list { list-style:none; padding:0; margin:0; }
.ayah { display:grid; grid-template-columns:max(44px,3rem) minmax(0,1fr); gap:10px; padding:12px 0; border-bottom:1px solid var(--outline-soft); }
.ayah:last-child { border-bottom:0; }
.ayah-tools { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ayah-content { min-width:0; }
.ayah-text { margin:0; font-size:1.75rem; line-height:1.9; font-weight:400; overflow-wrap:break-word; }
.reader-translation { margin:6px 0 0; font-size:.75rem; line-height:1.125rem; color:var(--primary); overflow-wrap:anywhere; }
.ayah-num { position:relative; display:grid; place-items:center; width:3rem; height:3rem; color:var(--ink-3); flex:none; }
.ayah-marker { position:absolute; inset:0; width:100%; height:100%; }
.ayah-number { font-size:.875rem; font-weight:500; font-variant-numeric:tabular-nums; }
.ayah.tone-green .ayah-num { color:var(--green-ink); }
.ayah.tone-yellow .ayah-num { color:var(--amber-ink); }
.ayah.is-playing .ayah-text { text-decoration:underline; text-decoration-color:var(--primary-container); text-underline-offset:8px; }
.audio-status { display:block; color:var(--danger); font-size:.75rem; line-height:1.4; }
.audio-status:empty { display:none; }
.reader-cache-note { margin:8px 0; color:var(--ink-3); font-size:.75rem; }
.ayah-skel { height:60px; margin:12px 0; }
.reader-state { padding:24px 8px; text-align:center; color:var(--ink-2); font-size:.875rem; }
.reader-state p { margin:0 auto 16px; max-width:34ch; }
.reader-state .ui-notice { margin-bottom:16px; text-align:left; }
md-icon-button.ayah-play { width:44px; height:44px;
  --md-icon-button-state-layer-width:44px; --md-icon-button-state-layer-height:44px; }
.reader-pagination { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:12px; margin-top:24px; }
.reader-current { min-width:0; text-align:center; overflow-wrap:anywhere; font-size:.9375rem; font-weight:600; color:var(--primary); }
.reader-pagination md-icon-button { width:48px; height:48px; }

/* Catat setoran */
md-dialog.dlg.record-dialog {
  width:min(calc(100vw - 32px),440px); max-height:calc(100dvh - 32px);
  --record-control-height:48px; --record-field-size:1rem; --record-button-size:.875rem;
  --record-field-radius:12px; --record-button-radius:999px;
  --md-filled-button-label-text-size:var(--record-button-size); --md-filled-button-label-text-line-height:1.25rem; --md-filled-button-label-text-weight:500;
  --md-outlined-button-label-text-size:var(--record-button-size); --md-outlined-button-label-text-line-height:1.25rem; --md-outlined-button-label-text-weight:500;
  --md-text-button-label-text-size:var(--record-button-size); --md-text-button-label-text-line-height:1.25rem; --md-text-button-label-text-weight:500;
  --md-filled-button-container-shape:var(--record-button-radius); --md-outlined-button-container-shape:var(--record-button-radius); --md-text-button-container-shape:var(--record-button-radius);
}
.record-dialog [hidden] { display:none; }
md-dialog.dlg.record-dialog > [slot="headline"] { padding:24px 24px 0; }
md-dialog.dlg.record-dialog > .sheet-body { display:grid; gap:20px; min-width:0; padding:12px 24px 8px; }
.record-fields { display:grid; gap:20px; min-width:0; }
.record-member-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:var(--record-control-height); padding:10px 12px; border:1px solid var(--outline-strong); border-radius:var(--record-field-radius); color:var(--primary); background:var(--surface); text-align:left; font:inherit; font-size:var(--record-field-size); line-height:1.5rem; cursor:pointer; }
.record-member-toggle span,.record-member-option span,.record-member-static strong { min-width:0; overflow-wrap:anywhere; }
.record-member-toggle .ic { flex:none; width:20px; height:20px; transform:rotate(90deg); }
.record-member-toggle[aria-expanded="true"] .ic { transform:rotate(-90deg); }
.record-member-toggle:hover,.record-member-option:hover { background:var(--surface-2); }
.record-member-toggle:disabled { cursor:default; opacity:.6; }
.record-member-static strong { display:block; font-size:1rem; font-weight:500; }
#record-member-panel { padding-top:12px; }
.record-member-list { display:grid; max-height:min(28dvh,224px); overflow-y:auto; margin-top:8px; padding:2px; scroll-padding:4px; }
.record-member-option { display:flex; align-items:center; gap:12px; padding:10px 8px; min-height:44px; border-radius:8px; cursor:pointer; }
.record-member-option input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--primary); }
.record-member-option:has(input:checked) { background:var(--primary-container); color:var(--primary); }
.record-switch { display:grid; gap:8px; color:var(--ink); }
.record-switch > div { display:flex; gap:8px; flex-wrap:wrap; }
.record-switch md-text-button,.record-switch md-outlined-button { min-height:var(--record-control-height); --md-text-button-container-height:var(--record-control-height); --md-outlined-button-container-height:var(--record-control-height); }
.record-dialog .sheet-sub { color:var(--ink-2); font-size:.875rem; overflow-wrap:anywhere; }
.record-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.record-range .field-label { margin-left:0; }
.record-range .input { height:max(var(--record-control-height),calc(1.5rem + 24px)); --md-outlined-text-field-input-text-size:var(--record-field-size); --md-outlined-text-field-input-text-line-height:1.5rem; --md-outlined-text-field-top-space:12px; --md-outlined-text-field-bottom-space:12px; --md-outlined-text-field-container-shape:var(--record-field-radius); }
.record-dialog .record-start { background:var(--surface-2); border-radius:var(--record-field-radius); --md-outlined-text-field-input-text-color:var(--ink-3); }
.record-end { display:flex; align-items:center; gap:10px; min-height:var(--record-control-height); cursor:pointer; margin-top:-12px; }
.record-end input { width:20px; height:20px; flex:none; margin:0; accent-color:var(--primary); }
.record-end:has(input:disabled) { color:var(--ink-3); cursor:default; }
.record-fluency { display:flex; flex-wrap:wrap; gap:8px; }
.status-pill { display:flex; flex:1 1 auto; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:var(--record-control-height); padding:10px 8px; border:1px solid var(--outline-strong); border-radius:var(--record-button-radius); font:inherit; font-size:var(--record-button-size); line-height:1.25rem; font-weight:500; color:var(--ink-2); background:transparent; cursor:pointer; }
.status-pill .ic { width:1em; height:1em; flex:none; }
.status-pill span { min-width:0; overflow-wrap:normal; }
.status-pill[aria-checked="false"] .ic { visibility:hidden; }
.status-pill:hover { background:var(--surface-2); }
.status-review[aria-checked="true"] { background:var(--amber-tint); color:var(--amber-ink); border-color:var(--amber-ink); }
.status-fluent[aria-checked="true"] { background:var(--accent-container); color:var(--primary); border-color:var(--primary); }
.record-history summary { min-height:var(--record-control-height); display:flex; align-items:center; color:var(--primary); cursor:pointer; font-weight:500; }
.record-history ul { list-style:none; margin:8px 0 0; padding:0; max-height:240px; overflow-y:auto; }
.session-entry { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; padding:12px 0; border-bottom:1px solid var(--outline-soft); }
.session-entry > div { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; }
.session-entry strong { font-weight:500; }
.session-entry small { color:var(--ink-3); }
.session-status { font-size:.8125rem; }
.session-fluent { color:var(--green-ink); }
.session-review { color:var(--amber-ink); }
.session-entry md-text-button { min-height:var(--record-control-height); --md-text-button-container-height:var(--record-control-height); }
.record-dialog .sheet-preview { color:var(--ink-2); font-size:.8125rem; overflow-wrap:anywhere; }
.record-dialog .sheet-preview b { font-weight:500; }
md-dialog.dlg.record-dialog > .sheet-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding:16px 24px 24px; }
.record-dialog .sheet-actions > * { min-height:var(--record-control-height); --md-filled-button-container-height:var(--record-control-height); --md-text-button-container-height:var(--record-control-height); }
.record-dialog .sheet-actions [data-delete] { margin-right:auto; }

/* Detail anak */
.settled .ring-arc { animation: none; }
.srow { display: flex; align-items: center; padding-right: 4px; }
.srow-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 14px 4px 14px 16px; }
.srow-main:active { background: var(--surface-2); }
.sbody { flex: 1; min-width: 0; display: grid; gap: 6px; }
.sline1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sline1 b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sline1 .arab { flex: none; font-size: 1.125rem; color: var(--ink-2); }
.sline2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.smeta { font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.srow .rangebar { height: 4px; margin-top: 2px; }
.empty-filter { padding: 24px 16px; text-align: center; font-size: .875rem; color: var(--ink-3); }

/* Juz 30 */
.jrow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 12px 8px 16px; }
.jrow:active { background: var(--surface-2); }
.jname { flex: 1; min-width: 0; display: grid; }
.jname b { font-weight: 500; }
.jname small { font-size: .8125rem; color: var(--ink-3); }
.jrow .arab { font-size: 1.125rem; color: var(--ink-2); }
.jrow > .ic { color: var(--ink-3); }

.library-page { padding-top: 8px; }
.last-read { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; border-radius:16px;
  background:color-mix(in srgb,var(--accent-container) 70%,transparent); color:var(--on-accent-container); }
.last-read-copy { min-width:0; flex:1 1 8rem; overflow-wrap:anywhere; }
.last-read-eyebrow { font-size:.75rem; }
.last-read h2 { margin:4px 0; font-size:1.125rem; line-height:1.3; font-weight:600; }
.last-read p { margin:0; font-size:.8125rem; }
.last-read-action { display:flex; align-items:center; gap:6px; margin-top:12px; font-size:.8125rem; font-weight:600; }
.last-read-action .ic { width:16px; height:16px; }
.reading-ornament { display:block; flex:none; width:clamp(104px,30vw,140px); height:auto; aspect-ratio:1; object-fit:contain; pointer-events:none; margin-inline-start:auto; }
.library-tabs { display:flex; margin:12px 0 0; border-bottom:1px solid var(--outline); }
.library-tabs [role=tab] { position:relative; flex:1; min-height:48px; padding:10px 8px; font-size:.875rem; font-weight:500; color:var(--ink-3); }
.library-tabs [aria-selected=true] { color:var(--primary); }
.library-tabs [aria-selected=true]::after { content:''; position:absolute; bottom:0; left:25%; right:25%; height:3px; border-radius:3px 3px 0 0; background:var(--primary); }
.surah-group { margin:0 0 20px; }
.juz-group-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; padding:18px 4px 10px; }
.juz-group-heading h2 { margin:0; font-size:.9375rem; font-weight:600; }
.juz-group-heading > span { font-size:.75rem; color:var(--ink-3); }
.library-page .list { border-radius:12px; }
.surah-num { color:var(--primary); }
.library-page .jrow { gap:10px; padding:12px 8px; }
.library-page .jname { overflow-wrap:anywhere; }
.library-page .jname b { font-size:.9375rem; overflow-wrap:anywhere; }
.library-page .jname small { font-size:.75rem; }
.library-page .jrow > .arab { flex-shrink:0; min-width:0; max-width:34%; overflow-wrap:anywhere; }
.library-page .jrow > .ic { width:18px; height:18px; }
.juz-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:12px; font-size:.8125rem; color:var(--ink-3); }
.juz-meta a { display:inline-flex; align-items:center; gap:4px; min-height:44px; color:var(--primary); }
.juz-meta .ic { width:16px; height:16px; }
.juz-options { display:grid; gap:10px; padding-top:16px; }
.juz-option { display:flex; align-items:center; gap:12px; min-height:76px; padding:12px; border-radius:12px; background:var(--surface); }
.juz-option > span:nth-child(2) { flex:1; min-width:0; }
.juz-option b { display:block; font-size:1rem; font-weight:500; }
.juz-option small { font-size:.8125rem; color:var(--ink-3); }
.juz-option-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:12px; background:var(--primary-container); color:var(--primary); }
.juz-option > .ic { color:var(--ink-3); }
.library-page .juz-child { margin:12px 4px 0; }

.juz-picker { display: flex; gap: 8px; padding: 8px 0 12px; }
.juz-picker md-filter-chip { flex: 1; min-height: 48px; --md-filter-chip-container-height:48px; }
.juz-child { margin: 0; font-size: .875rem; color: var(--primary); }

/* Profil: satu card identitas, daftar tenang dan progres yang selalu berlabel. */
.profile-page { font-size:.875rem; }
.profile-hero { position:relative; padding:16px; border-radius:16px; background:var(--primary); color:var(--accent-container); }
.profile-hero-layout { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px; width:min(100%,340px); margin-inline:auto; }
.profile-photo-column { --profile-photo-size:clamp(69.16px,21.84vw,94.64px); display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; align-self:center; width:var(--profile-photo-size); }
.profile-info { flex:1 1 8rem; min-width:0; }
.profile-photo { display:grid; place-items:center; width:100%; height:var(--profile-photo-size); overflow:hidden;
  border-radius:50%; background:var(--avatar-container); color:var(--on-avatar-container); font-size:2rem; font-weight:500; }
.profile-photo:focus-visible { outline-color:var(--accent-container); }
.profile-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.profile-photo [hidden] { display:none; }
.profile-menu-button { position:absolute; top:4px; right:4px; width:48px; height:48px;
  --md-icon-button-icon-color:var(--accent-container); --md-icon-button-focus-icon-color:var(--accent-container);
  --md-icon-button-hover-icon-color:var(--accent-container); --md-icon-button-pressed-icon-color:var(--accent-container);
  --md-icon-button-focus-state-layer-color:var(--accent-container); --md-icon-button-hover-state-layer-color:var(--accent-container);
  --md-icon-button-pressed-state-layer-color:var(--accent-container); }
.profile-menu-button:focus-visible { outline-color:var(--accent-container); }
.profile-photo-preview { display:block; width:256px; max-width:100%; height:auto; margin-inline:auto; }
.profile-feedback:empty { display:none; }
.profile-feedback:not(:empty) { margin-top:12px; }
.profile-identity { max-width:100%; text-align:center; overflow-wrap:anywhere; }
.profile-identity h2 { margin:0; font-size:1rem; line-height:1.3; font-weight:600; }
.profile-total { margin:0; padding-right:28px; font-size:.875rem; }
.profile-total b { font-size:1.125rem; font-weight:600; }
.profile-percent { margin:4px 0 8px; font-size:.8125rem; }
.profile-bar { display:flex; width:70%; height:6px; margin-bottom:8px; overflow:hidden; border-radius:3px; background:var(--track); }
.profile-bar i { display:block; height:100%; }
.profile-bar-green { background:var(--green); }
.profile-bar-yellow { background:var(--amber); }
.profile-stats { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:.8125rem; margin-bottom:12px; }
.profile-stats b { font-weight:600; }
.profile-hero :is(.profile-total,.profile-percent,.profile-stats) { color:var(--on-primary); }
.profile-page .profile-cta { width:auto; max-width:100%; height:3rem; min-height:48px; --md-filled-button-container-height:3rem; }
.profile-hero .profile-cta { --md-sys-color-primary:var(--accent-container); --md-sys-color-on-primary:var(--primary); }
.profile-juz { display:flex; align-items:center; gap:12px; padding:12px; min-height:68px; }
.profile-juz-copy { flex:1; min-width:0; display:grid; gap:4px; }
.profile-juz b { font-size:.9375rem; font-weight:500; }
.profile-juz small { font-size:.75rem; color:var(--ink-3); }
.profile-juz > .ic { width:20px; height:20px; color:var(--primary); }
.profile-section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 8px; margin-top:16px; }
.profile-section-heading .section-title { margin-top:0; margin-bottom:0; }
.profile-more, .profile-scope-link { display:inline-flex; align-items:center; min-height:44px; padding:6px 4px; font-size:.8125rem; font-weight:500; color:var(--primary); }
.profile-section-heading + .list { margin-top:8px; }
.profile-note { margin:-4px 4px 8px; font-size:.75rem; color:var(--ink-3); }
.profile-empty { margin:8px 4px; color:var(--ink-3); font-size:.8125rem; }
.profile-records { margin-top:20px; }
.profile-records > summary { min-height:48px; padding:12px 4px; font-weight:500; color:var(--primary); cursor:pointer; }
.profile-page .profile-filters { margin:0 0 16px; padding:4px 0; flex-wrap:wrap; overflow:visible; }
.profile-filters .chip { min-height:44px; height:auto; white-space:normal; --md-filter-chip-container-height:44px; }
.profile-page .list { border-radius:12px; }
.profile-page .srow-main { gap:10px; padding:12px 4px 12px 10px; }
.profile-page .srow .surah-num { width:32px; height:32px; }
.profile-page .sline1 { flex-wrap:wrap; gap:0 8px; }
.profile-page .sline1 b { font-size:.9375rem; white-space:normal; overflow-wrap:anywhere; }
.profile-page .sline1 .arab { font-size:1rem; max-width:100%; overflow-wrap:anywhere; }
.profile-page .smeta { font-size:.75rem; }
.profile-page .badge { gap:4px; height:auto; min-height:24px; white-space:normal; }
.profile-page .badge .ic { width:14px; height:14px; }
.profile-page .sbody { gap:4px; }
.profile-unavailable h2 { font-size:1.125rem; }
.profile-unavailable md-outlined-button.btn { height:2.75rem; min-height:44px; --md-outlined-button-container-height:2.75rem; }

@media (max-width:340px) {
  .profile-hero-layout { column-gap:20px; }
}

/* Circle extends the existing Material palette and the 480px mobile shell. */
.circle-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;margin:0 0 12px;color:var(--primary,#224E59)}
.circle-summary{position:relative;background:#224E59;color:#FFFEFA;border-radius:24px;padding:24px;margin:0 0 28px;overflow:hidden}
.circle-summary .circle-eyebrow{color:#D2E16C}
.circle-summary-copy{width:62%;overflow-wrap:anywhere}
.circle-summary-art{position:absolute;right:-8px;bottom:0;display:block;width:clamp(160px,46vw,208px);height:auto;max-height:100%;object-fit:contain;object-position:right bottom;pointer-events:none}
.circle-summary h2{font-size:23px;line-height:1.25;margin:0;font-weight:700}.circle-summary strong{display:block;margin-top:12px;font-size:36px;letter-spacing:-.04em;color:#D2E16C}
.circle-summary p:not(.circle-eyebrow){font-size:13px;line-height:1.6;margin:14px 0 0}.circle-summary .circle-summary-note{opacity:.8}
.circle-settings{padding:24px;margin-bottom:24px}.circle-settings h2{overflow-wrap:anywhere}.circle-settings .btn{margin-top:12px}
.circle-page{display:grid;gap:24px}
.circle-page .circle-settings{margin:0}
.circle-page .circle-settings h2{margin:0}
.circle-page .circle-settings>.btn{min-height:48px;max-width:100%;white-space:normal;--md-outlined-button-container-height:48px;--md-text-button-container-height:48px}
.circle-page .circle-section-heading{margin:0 0 8px;flex-wrap:wrap}
.circle-page .circle-member-actions{gap:4px;margin-top:8px}
.circle-page .circle-member-actions>*{min-height:48px;--md-text-button-container-height:48px}
.circle-page .circle-member-link>.avatar,.circle-page .circle-member-link>.ic{flex-shrink:0}
.circle-page .circle-about{padding-top:0}
.circle-page .circle-signout{justify-self:center;min-height:48px;max-width:100%;white-space:normal;color:var(--on-primary);--md-sys-color-primary:var(--danger);--md-filled-button-container-color:var(--danger);--md-filled-button-label-text-color:var(--on-primary);--md-filled-button-container-height:48px;--md-filled-button-container-shape:999px}
.circle-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}
.circle-section-heading .section-title{margin:0}.circle-member{padding:12px 16px}
.circle-member-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-height:56px}.circle-member-link>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.circle-member-link small{display:block;margin-top:4px;font-size:12px;color:#526660}.circle-member-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:4px}
.profile-target{font-size:11px;line-height:1.5;margin:0 0 10px}.viewer-banner{display:flex;align-items:center;justify-content:space-between;background:#E5EDAC;padding:8px 16px;font-size:12px;gap:8px}
.viewer-banner button{background:none;border:0;color:#224E59;min-height:48px;font:inherit;font-weight:700;padding:0 12px;cursor:pointer}
@media(max-width:340px){.circle-summary{padding:20px}.circle-summary h2{font-size:20px}.circle-summary strong{font-size:30px}}
.brand-wordmark{font-family:'Nunito Brand',var(--font);font-weight:600;font-size:20px;letter-spacing:0;text-transform:none}
.brand-identity{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;vertical-align:middle}
.brand-mark{display:block;width:32px;height:32px;flex:none}
.brand-identity .brand-wordmark{font-size:18px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.onb-brand{text-align:center;margin-bottom:20px}
.brand-footer{text-align:center;color:#526660;font-size:12px;line-height:1.6;margin:32px auto 8px;max-width:320px}
.brand-footer p{margin:0 0 6px;font-weight:600}.brand-footer small{display:block;font-size:11px}
.brand-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:0 16px;margin-bottom:6px}.brand-footer nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.circle-about{display:grid;justify-items:center;gap:16px;text-align:center;padding:8px 0 20px;color:var(--primary)}
.circle-account-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px}
.circle-account-actions [data-pwa-install]{min-height:48px;--md-outlined-button-container-height:48px}
.circle-about .brand-footer{margin-top:0}