.studio .experience-card { display:flex; align-items:center; gap:22px; padding:26px; background:var(--studio-soft); border:1px solid var(--studio-border); border-radius:22px; }
.studio .experience-card.compact { padding:18px 22px; margin:16px 0 26px; background:#fff; gap:16px; }
.studio .experience-emblem { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:76px; height:84px; flex:none; background:var(--studio-accent); border-radius:24px 24px 30px 30px; color:var(--studio-ink); font-size:19px; font-weight:750; }
.studio .experience-emblem svg { width:27px; height:27px; }
.studio .compact .experience-emblem { width:56px; height:60px; border-radius:17px; font-size:15px; gap:0; }
.studio .compact .experience-emblem svg { width:19px; height:19px; }
.studio .experience-copy { flex:1; min-width:0; }
.studio .experience-heading, .studio .experience-caption { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.studio .experience-heading strong { font-size:16px; }.studio .experience-heading>span { font-size:12px; color:var(--studio-muted); }
.studio .experience-progress { height:8px; border-radius:10px; margin:12px 0 9px; overflow:hidden; background:var(--studio-border); }
.studio .experience-progress>span { display:block; height:100%; border-radius:inherit; background:var(--studio-deep); animation:experience-fill .7s ease-out; transform-origin:left; }
.studio .experience-caption { font-size:12px; color:var(--studio-muted); }.studio .experience-caption b { color:var(--studio-deep); }
.studio .experience-growth { margin-bottom:35px; }.studio .experience-section-heading { margin:28px 0 16px; }
.studio .experience-badges { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.studio .experience-badge { display:flex; align-items:flex-start; gap:13px; padding:20px 16px; border:1px dashed var(--studio-border); border-radius:18px; color:var(--studio-muted); background:#f9faf8; }
.studio .experience-badge.unlocked { color:var(--studio-ink); background:#fff; border-style:solid; }
.studio .badge-symbol { display:grid; place-items:center; width:44px; height:48px; flex:none; border-radius:15px; background:var(--studio-border); }
.studio .unlocked .badge-symbol { background:var(--studio-accent); color:var(--studio-deep); }
.studio .experience-badge p { font-size:11px; margin:5px 0 9px; }.studio .badge-status { font-size:11px; }.studio .unlocked .badge-status { color:var(--studio-deep); font-weight:650; }
.studio .experience-rules { margin-top:18px; color:var(--studio-muted); font-size:12px; }.studio .experience-rules summary { cursor:pointer; padding:8px 0; }.studio .experience-rules p { margin:8px 0; max-width:78ch; }
.studio .experience-event { display:flex; align-items:flex-start; gap:14px; padding:17px 0; border-bottom:1px solid var(--studio-border); }
.studio .experience-event>div { flex:1; min-width:0; }.studio .experience-event strong { overflow-wrap:anywhere; font-size:13px; }.studio .experience-event p { margin:4px 0; font-size:12px; color:var(--studio-muted); }.studio .experience-event time { font-size:11px; color:var(--studio-muted); }
.studio .experience-amount { flex:none; color:var(--studio-deep); font-size:18px; }.studio .experience-empty { color:var(--studio-muted); padding:20px 0; font-size:13px; }.studio .experience-more { margin-top:14px; }
.studio .family-experience { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px; margin-top:20px; }
.studio .family-experience-card { display:flex; align-items:center; gap:12px; min-width:0; padding:18px; border:1px solid var(--studio-border); border-radius:16px; background:var(--panel); }
.studio .family-experience-copy { flex:1; min-width:0; }
.studio .family-experience-heading { display:flex; align-items:center; gap:12px; }
.studio .family-experience-heading strong { flex:1; min-width:0; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.studio .experience-level { display:inline-flex; align-items:center; flex:none; white-space:nowrap; font-size:11px; font-weight:650; line-height:1.5; padding:3px 9px; border-radius:8px; background:var(--studio-soft); color:var(--studio-deep); }
.studio .family-experience-stats { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; line-height:1.6; color:var(--studio-muted); margin:7px 0 0; }
.studio .family-experience-stats>span { overflow-wrap:anywhere; }
.studio .experience-notice { position:fixed; bottom:96px; right:32px; z-index:1100; max-width:430px; display:flex; align-items:center; gap:14px; padding:20px; background:var(--studio-ink); color:#fff; border:1px solid var(--studio-accent); border-radius:20px; box-shadow:var(--shadow-lg); animation:experience-appear .4s ease-out; }
.studio .experience-notice>svg { color:var(--studio-accent); width:28px; height:28px; }.studio .experience-notice>div { min-width:0; }.studio .experience-notice strong { font-size:15px; }.studio .experience-notice p { font-size:12px; opacity:.85; margin:6px 0 0; overflow-wrap:anywhere; }.studio .experience-notice button { color:#fff; flex:none; }.studio .experience-notice button:hover { background:#ffffff18; }.studio .experience-notice.level-up { border-width:2px; }
@keyframes experience-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes experience-appear { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:700px) { .studio .experience-badges { grid-template-columns:1fr; }.studio .experience-badge { padding:16px; align-items:center; }.studio .experience-badge p { margin:3px 0; }.studio .experience-card { gap:14px; padding:18px; }.studio .experience-card.compact { padding:16px; gap:12px; }.studio .experience-heading strong { font-size:14px; }.studio .experience-heading { gap:2px; }.studio .experience-caption { gap:3px; }.studio .experience-caption>span:last-child { display:none; }.studio .experience-notice { bottom:calc(86px + env(safe-area-inset-bottom)); left:16px; right:16px; max-width:none; padding:16px; }.studio .compact .icon-button { width:30px; min-width:30px; padding:5px; } }
@media(prefers-reduced-motion:reduce) { .studio .experience-progress>span, .studio .experience-notice { animation:none; } }
html.studio[data-motion="quiet"] .experience-progress>span, html.studio[data-motion="quiet"] .experience-notice { animation:none; }

.studio .growth-date-filter, .studio .growth-pagination { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:18px 0; font-size:12px; }
.studio .growth-date-filter input { width:auto; max-width:100%; min-height:40px; padding:8px 12px; border:1px solid var(--studio-border); border-radius:10px; background:var(--panel); color:var(--ink); }
.studio .growth-pagination button { min-height:40px; }
.studio .growth-pagination button:disabled { opacity:.4; cursor:default; }