#panel:has(.daughter) {
    width: min(1120px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: min(900px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    border-radius: 24px;
    overflow: hidden;
}
#panel.daughter-expanded:has(.daughter) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
#panel[open]:has(.daughter) { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
#panel:has(.daughter) #panel-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#panel:has(.daughter) #panel-title { padding-right: 100px; }
#panel:has(.daughter) #panel-close,
.daughter-window-expand { position: absolute; top: 13px; width: 44px; height: 44px; padding: 0; font-size: 27px; }
#panel:has(.daughter) #panel-close { right: 18px; }
.daughter-window-expand { right: 68px; cursor: pointer; }
@media (max-width: 650px) {
    #panel:has(.daughter) #panel-close { top: 4px; right: 6px; }
    .daughter-window-expand { top: 4px; right: 56px; }
}
.daughter-controls { margin-bottom: 16px; }
.daughter-tabs { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 1; background: #faf8ea; padding: 8px 0; }
.daughter-tabs [aria-selected="true"] { background: #71875c; color: #fff; }
.daughter-controls .daughter-next { width: auto; }

.daughter { color: #584739; }
.daughter-name-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 12px; }
.daughter-name-form label { display: grid; gap: 4px; min-width: 0; }
.daughter-name-form input { width: 100%; max-width: 260px; min-height: 44px; padding: 8px 12px; border: 1px solid #d6d5bf; border-radius: 10px; font: inherit; }
.daughter-name-form .daughter-help { flex-basis: 100%; padding: 0; }
.daughter h3, .daughter h4, .daughter p { margin: 0; }
.daughter-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.daughter-heading h3 { min-width: 0; overflow-wrap: anywhere; margin-right: auto; }
.daughter-heading { flex-wrap: wrap; }
.daughter-heading > span { flex-shrink: 0; }
.daughter-layout { display: grid; grid-template-columns: minmax(230px, 1.05fr) minmax(280px, .95fr); gap: 24px; align-items: start; }
.daughter-stage { background: #fffaf0; border: 1px solid #e1dccb; border-radius: 20px; overflow: hidden; padding: 16px; text-align: center; }
.daughter-portrait { display: block; width: 100%; height: 420px; object-fit: contain; }
.daughter-speech { padding: 12px; background: #f1f0df; border-radius: 14px; font-size: 15px; }
.daughter-preview-note { font-size: 12px; min-height: 32px; padding-top: 12px; }
.daughter-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.daughter-stats label { display: grid; gap: 5px; font-size: 12px; }
.daughter-stats meter { width: 100%; height: 16px; accent-color: #829567; }
.daughter-stats span { font-variant-numeric: tabular-nums; }
.daughter-help { color: #756c60; font-size: 13px; line-height: 1.6; padding: 8px 0 16px; }
.daughter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.daughter button { min-height: 44px; border: 1px solid #d6d5bf; border-radius: 10px; background: #f0efdf; color: #40563b; padding: 8px 14px; cursor: pointer; }
.daughter button:hover:not(:disabled) { background: #e2e8d2; }
.daughter button:focus-visible { outline: 3px solid #71875c; outline-offset: 3px; }
.daughter [data-collect], .daughter-next { background: #71875c; color: #fff; border-color: #71875c; }
.daughter [data-collect]:hover:not(:disabled), .daughter-next:hover:not(:disabled) { background: #5e744a; }
.daughter button:disabled { opacity: .55; cursor: default; }
.daughter-next { width: 100%; }
.daughter-status { min-height: 24px; color: #9b3d32; padding: 8px 0; }
.daughter-outfits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.daughter-wardrobe-list { height: clamp(280px, 55dvh, 520px); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; align-content: start; align-items: start; padding: 3px; }
.daughter-wardrobe-list:focus-visible, .daughter-outfit summary:focus-visible { outline: 3px solid #71875c; outline-offset: -3px; }
.daughter-outfit details { margin: 8px 0; }
.daughter-outfit summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 12px; color: #40563b; }
.daughter-outfit { border: 1px solid #dcd6c6; border-radius: 14px; padding: 12px; background: #fffdf6; min-width: 0; }
.daughter-outfit.is-wearing { border: 2px solid #71875c; padding: 11px; }
.daughter-outfit img { width: 100%; height: 155px; object-fit: contain; display: block; border-radius: 8px; background: #fffaf0; }
.daughter-outfit h4 { font-size: 15px; margin-top: 10px; }
.daughter-outfit [data-ownership] { font-size: 12px; color: #827865; margin-top: 5px; }
.daughter-outfit.is-owned [data-ownership] { color: #4d723e; }
.daughter-outfit ul { list-style: none; padding: 0; margin: 10px 0; font-size: 12px; line-height: 1.6; }
.daughter-outfit small { display: block; color: #827865; margin-bottom: 5px; }
.daughter-outfit-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.daughter-outfit-actions button { flex: 1; padding: 8px; font-size: 12px; }
@media (max-width: 650px) {
    .daughter-layout { grid-template-columns: 1fr; gap: 18px; }
    .daughter-portrait { height: 330px; }
    .daughter-outfit { padding: 9px; }
    .daughter-outfit.is-wearing { padding: 8px; }
    .daughter-outfit img { height: 135px; }
}

.daughter-scene { background-size: cover; background-position: center; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.daughter-figure { position: relative; width: min(100%, 380px); margin-inline: auto; }
/* Match the layered viewport: 80 units at each side and 240 above the original canvas. */
.daughter-figure .daughter-portrait { width: 86.4865%; height: auto; margin-inline: auto; padding-top: 20.2703%; box-sizing: content-box; }
/* Every layer shares this canvas; no per-outfit scaling or body replacement. */
.daughter-paper-doll { display: block; width: 100%; height: auto; }
.daughter-paper-doll[hidden], .daughter-portrait[hidden] { display: none; }
@media (max-width: 650px) { .daughter-stage { padding: 10px; } .daughter-figure { width: 100%; } }
.daughter-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.daughter-category-tabs [aria-selected="true"] { background: #71875c; color: #fff; }
.daughter-career-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.daughter-career-stats label { display: grid; font-size: 12px; }
.daughter-career-stats meter { width: 100%; accent-color: #829567; }
.daughter-schedule { display: grid; gap: 8px; margin: 12px 0; }
.daughter-schedule label { display: grid; grid-template-columns: 65px minmax(0, 1fr); align-items: center; gap: 8px; }
.daughter-schedule .is-done { opacity: .6; }
.daughter select { min-width: 0; max-width: 100%; min-height: 44px; padding: 8px; border: 1px solid #d6d5bf; border-radius: 10px; font: inherit; background: #fffdf6; color: inherit; }
.daughter-show { margin-top: 24px; border-top: 1px solid #d6d5bf; padding-top: 16px; }
.daughter-show label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.daughter-background img { height: 112px; object-fit: cover; }

.daughter-meals { display: grid; gap: 8px; margin: 12px 0 20px; }
.daughter-meals > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; background: #fffdf6; border: 1px solid #dcd6c6; border-radius: 12px; padding: 10px; }
.daughter-meals small { grid-column: 1; font-size: 12px; line-height: 1.5; }
.daughter-meals button { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 12px; }