/* ===== 全局变量系统 ===== */
:root {
    --app-content-max: 1400px;
    --pink-main:    #ff5c9f;
    --pink-dark:    #d62972;
    --pink-light:   #ffc1d9;
    --pink-pale:    #fff1f6;
    --pink-border:  #ffd4e5;
    --purple-main:  #7c5cff;
    --purple-light: #eee8ff;
    --text-dark:    #32233a;
    --text-mid:     #6f6178;
    --text-light:   #978ca0;
    --text-pale:    #c9bfce;
    --bg-page:      #fff7e9;
    --bg-card:      #fffdf8;
    --bg-nav:       rgba(255,253,248,0.94);
    --color-success: #43a047;
    --color-warning: #fb8c00;
    --color-danger:  #e53935;
    --color-info:    #1e88e5;
    --radius-sm:   6px;
    --radius-md:   14px;
    --radius-lg:   22px;
    --radius-xl:   28px;
    --radius-full: 999px;
    --shadow-card:  0 10px 0 #f0d6b5, 0 18px 34px rgba(124,92,255,0.12);
    --shadow-hover: 0 14px 0 #eacaa0, 0 24px 42px rgba(255,92,159,0.22);
    --shadow-modal: 0 18px 0 rgba(240,214,181,0.75), 0 30px 70px rgba(50,35,58,0.18);
    --shadow-nav:   0 8px 0 rgba(240,214,181,0.75), 0 18px 36px rgba(50,35,58,0.08);
    --clay-bg-1: #fff7e9;
    --clay-bg-2: #ffeef7;
    --clay-bg-3: #edf7ff;
    --clay-surface: #fffdf8;
    --clay-line: #f2d8ba;
    --clay-peach: #ffb8a6;
    --clay-mint: #9be7c5;
    --clay-sky: #9fd7ff;
    --clay-lilac: #c7b7ff;
    --clay-gold: #ffd66b;
    --clay-ink: #32233a;
    --clay-press: cubic-bezier(0.34,1.56,0.64,1);
    --clay-border: 3px solid var(--clay-line);
}
/* ===== 基础重置系统 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{touch-action:manipulation;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
body{font-family:'PingFang SC','Microsoft YaHei','Segoe UI',sans-serif;background:radial-gradient(circle at 12% 6%,rgba(255,214,107,0.35),transparent 28%),radial-gradient(circle at 88% 10%,rgba(159,215,255,0.42),transparent 30%),linear-gradient(135deg,var(--clay-bg-1) 0%,var(--clay-bg-2) 52%,var(--clay-bg-3) 100%);color:var(--text-dark);min-height:100vh;font-size:15px;line-height:1.5;touch-action:manipulation;}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit;}
button,input,textarea{touch-action:manipulation;}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid rgba(124,92,255,0.45);outline-offset:3px;}
input,textarea{font-family:inherit;font-size:inherit;outline:none;border:2px solid var(--clay-line);border-radius:var(--radius-md);padding:10px 13px;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;color:var(--text-dark);background:#fffdf8;}
input:focus,textarea:focus{border-color:var(--pink-main);box-shadow:0 0 0 4px rgba(255,92,159,0.12);}

/* ===== 页面主体布局 ===== */
.page-main{margin-top:72px;padding:30px 26px 56px;min-height:calc(100vh - 72px);overflow-x:hidden;}

/* ===== 欢迎页系统 ===== */
.welcome-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 154px);text-align:center;gap:18px;}
.welcome-emoji{font-size:82px;animation:bounceFloat 2.2s ease-in-out infinite;filter:drop-shadow(0 12px 0 rgba(240,214,181,0.72));}
@keyframes bounceFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.welcome-title{font-size:30px;font-weight:900;color:var(--clay-ink);}
.welcome-subtitle{font-size:15px;color:var(--text-mid);line-height:1.9;}
.welcome-create-btn{display:flex;align-items:center;gap:8px;min-height:48px;padding:13px 34px;background:linear-gradient(135deg,var(--pink-main),#ff8dbb);color:white;border-radius:var(--radius-full);font-size:16px;font-weight:800;cursor:pointer;border:3px solid #fff;box-shadow:0 8px 0 #d62972,0 16px 28px rgba(255,92,159,0.32);transition:transform 0.2s var(--clay-press),box-shadow 0.2s var(--clay-press);margin-top:4px;}
.welcome-create-btn:hover{transform:translateY(-3px);box-shadow:0 11px 0 #d62972,0 20px 30px rgba(255,92,159,0.36);}
.welcome-create-btn:active{transform:translateY(4px);box-shadow:0 3px 0 #d62972,0 10px 18px rgba(255,92,159,0.24);}

/* ===== 主仪表盘系统 ===== */
.dashboard{width:100%;max-width:var(--app-content-max);margin:0 auto;}
.class-info-bar{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap;background:rgba(255,253,248,0.78);border:var(--clay-border);border-radius:var(--radius-xl);box-shadow:0 8px 0 rgba(240,214,181,0.82);padding:14px 18px;}
.class-info-title{font-size:21px;font-weight:900;color:var(--clay-ink);}
.class-info-count{font-size:13px;color:var(--text-mid);background:#fff7d7;padding:5px 14px;border-radius:var(--radius-full);border:2px solid #ffe69a;font-weight:700;}
.class-info-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;}
.btn-outline-pink{display:flex;align-items:center;gap:5px;min-height:40px;padding:8px 15px;border:2px solid var(--pink-main);color:var(--pink-dark);border-radius:var(--radius-full);font-size:13px;font-weight:800;cursor:pointer;transition:all 0.2s var(--clay-press);background:white;box-shadow:0 4px 0 rgba(255,193,217,0.7);}
.btn-outline-pink:hover{background:var(--pink-pale);}
.btn-solid-pink{display:flex;align-items:center;gap:5px;min-height:40px;padding:8px 15px;background:linear-gradient(135deg,var(--pink-main),#ff8dbb);color:white;border-radius:var(--radius-full);font-size:13px;font-weight:800;cursor:pointer;border:2px solid #fff;transition:all 0.2s var(--clay-press);box-shadow:0 5px 0 #d62972;}
.btn-solid-pink:hover{transform:translateY(-2px);}
.btn-solid-pink:active{transform:translateY(3px);box-shadow:0 2px 0 #d62972;}
.student-grid{display:grid;grid-template-columns:repeat(var(--card-cols,6),1fr);gap:calc(20px * var(--card-scale,1));touch-action:pan-x pan-y pinch-zoom;}
.find-zoom-group{display:flex;align-items:center;gap:8px;margin-left:auto;}
.zoom-ctrl{display:flex;align-items:center;gap:4px;}
.zoom-btn{padding:5px 12px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border:2px solid var(--clay-line);background:white;font-size:12px;font-weight:800;color:var(--text-mid);cursor:pointer;transition:all 0.2s var(--clay-press);white-space:nowrap;box-shadow:0 4px 0 rgba(240,214,181,0.78);}
.zoom-btn:hover{border-color:var(--pink-main);color:var(--pink-main);}
@media (max-width:640px){.student-grid{gap:12px;}}

/* ===== 空状态系统 ===== */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;text-align:center;gap:12px;}
.empty-state-icon{font-size:52px;opacity:0.55;}
.empty-state-text{font-size:16px;color:var(--text-light);font-weight:500;}
.empty-state-sub{font-size:13px;color:var(--text-pale);}

@media(max-width:640px){
    .page-main{margin-top:60px;padding:16px 12px calc(96px + env(safe-area-inset-bottom));min-height:calc(100dvh - 60px);}
    .sort-batch-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
    .class-info-bar{align-items:flex-start;margin-bottom:14px;}
    .class-info-title{font-size:22px;line-height:1.25;}
    .class-info-count{font-size:13px;}
}
/* ===== 弹窗系统 ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.46);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity 0.25s,visibility 0.25s;}
.modal-overlay.show{opacity:1;visibility:visible;}
.modal-box{background:white;border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);width:100%;max-width:960px;max-height:90vh;overflow-y:auto;overflow-x:hidden;transform:scale(0.94) translateY(12px);transition:transform 0.25s;}
.modal-overlay.show .modal-box{transform:scale(1) translateY(0);}

/* 主页面共用数字键盘；必须随基础弹窗样式加载，不能依赖懒加载功能。 */
.numpad-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1200;display:flex;align-items:center;justify-content:center;}
.numpad-overlay.hidden{display:none;}
.numpad-box{background:#fff;border-radius:var(--radius-xl);padding:20px;width:280px;box-shadow:var(--shadow-modal);}
.numpad-display{text-align:right;font-size:28px;font-weight:700;color:var(--text-dark);padding:10px 12px;border:2px solid #e0e0e0;border-radius:var(--radius-md);min-height:52px;margin-bottom:12px;background:#fafafa;word-break:break-all;}
.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.numpad-btn{padding:14px;font-size:20px;font-weight:700;background:#f5f5f5;border:1.5px solid #e8e8e8;border-radius:var(--radius-md);cursor:pointer;color:var(--text-dark);text-align:center;transition:background .15s;}
.numpad-btn:hover{background:#e8e8e8;}
.numpad-btn.numpad-zero{grid-column:span 1;}
.numpad-btn.numpad-del{background:#fff0f0;border-color:#ffcdd2;color:var(--color-danger);}
.numpad-btn.numpad-confirm{grid-column:span 3;background:linear-gradient(135deg,var(--pink-main),#ff6b9d);color:#fff;border-color:transparent;font-size:16px;}
.numpad-btn.numpad-confirm:hover{opacity:.9;}
.numpad-title{font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:8px;text-align:center;}
.modal-header{padding:22px 28px 18px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-size:19px;font-weight:700;color:var(--text-dark);}
.modal-close-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-light);cursor:pointer;background:#f5f5f5;border:none;transition:all 0.2s;flex-shrink:0;}
.modal-close-btn:hover{background:#eee;color:var(--text-dark);}
.modal-header-gradient{padding:24px 28px;background:linear-gradient(135deg,var(--purple-main) 0%,var(--pink-main) 100%);border-radius:var(--radius-xl) var(--radius-xl) 0 0;color:white;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.modal-header-gradient .modal-title{color:white;font-size:21px;}
.modal-header-subtitle{font-size:13px;color:rgba(255,255,255,0.8);margin-top:3px;}
.modal-close-btn-white{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,255,255,0.85);cursor:pointer;background:rgba(255,255,255,0.18);border:none;transition:all 0.2s;flex-shrink:0;}
.modal-close-btn-white:hover{background:rgba(255,255,255,0.28);color:white;}
.modal-body{padding:22px 28px;}
.modal-footer{padding:16px 28px 22px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid #f0f0f0;}
.btn-cancel{min-height:44px;padding:11px 28px;border:2px solid var(--clay-line);border-radius:var(--radius-full);color:var(--text-mid);font-size:15px;font-weight:800;cursor:pointer;background:white;transition:all 0.2s var(--clay-press);box-shadow:0 5px 0 rgba(240,214,181,0.7);}
.btn-cancel:hover{background:#fff7ef;transform:translateY(-2px);}
.btn-cancel:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(240,214,181,0.7);}
.btn-confirm{min-height:44px;padding:11px 28px;background:linear-gradient(135deg,var(--pink-main),#ff8dbb);color:white;border-radius:var(--radius-full);font-size:15px;font-weight:900;cursor:pointer;border:2px solid #fff;transition:all 0.2s var(--clay-press);box-shadow:0 6px 0 #d62972;}
.btn-confirm:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 0 #d62972,0 14px 24px rgba(255,92,159,0.26);}
.btn-confirm:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 #d62972;}
.btn-confirm:disabled{opacity:0.45;cursor:not-allowed;}
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:7px;}
.form-input{width:100%;padding:11px 15px;border:1.5px solid #e0e0e0;border-radius:var(--radius-md);font-size:15px;transition:border-color 0.2s;color:var(--text-dark);}
.form-input:focus{border-color:var(--pink-main);}
.form-textarea{width:100%;padding:10px 14px;border:1.5px solid #e0e0e0;border-radius:var(--radius-md);font-size:14px;min-height:160px;resize:vertical;line-height:1.7;color:var(--text-dark);transition:border-color 0.2s;}
.form-textarea:focus{border-color:var(--pink-main);}
.form-hint{font-size:12px;color:var(--text-light);margin-top:5px;}
.modal-tip{background:#fff8e1;border-radius:var(--radius-md);padding:11px 14px;margin-bottom:16px;font-size:13px;color:#795548;line-height:1.7;}
.sync-status-modal{z-index:1200;}
.sync-status-box{max-width:360px;padding:28px 24px;text-align:center;overflow:visible;}
.sync-status-mark{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;}
.sync-status-mark.syncing{border:4px solid #f0f0f0;border-top-color:var(--pink-main);animation:syncSpin 0.8s linear infinite;}
.sync-status-mark.success{background:var(--color-success);color:white;}
.sync-status-mark.error{background:var(--color-danger);color:white;}
.sync-status-title{font-size:18px;font-weight:800;color:var(--text-dark);margin-bottom:6px;}
.sync-status-text{font-size:13px;color:var(--text-mid);line-height:1.6;margin-bottom:16px;}
.sync-status-actions{display:flex;justify-content:center;gap:10px;}
.sync-status-close,.sync-status-retry{display:none;padding:10px 24px;}
@keyframes syncSpin{to{transform:rotate(360deg);}}
.import-preview{background:#f9f9f9;border-radius:var(--radius-md);padding:12px 14px;margin-top:10px;max-height:140px;overflow-y:auto;}
.import-preview-title{font-size:12px;font-weight:600;color:var(--text-mid);margin-bottom:8px;}
.import-preview-tag{display:inline-flex;align-items:center;background:white;border:1px solid var(--pink-border);border-radius:var(--radius-full);padding:3px 10px;font-size:12px;margin:3px;color:var(--text-dark);}
.student-management-box{max-width:680px;display:flex;flex-direction:column;overflow:hidden;}
.student-management-box .modal-header,.student-management-box .modal-footer{flex-shrink:0;}
.student-management-body{flex:1;min-height:0;overflow-y:auto;}
.student-management-subtitle{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--text-light);font-size:13px;}
.student-management-add{padding:14px;border:1.5px solid var(--pink-border);border-radius:var(--radius-lg);background:var(--pink-pale);}
.student-management-add-row{display:flex;align-items:center;gap:10px;}
.student-management-add-row .form-input{min-height:44px;background:white;}
.student-management-add-btn{flex-shrink:0;padding-inline:24px;}
.student-management-list-heading{margin:20px 0 8px;font-size:14px;font-weight:800;color:var(--text-mid);}
.student-management-list{display:flex;flex-direction:column;gap:8px;}
.student-management-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid #ececec;border-radius:var(--radius-md);background:#fff;}
.student-management-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f5f5f5;color:var(--text-light);font-size:12px;font-weight:800;}
.student-management-name{width:100%;min-width:0;min-height:44px;padding:9px 12px;border:1.5px solid var(--pink-main);border-radius:var(--radius-md);background:white;color:var(--text-dark);font:inherit;font-size:16px;outline:none;}
.student-management-name:focus{box-shadow:0 0 0 3px rgba(233,30,140,0.12);}
.student-management-name[readonly]{border-color:transparent;background:transparent;font-weight:700;}
.student-management-actions{display:flex;gap:8px;}
.student-management-action{min-width:58px;min-height:44px;padding:8px 12px;border:1.5px solid #e0e0e0;border-radius:var(--radius-full);background:#fff;color:var(--text-mid);font:inherit;font-size:14px;font-weight:800;cursor:pointer;}
.student-management-action:hover{background:#f7f7f7;}
.student-management-action.save{border-color:var(--pink-border);background:var(--pink-pale);color:var(--pink-main);}
.student-management-action.delete{border-color:#ffcdd2;color:var(--color-danger);}
.student-management-action.delete:hover{background:#ffebee;}
.student-management-empty{padding:28px 16px;border:1.5px dashed #ddd;border-radius:var(--radius-md);color:var(--text-light);font-size:14px;line-height:1.6;text-align:center;}

@media(max-width:640px){
    #studentManagementModal{align-items:flex-end;padding:0;}
    #studentManagementModal .modal-box{width:100%;max-width:none!important;max-height:calc(100dvh - env(safe-area-inset-top));border-radius:24px 24px 0 0;}
    .student-management-box .modal-header{padding:18px 16px 14px;}
    .student-management-body{padding:16px;}
    .student-management-add-row{align-items:stretch;}
    .student-management-add-btn{padding-inline:18px;}
    .student-management-row{grid-template-columns:30px minmax(0,1fr);gap:6px 8px;padding:10px 8px;}
    .student-management-actions{grid-column:2;display:grid;grid-template-columns:1fr 1fr;}
    .student-management-action{width:100%;}
    .student-management-box .modal-footer{padding:12px 16px calc(14px + env(safe-area-inset-bottom));}
    .student-management-box .modal-footer .btn-cancel{width:100%;}
}
.pet-selection-grid{display:flex;flex-direction:column;gap:4px;padding:4px 0;}
.pet-tier-section{margin-bottom:12px;}
.pet-tier-label{font-size:11px;font-weight:700;color:var(--text-mid);margin-bottom:6px;padding-left:2px;}
.pet-tier-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.pet-selection-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all 0.18s;background:#f9f9f9;}
.pet-selection-item:hover{background:var(--pink-pale);border-color:var(--pink-light);}
.pet-selection-item.selected{background:var(--pink-pale);border-color:var(--pink-main);}
.pet-tier-locked-wrapper{position:relative;border:2px solid #e74c3c;border-radius:10px;padding:16px 10px 10px;margin-bottom:12px;}
.pet-tier-locked-wrapper .pet-tier-section{margin-bottom:0;}
.pet-tier-unlock-label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#fff;color:#e74c3c;font-size:12px;font-weight:700;padding:0 8px;white-space:nowrap;}
.pet-tier-locked-wrapper .pet-selection-item{cursor:not-allowed;}
.pet-tier-locked-wrapper .pet-selection-item:hover{background:#f9f9f9;border-color:transparent;transform:none;}
.pet-tier-lock-badge{font-size:10px;color:#999;font-weight:400;margin-left:6px;}
.pet-selection-emoji{width:104px;height:104px;object-fit:contain;}
.pet-selection-name{font-size:11px;color:var(--text-mid);font-weight:600;text-align:center;}
.adopt-student-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--pink-pale);border-radius:var(--radius-md);margin-bottom:16px;border:1px solid var(--pink-border);}
.adopt-student-avatar{width:40px;height:40px;border-radius:50%;background:var(--pink-main);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex-shrink:0;}
.adopt-student-name{font-size:15px;font-weight:700;color:var(--text-dark);}
.adopt-student-hint{font-size:12px;color:var(--text-mid);margin-top:2px;}

/* ===== 积分面板系统 ===== */
.scoring-header{padding:12px 24px 10px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:14px;}
.scoring-header-pet{font-size:38px;line-height:1;flex-shrink:0;}
.scoring-header-pet-img{width:48px;height:48px;object-fit:contain;flex-shrink:0;border-radius:8px;}
.scoring-header-info{flex:1;min-width:0;}
.scoring-header-name{font-size:18px;font-weight:700;color:var(--text-dark);}
.scoring-header-level{font-size:12px;color:var(--text-mid);margin-top:2px;}
.scoring-header-points{text-align:right;flex-shrink:0;}
.scoring-points-big{font-size:28px;font-weight:900;color:var(--pink-main);line-height:1;}
.scoring-points-unit{font-size:11px;color:var(--text-light);}
.scoring-progress-wrap{padding:7px 22px 10px;border-bottom:1px solid #f0f0f0;}
.scoring-progress-bar-bg{height:6px;background:#f0f0f0;border-radius:var(--radius-full);overflow:hidden;}
.scoring-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--pink-main),#ff6b9d);border-radius:var(--radius-full);transition:width 0.4s ease;}
.scoring-progress-label{font-size:11px;color:var(--text-light);margin-top:4px;text-align:right;}
.scoring-section{margin-bottom:10px;}
.scoring-section-title{font-size:13px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.scoring-section-title-add{color:var(--color-success);}
.scoring-section-title-deduct{color:var(--color-danger);}
.scoring-section-title-custom{color:var(--text-mid);}
.scoring-rules-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;}
.scoring-rule-btn{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;min-height:50px;border-radius:var(--radius-md);border:1.5px solid;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.15s;gap:6px;text-align:left;}
/* grid 内按钮：4:3 竖向，三行布局（图标/名称/数值） */
.scoring-rules-grid .scoring-rule-btn{flex-direction:column;justify-content:space-evenly;align-items:center;gap:0;aspect-ratio:3/4;min-height:unset;padding:8px 6px;text-align:center;flex-wrap:nowrap;}
.scoring-rule-btn-add{background:#f0faf0;border-color:#c8e6c9;color:#2e7d32;}
.scoring-rule-btn-add:hover{background:#dcedc8;border-color:var(--color-success);transform:translateY(-1px);}
.scoring-rule-btn-deduct{background:#fff5f5;border-color:#ffcdd2;color:#c62828;}
.scoring-rule-btn-deduct:hover{background:#ffebee;border-color:var(--color-danger);transform:translateY(-1px);}
.scoring-rule-btn-icon{font-size:24px;line-height:1;flex-shrink:0;margin-right:0;}
.scoring-rule-btn-name{font-size:12px;line-height:1.3;min-width:0;word-break:break-all;}
.scoring-rule-btn-val{font-weight:700;font-size:12px;padding:2px 8px;border-radius:var(--radius-full);flex-shrink:0;}
.scoring-rule-btn-add .scoring-rule-btn-val{background:#c8e6c9;color:#1b5e20;}
.scoring-rule-btn-deduct .scoring-rule-btn-val{background:#ffcdd2;color:#b71c1c;}
.scoring-custom-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.scoring-custom-adjuster{display:flex;align-items:center;border:1.5px solid #e0e0e0;border-radius:var(--radius-md);overflow:hidden;}
.scoring-custom-adjuster-btn{width:36px;height:38px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;font-size:18px;font-weight:700;cursor:pointer;transition:background 0.15s;border:none;color:var(--text-dark);}
.scoring-custom-adjuster-btn:hover{background:#e0e0e0;}
.scoring-custom-amount{width:68px;height:38px;text-align:center;padding:0;border:none;border-left:1.5px solid #e0e0e0;border-right:1.5px solid #e0e0e0;font-size:17px;font-weight:700;color:var(--text-dark);background:white;outline:none;-moz-appearance:textfield;}
.scoring-custom-amount::-webkit-inner-spin-button,.scoring-custom-amount::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.scoring-custom-action-btn{padding:9px 16px;border-radius:var(--radius-full);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all 0.15s;}
.scoring-custom-add-btn{background:#e8f5e9;color:#2e7d32;border:1.5px solid #c8e6c9;}
.scoring-custom-add-btn:hover{background:#c8e6c9;}
.scoring-custom-deduct-btn{background:#ffebee;color:#c62828;border:1.5px solid #ffcdd2;}
.scoring-custom-deduct-btn:hover{background:#ffcdd2;}
.scoring-footer{padding:12px 22px 18px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0f0f0;}
.scoring-undo-btn{display:flex;align-items:center;gap:5px;padding:9px 16px;border:1.5px solid #ffe082;border-radius:var(--radius-full);color:#f57f17;background:#fff8e1;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s;}
.scoring-undo-btn:hover:not(:disabled){background:#fff3cd;}
.scoring-undo-btn:disabled{opacity:0.38;cursor:not-allowed;}
.scoring-done-btn{padding:9px 24px;background:var(--pink-main);color:white;border-radius:var(--radius-full);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;}
.scoring-done-btn:hover{opacity:0.9;}
.scoring-adopt-pet-btn{padding:9px 18px;background:linear-gradient(135deg,var(--purple-main),var(--pink-main));color:white;border-radius:var(--radius-full);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;box-shadow:0 2px 8px rgba(124,77,255,0.3);}
.scoring-adopt-pet-btn:hover{opacity:0.9;transform:translateY(-1px);}

/* 孩子个人页 */
#scoringPanelModal .modal-box {
    width: min(820px, calc(100vw - 40px));
    height: min(720px, calc(100dvh - 40px));
    max-width: 820px;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#scoringPanelModal .scoring-header,
#scoringPanelModal .scoring-progress-wrap,
#scoringPanelModal .scoring-page-tabs,
#scoringPanelModal .scoring-footer { flex: 0 0 auto; }
#scoringPageContent_scoring,
#scoringPageContent_profile { flex: 1 1 auto; min-height: 0; }
#scoringPageContent_scoring { overflow-y: auto; }
#scoringPageContent_profile {
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 20px;
}
.scoring-page-tabs {
    display: flex;
    border-bottom: 2px solid #f0f0f0;
    margin: 0 -20px;
    padding: 0 20px;
}
.profile-section-tabs {
    display: flex;
    flex: 0 0 auto;
    overflow-x: auto;
    border-bottom: 1px solid #f0f0f0;
}
.scoring-page-tab-btn {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.2s;
}
.scoring-page-tab-btn.active {
    color: var(--pink-main);
    border-bottom-color: var(--pink-main);
}
.profile-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.profile-medal-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    padding: 12px 0;
}
.profile-medal-item {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: #fff8e1;
    border: 1.5px solid #ffe082;
    border-radius: var(--radius-md);
    text-align: center;
}
.profile-medal-img { width: 36px; height: 36px; }
.profile-medal-name { font-size: 10px; color: var(--text-mid); }
.profile-empty-hint { color: var(--text-light); text-align: center; padding: 24px 0; font-size: 13px; }
.profile-pet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 0;
}
.profile-pet-item {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    background: #f9f5ff;
    border: 1.5px solid #d1b3ff;
    border-radius: var(--radius-md);
    text-align: center;
}
.profile-pet-img {
    width: min(56%, 140px);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.profile-pet-name { font-size: 11px; font-weight: 600; color: var(--text-dark); }
.profile-pet-tier { font-size: 10px; color: var(--text-light); }
@media (max-width: 640px) {
    .profile-pet-item { gap: 2px; padding: 6px; }
    .profile-pet-img { width: min(62%, 54px); }
    .profile-pet-name,
    .profile-pet-tier { line-height: 1.2; }
}

/* ===== 通知提示系统 ===== */
.toast-container{position:fixed;top:76px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{padding:11px 18px;border-radius:var(--radius-md);font-size:14px;font-weight:500;color:white;box-shadow:0 4px 16px rgba(0,0,0,0.14);animation:toastIn 0.3s ease;display:flex;align-items:center;gap:8px;min-width:200px;max-width:320px;}
.toast-icon{display:inline-grid;place-items:center;flex:0 0 auto}.toast-icon .workspace-image-icon{width:26px;height:26px}
.toast-success{background:var(--color-success);}
.toast-error{background:var(--color-danger);}
.toast-info{background:var(--color-info);}
.toast-warning{background:var(--color-warning);}

/* ===== 互动弹窗 ===== */
.interact-tabs{display:flex;gap:0;border-bottom:2px solid #f0f0f0;margin-bottom:0;}
.interact-tab-btn{flex:1;padding:14px;font-size:15px;font-weight:600;color:var(--text-light);cursor:pointer;border:none;background:none;transition:all 0.2s;border-bottom:2px solid transparent;margin-bottom:-2px;}
.interact-tab-btn.active{color:var(--pink-main);border-bottom-color:var(--pink-main);}
.interact-tab-btn:hover:not(.active){color:var(--text-mid);background:#fafafa;}
.interact-tab-content{display:none;padding:22px 28px;}
.interact-tab-content.active{display:block;}
.slot-count-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.slot-count-label{font-size:14px;font-weight:600;color:var(--text-mid);}
.slot-count-hint{font-size:12px;color:var(--text-pale);}
.slot-count-adjuster{display:flex;align-items:center;border:1.5px solid #e0e0e0;border-radius:var(--radius-md);overflow:hidden;}
.slot-count-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;font-size:17px;font-weight:700;cursor:pointer;border:none;color:var(--text-dark);transition:background 0.15s;}
.slot-count-btn:hover{background:#e0e0e0;}
.slot-count-val{width:40px;height:34px;display:flex;align-items:center;justify-content:center;text-align:center;border:none;border-left:1.5px solid #e0e0e0;border-right:1.5px solid #e0e0e0;font-size:16px;font-weight:700;color:var(--text-dark);background:white;outline:none;pointer-events:none;}
.slot-display-box{background:linear-gradient(135deg,#f5f0ff,#fff0f8);border:2px solid var(--pink-border);border-radius:var(--radius-lg);padding:0 16px;text-align:center;height:200px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-bottom:16px;transition:border-color 0.2s;}
.slot-display-box.is-rolling{border-color:var(--pink-main);}
.slot-candidate-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;animation:slotScrollIn 0.13s ease-out;}
.slot-display-box.has-result{border-color:#ffd700;background:linear-gradient(135deg,#fffde7,#fff8e1);justify-content:flex-start;padding-top:16px;overflow-y:auto;max-height:360px;}
.slot-display-pet-img{width:110px;height:110px;object-fit:contain;}
.slot-display-results-title{font-size:14px;font-weight:700;color:var(--text-mid);margin-bottom:10px;text-align:center;width:100%;}
.slot-display-result-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;}
.slot-display-result-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:calc(20% - 8px);animation:resultPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;}
.slot-result-pet-img{width:68px;height:68px;object-fit:contain;}
.slot-display-pet{font-size:62px;line-height:1;transition:filter 0.05s;}
.slot-display-name{font-size:22px;font-weight:700;color:var(--text-dark);}
.slot-display-sub{font-size:13px;color:var(--text-light);}
.slot-display-idle{font-size:48px;opacity:0.3;}
.slot-display-idle-text{font-size:15px;color:var(--text-pale);}
.slot-start-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--purple-main),var(--pink-main));color:white;border:none;border-radius:var(--radius-full);font-size:16px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 3px 12px rgba(124,77,255,0.3);}
.slot-start-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 18px rgba(124,77,255,0.4);}
.slot-start-btn:disabled{opacity:0.55;cursor:not-allowed;}
.slot-results-area{margin-top:14px;}
.slot-results-title{font-size:12px;font-weight:600;color:var(--text-light);text-align:center;margin-bottom:8px;}
.slot-results-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.slot-result-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;background:white;border:1.5px solid var(--pink-border);border-radius:var(--radius-md);min-width:76px;animation:resultPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;}
.slot-result-pet{font-size:26px;}
.slot-result-name{font-size:16px;font-weight:700;color:var(--text-dark);text-align:center;}
.slot-reroll-btn{display:block;width:100%;margin-top:10px;padding:8px;border:1.5px solid var(--pink-border);border-radius:var(--radius-full);font-size:13px;color:var(--pink-main);background:white;cursor:pointer;transition:all 0.2s;font-weight:500;}
.slot-reroll-btn:hover{background:var(--pink-pale);}

/* 倒计时 */
.countdown-display-big{font-size:96px;font-weight:900;color:var(--text-dark);text-align:center;letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1;padding:20px 0 14px;transition:color 0.3s;}
.countdown-display-big.warning{color:var(--color-danger);animation:timerPulse 0.9s ease-in-out infinite;}
.countdown-display-big.finished{color:var(--color-danger);}
.timer-set-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 24px;}
.timer-unit-group{display:flex;align-items:center;gap:5px;}
.timer-unit-adjuster{display:flex;align-items:center;border:1.5px solid #e0e0e0;border-radius:var(--radius-md);overflow:hidden;}
.timer-adj-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;font-size:18px;font-weight:700;cursor:pointer;border:none;color:var(--text-dark);transition:background 0.15s;}
.timer-adj-btn:hover{background:#e0e0e0;}
.timer-unit-val{width:50px;height:38px;display:flex;align-items:center;justify-content:center;text-align:center;border:none;border-left:1.5px solid #e0e0e0;border-right:1.5px solid #e0e0e0;font-size:18px;font-weight:700;color:var(--text-dark);background:white;outline:none;pointer-events:none;}
.timer-unit-label{font-size:15px;color:var(--text-mid);font-weight:500;}
.timer-colon{font-size:26px;font-weight:700;color:var(--text-mid);margin:0 2px;}
.timer-controls{display:flex;gap:12px;justify-content:center;}
.timer-ctrl-btn{flex:1;padding:13px 10px;border-radius:var(--radius-full);font-size:16px;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;max-width:140px;}
.timer-btn-start{background:var(--color-success);color:white;}
.timer-btn-start:hover{opacity:0.88;}
.timer-btn-pause{background:#fff8e1;color:#f57f17;border:1.5px solid #ffe082;}
.timer-btn-pause:hover{background:#fff3cd;}
.timer-btn-reset{background:#f5f5f5;color:var(--text-mid);border:1.5px solid #e0e0e0;}
.timer-btn-reset:hover{background:#eee;}
.timer-finished-tip{text-align:center;font-size:13px;color:var(--color-danger);font-weight:600;margin-top:8px;animation:timerPulse 0.9s ease-in-out infinite;}

/* ===== 积分历史列表 ===== */
.history-list{display:flex;flex-direction:column;gap:6px;max-height:480px;overflow-y:auto;}
.history-empty{text-align:center;padding:32px 0;color:var(--text-light);font-size:14px;}
.history-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);background:#fafafa;border:1px solid #f0f0f0;}
.history-item-delta{font-size:16px;font-weight:800;min-width:44px;text-align:right;flex-shrink:0;}
.history-item-delta.positive{color:var(--color-success);}
.history-item-delta.negative{color:var(--color-danger);}
.history-item-delta.zero{color:var(--text-light);}
.history-item-info{flex:1;min-width:0;}
.history-item-reason{font-size:13px;font-weight:600;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-item-shield{font-size:12px;color:var(--color-info);margin-top:1px;}
.history-item-time{font-size:11px;color:var(--text-light);flex-shrink:0;}

/* ===== 老师设置 ===== */
.settings-tabs{display:flex;gap:0;border-bottom:2px solid #f0f0f0;margin-bottom:0;}
.settings-tab-btn{flex:1;padding:11px;font-size:14px;font-weight:600;color:var(--text-light);cursor:pointer;border:none;background:none;transition:all 0.2s;border-bottom:2px solid transparent;margin-bottom:-2px;}
.settings-tab-btn.active-add{color:var(--color-success);border-bottom-color:var(--color-success);}
.settings-tab-btn.active-deduct{color:var(--color-danger);border-bottom-color:var(--color-danger);}
.settings-tab-btn.active-level{color:#ff8f00;border-bottom-color:#ff8f00;}
.settings-tab-btn:hover:not(.active-add):not(.active-deduct):not(.active-level){color:var(--text-mid);background:#fafafa;}
.settings-tab-content{display:none;padding:14px 22px;}
.settings-tab-content.active{display:block;}
.settings-rule-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f5f5f5;}
.settings-rule-row:last-of-type{border-bottom:none;}
.settings-icon-input{width:44px;text-align:center;font-size:18px;padding:6px 4px;border-radius:var(--radius-sm);}
.settings-name-input{flex:1;padding:7px 10px;border-radius:var(--radius-sm);}
.settings-points-wrap{display:flex;align-items:center;gap:3px;flex-shrink:0;}
.settings-points-prefix{font-size:13px;font-weight:700;color:var(--color-success);}
.settings-points-prefix.deduct-prefix{color:var(--color-danger);}
.settings-points-input{width:46px;text-align:center;padding:7px 4px;border-radius:var(--radius-sm);}
.settings-delete-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#fff5f5;border:1px solid #ffcdd2;border-radius:var(--radius-sm);cursor:pointer;color:var(--color-danger);font-size:15px;transition:all 0.15s;flex-shrink:0;}
.settings-delete-btn:hover{background:#ffebee;}
.settings-add-rule-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;margin-top:10px;border:1.5px dashed #e0e0e0;border-radius:var(--radius-md);font-size:13px;font-weight:500;cursor:pointer;background:none;color:var(--text-light);transition:all 0.2s;}
.settings-add-rule-btn:hover{border-color:var(--pink-main);color:var(--pink-main);background:var(--pink-pale);}
.settings-hint{font-size:12px;color:var(--text-light);padding:10px 0 2px;}

/* 老师设置：内容独立滚动，底部操作始终可见 */
#teacherSettingsModal .modal-box{display:flex;flex-direction:column;overflow:hidden;}
#teacherSettingsModal .modal-header,#teacherSettingsModal .settings-tabs,#teacherSettingsModal .modal-footer{flex-shrink:0;}
#teacherSettingsModal .settings-tab-content.active{flex:1;min-height:0;overflow-y:auto;}
#teacherSettingsModal .modal-footer{flex-shrink:0;background:white;}

/* ===== 等级配置Tab ===== */
.level-config-table{width:100%;}
.level-config-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f5f5f5;}
.level-config-row:last-child{border-bottom:none;}
.lv-badge{width:42px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;flex-shrink:0;}
.lv-stage-name{font-size:12px;color:var(--text-light);width:44px;flex-shrink:0;}
.lv-name{font-size:13px;font-weight:600;color:var(--text-dark);width:46px;flex-shrink:0;}
.lv-emoji{font-size:16px;width:24px;text-align:center;flex-shrink:0;}
.lv-badge-img{width:28px;height:28px;object-fit:contain;flex-shrink:0;}
.lv-exp-label{font-size:12px;color:var(--text-light);white-space:nowrap;}
.lv-exp-input{width:66px;text-align:center;padding:5px 6px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;}
.lv-max-badge{font-size:11px;background:#fff8e1;color:#f57f17;border:1px solid #ffe082;padding:4px 10px;border-radius:var(--radius-full);font-weight:700;}
.settings-level-reset-btn{display:flex;align-items:center;gap:5px;width:100%;padding:8px;margin-top:10px;border:1.5px dashed #e0e0e0;border-radius:var(--radius-md);font-size:12px;font-weight:500;cursor:pointer;background:none;color:var(--text-light);transition:all 0.2s;justify-content:center;}
.settings-level-reset-btn:hover{border-color:var(--color-warning);color:var(--color-warning);background:#fff8e1;}
.settings-post-max-row{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:#fdf5f9;border-radius:var(--radius-md);border:1px solid var(--pink-border);}
.settings-post-max-label{font-size:13px;color:var(--text-mid);white-space:nowrap;}
.settings-post-max-input{width:64px;text-align:center;padding:5px 8px;}
.hunger-settings-card{margin-top:16px;padding:14px;background:#fffaf2;border:1.5px solid #ffd49a;border-radius:var(--radius-lg);}
.hunger-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--text-dark);}
.hunger-settings-status{display:inline-flex;margin-left:8px;padding:2px 7px;border-radius:var(--radius-full);font-size:11px;color:#2e7d32;background:#e8f5e9;}
.hunger-settings-status.paused{color:#9a5b00;background:#fff3cd;}
.hunger-switch{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;cursor:pointer;min-height:44px;}
.hunger-switch input{width:18px;height:18px;accent-color:#f59e0b;}
.hunger-settings-help,.hunger-calendar-status{font-size:12px;line-height:1.55;color:var(--text-light);margin:8px 0 0;}
.hunger-settings-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.hunger-settings-fields label{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:8px;background:white;border:1px solid #ffe0b2;border-radius:var(--radius-md);font-size:12px;color:var(--text-mid);}
.hunger-settings-fields input{width:56px;text-align:center;padding:6px;}
.hunger-settings-actions{display:flex;gap:8px;margin-top:10px;}
.hunger-settings-actions button{flex:1;min-height:44px;}
.hunger-recovery-entry:not(:disabled){color:#b42318;border-color:#f5a3a3;background:#fff6f6;}
.scoring-hunger-status{margin-top:7px;padding:7px 10px;border:1px solid #ffc66d;border-radius:var(--radius-md);background:#fff4d8;color:#9a4f00;font-size:12px;font-weight:700;text-align:center;}
.hunger-death-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #f4e4d2;}
.hunger-death-item:last-child{border-bottom:0;}
.hunger-death-item span{font-size:12px;color:var(--text-light);}
.hunger-password-field{width:100%;margin-top:12px;min-height:44px;}
.hunger-recovery-error{min-height:20px;margin-top:6px;color:var(--color-danger);font-size:12px;}
@media (max-width:600px){
    .hunger-settings-fields{grid-template-columns:1fr;}
    .hunger-settings-actions{flex-direction:column;}
}

/* ===== 档次等级配置 ===== */
.tier-config-row{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:8px;background:#fafafa;border-radius:var(--radius-md);border:1px solid #f0f0f0;}
.tier-icon{font-size:20px;flex-shrink:0;}
.tier-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.tier-label{font-size:13px;font-weight:600;color:var(--text-dark);}
.tier-pets{font-size:11px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tier-pts-label{font-size:12px;color:var(--text-light);white-space:nowrap;}
.tier-pts-input{width:60px;text-align:center;padding:5px 6px;font-size:13px;font-weight:700;flex-shrink:0;}

/* ===== 奖章图标 ===== */
.lb-medal-icon{width:18px;height:18px;object-fit:contain;vertical-align:middle;}
.modal-medal-icon{width:24px;height:24px;object-fit:contain;vertical-align:middle;}

/* ===== 满级弹窗新元素 ===== */
.maxlevel-pet-wrap{display:flex;justify-content:center;margin-bottom:10px;}
.maxlevel-pet-img{width:130px;height:130px;object-fit:contain;animation:levelupPop 0.5s cubic-bezier(0.34,1.56,0.64,1),levelupPetFloat 2s ease-in-out 0.5s infinite;}
.maxlevel-badge-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;}
.maxlevel-badge-icon{width:36px;height:36px;object-fit:contain;}
.maxlevel-level-text{font-size:16px;font-weight:700;color:#b8860b;}

/* ===== 图标候选面板 ===== */
.icon-picker-panel{position:absolute;z-index:9999;background:white;border:1.5px solid #e0e0e0;border-radius:var(--radius-lg);box-shadow:0 8px 28px rgba(0,0,0,0.14);padding:12px 14px;width:280px;max-height:360px;overflow-y:auto;}
.icon-picker-cat-label{font-size:11px;font-weight:700;color:var(--text-light);margin:8px 0 4px;letter-spacing:0.5px;}
.icon-picker-cat-label:first-child{margin-top:0;}
.icon-picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:4px;}
.icon-picker-item{font-size:22px;text-align:center;padding:5px 2px;border-radius:var(--radius-sm);cursor:pointer;transition:background 0.12s;line-height:1.3;}
.icon-picker-item:hover{background:var(--pink-pale);}

/* ===== 口算PK嵌入覆盖层 ===== */
.mathpk-overlay{position:fixed;inset:0;background:#1a1a2e;z-index:9999;display:none;flex-direction:column;}
.mathpk-overlay.show{display:flex;}
.mathpk-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 22px;background:linear-gradient(135deg,#fff8df 0%,#fff1d5 54%,#ffe9ef 100%);border-bottom:4px solid #f0cc85;box-shadow:0 8px 0 rgba(240,204,133,0.72),0 16px 34px rgba(50,35,58,0.16);flex-shrink:0;min-height:76px;}
.mathpk-topbar-info{display:flex;align-items:center;gap:14px;min-width:0;}
.mathpk-topbar-logo{color:var(--clay-ink);font-size:18px;font-weight:900;white-space:nowrap;}
.mathpk-topbar-class{font-size:14px;color:var(--clay-ink);background:#fffdf8;border:3px solid #f0cc85;padding:7px 14px;border-radius:var(--radius-full);box-shadow:0 5px 0 rgba(240,204,133,0.72);white-space:nowrap;}
.mathpk-topbar-hint{font-size:13px;color:#6f6178;font-weight:800;white-space:nowrap;}
.mathpk-grade-picker,.mathpk-back-btn,.mathpk-home-btn{min-height:54px;display:inline-flex;align-items:center;justify-content:center;border:5px solid #fff;border-radius:var(--radius-full);background:var(--clay-ink);color:#fff8df;box-shadow:0 8px 0 #d87400,0 16px 26px rgba(50,35,58,0.18);font-family:inherit;font-size:18px;font-weight:900;line-height:1;text-decoration:none;text-shadow:0 2px 0 rgba(0,0,0,0.26);transition:transform 0.16s var(--clay-press),box-shadow 0.16s var(--clay-press),background 0.16s;white-space:nowrap;}
.mathpk-grade-picker{gap:10px;padding:0 14px 0 20px;}
.mathpk-grade-select{min-height:38px;border:0;border-radius:var(--radius-full);background:#fff8df;color:var(--clay-ink);font-family:inherit;font-size:16px;font-weight:900;cursor:pointer;outline:none;padding:4px 30px 4px 12px;}
.mathpk-grade-select option{background:#fff8df;color:var(--clay-ink);}
.mathpk-topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.mathpk-back-btn,.mathpk-home-btn{gap:8px;padding:0 20px;cursor:pointer;}
.mathpk-back-label-active{display:none;}
.mathpk-overlay.mathpk-game-active .mathpk-topbar-info,
.mathpk-overlay.mathpk-game-active .mathpk-home-btn{display:none;}
.mathpk-overlay.mathpk-game-active .mathpk-topbar{display:none;}
.mathpk-overlay.mathpk-game-active .mathpk-iframe{height:100%;flex:1 1 100%;}
.mathpk-overlay.mathpk-game-active .mathpk-topbar{justify-content:flex-end;}
.mathpk-overlay.mathpk-game-active .mathpk-back-label-default{display:none;}
.mathpk-overlay.mathpk-game-active .mathpk-back-label-active{display:inline;}
.mathpk-back-btn .ui-svg-icon,.mathpk-home-btn .ui-svg-icon{width:20px;height:20px;}
.mathpk-grade-picker:hover,.mathpk-back-btn:hover,.mathpk-home-btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 #d87400,0 18px 30px rgba(50,35,58,0.2);}
.mathpk-grade-picker:active,.mathpk-back-btn:active,.mathpk-home-btn:active{transform:translateY(3px);box-shadow:0 4px 0 #d87400,0 10px 20px rgba(50,35,58,0.16);}
.mathpk-iframe{flex:1;width:100%;border:none;display:block;}

/* ===== 领养宠物弹窗：footer 固定在底部 ===== */
#adoptPetModal .modal-box{display:flex;flex-direction:column;overflow:hidden;}
#adoptPetModal .modal-body{flex:1;overflow-y:auto;}
#adoptPetModal .modal-footer{flex-shrink:0;}

/* ===== 互动游戏入口 ===== */
.interactive-games-modal-box{max-width:720px;}
.interactive-games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px;}
.interactive-game-card{position:relative;min-height:0;aspect-ratio:16/9;overflow:hidden;border:1px solid #d7e0eb;border-radius:14px;background:#fff;box-shadow:0 5px 15px rgba(38,44,58,0.1);cursor:pointer;color:#fff;font:inherit;text-align:left;transition:transform .18s ease,box-shadow .18s ease;}
.interactive-game-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(38,44,58,0.18);}
.interactive-game-card:focus-visible{outline:3px solid var(--pink-main);outline-offset:3px;}
.interactive-game-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.interactive-game-card>span:last-child{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;color:#fff;font-size:15px;font-weight:900;line-height:1.15;background:linear-gradient(180deg,rgba(15,23,42,0) 48%,rgba(15,23,42,0.78));text-shadow:0 1px 8px rgba(0,0,0,0.35);}

@media(max-width:640px){
    .mathpk-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:max(6px,env(safe-area-inset-top)) 6px 6px;min-height:56px;overflow:hidden;}
    .mathpk-topbar-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px;min-width:0;}
    .mathpk-topbar-logo{max-width:96px;overflow:hidden;text-overflow:ellipsis;font-size:14px;}
    .mathpk-topbar-class,.mathpk-topbar-hint{display:none;}
    .mathpk-grade-picker{gap:0;width:100%;max-width:148px;min-width:0;min-height:44px;border-width:3px;padding:0 3px;box-shadow:0 5px 0 #d87400;}
    .mathpk-grade-picker>span{display:none;}
    .mathpk-grade-select{width:100%;min-width:0;min-height:34px;padding:3px 22px 3px 8px;font-size:12px;}
    .mathpk-topbar-actions{gap:4px;}
    .mathpk-back-btn,.mathpk-home-btn{width:44px;height:44px;min-height:44px;border-width:3px;padding:0;font-size:14px;box-shadow:0 5px 0 #d87400;}
    .mathpk-back-btn>span:not(.ui-svg-icon),.mathpk-home-btn>span:not(.ui-svg-icon){display:none;}
    .mathpk-back-btn .ui-svg-icon,.mathpk-home-btn .ui-svg-icon{width:18px;height:18px;}
    .modal-overlay{align-items:flex-start;padding:16px 8px;}
    .modal-box{max-width:calc(100vw - 16px) !important;border-radius:16px;}
    #scoringPanelModal{align-items:flex-end;padding:0;}
    #scoringPanelModal .modal-box{width:100%;max-width:none!important;max-height:calc(100dvh - env(safe-area-inset-top));border-radius:24px 24px 0 0;display:flex;flex-direction:column;overflow:hidden;}
    #scoringPanelModal .scoring-header{padding:14px 16px 10px;flex-shrink:0;}
    #scoringPanelModal .scoring-progress-wrap{padding:7px 16px 10px;flex-shrink:0;}
    #scoringPanelModal .scoring-page-tabs{flex-shrink:0;}
    #scoringPageContent_scoring{overflow-y:auto;padding:14px 14px 8px!important;}
    .scoring-rules-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
    .scoring-rules-grid .scoring-rule-btn{aspect-ratio:auto;min-height:68px;display:grid;grid-template-columns:28px 1fr auto;text-align:left;padding:10px 12px;}
    .scoring-rule-btn-icon{font-size:22px;}
    .scoring-rule-btn-name{font-size:14px;word-break:normal;}
    .scoring-custom-row{display:grid;grid-template-columns:1fr 1fr;}
    .scoring-custom-adjuster{grid-column:1/-1;min-height:46px;}
    .scoring-custom-adjuster-btn{width:48px;height:46px;}
    .scoring-custom-amount{width:auto;flex:1;height:46px;font-size:18px;}
    .scoring-custom-action-btn{min-height:48px;}
    .scoring-footer{position:sticky;bottom:0;z-index:3;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;background:#fff;overflow-x:auto;justify-content:flex-start;}
    .scoring-footer button{min-height:44px;white-space:nowrap;}
    #interactiveGamesModal{align-items:flex-end;padding:0;}
    #interactiveGamesModal .modal-box{width:100%;max-width:none!important;max-height:84dvh;border-radius:24px 24px 0 0;}
    .interactive-games-grid{padding:16px 16px calc(20px + env(safe-area-inset-bottom));gap:10px;}
}

@media(orientation:landscape) and (max-height:600px){
    .mathpk-topbar{position:absolute;z-index:2;top:max(4px,env(safe-area-inset-top));left:max(4px,env(safe-area-inset-left));right:max(4px,env(safe-area-inset-right));display:flex;min-height:0;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible;pointer-events:none;}
    .mathpk-topbar-info,
    .mathpk-topbar-actions{pointer-events:auto;transform:scale(.68);}
    .mathpk-topbar-info{transform-origin:top left;}
    .mathpk-topbar-actions{transform-origin:top right;}
    .mathpk-overlay.mathpk-game-active .mathpk-topbar-info,
    .mathpk-overlay.mathpk-game-active .mathpk-home-btn{display:none;}
    .mathpk-overlay.mathpk-game-active .mathpk-topbar-actions{transform:scale(.62);}
    .mathpk-overlay.mathpk-game-active .mathpk-back-btn .mathpk-back-label-active{display:inline;}
    .mathpk-iframe{position:absolute;inset:0;height:100%;}
}

/* ===== 声音模式（静音/朗读） ===== */
.noise-mode-row{display:flex;gap:8px;margin-bottom:8px;}
.noise-mode-btn{flex:1;padding:7px 0;border:1.5px solid #e0e0e0;border-radius:var(--radius-md);background:#f5f5f5;font-size:13px;font-weight:600;color:var(--text-mid);cursor:pointer;transition:all 0.15s;}
.noise-mode-btn.active{border-color:var(--pink-main);background:var(--pink-light, #fff0f5);color:var(--pink-main);}
.noise-mode-hint{font-size:12px;color:var(--text-light);text-align:center;margin-bottom:12px;min-height:16px;}
.noise-level-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.noise-section-label{font-size:13px;font-weight:600;color:var(--text-mid);}
.noise-level-num{font-size:22px;font-weight:900;color:var(--text-dark);min-width:40px;text-align:right;}
.noise-bar-wrap{margin-bottom:16px;}
.noise-bar-bg{position:relative;height:28px;background:#e8e8e8;border-radius:var(--radius-full);overflow:visible;}
.noise-bar-fill{height:100%;border-radius:var(--radius-full);background:var(--color-success);transition:width 0.06s linear,background 0.2s;}
.noise-bar-fill.above{background:var(--color-danger);}
.noise-bar-fill.above-reading{background:var(--color-success);}
.noise-threshold-line{position:absolute;top:-5px;bottom:-5px;width:3px;background:var(--pink-main);border-radius:2px;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 4px rgba(233,30,140,0.5);}
.noise-acc-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.noise-acc-val{font-size:13px;font-weight:600;color:var(--text-mid);}
.noise-acc-bar-bg{height:12px;background:#e8e8e8;border-radius:var(--radius-full);overflow:hidden;margin-bottom:20px;}
.noise-acc-bar-fill{height:100%;border-radius:var(--radius-full);background:var(--color-warning);transition:width 0.1s linear;}
.noise-acc-bar-fill.reading{background:var(--color-success);}
.noise-settings{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.noise-setting-row{display:flex;align-items:center;gap:10px;}
.noise-setting-label{font-size:13px;font-weight:600;color:var(--text-mid);width:60px;flex-shrink:0;}
.noise-slider{flex:1;height:4px;accent-color:var(--pink-main);cursor:pointer;}
.noise-setting-val{font-size:15px;font-weight:700;color:var(--text-dark);min-width:28px;text-align:right;}
.noise-setting-unit{font-size:13px;color:var(--text-mid);}
.noise-status-row{text-align:center;margin-top:10px;min-height:20px;}
.noise-status-text{font-size:13px;font-weight:600;color:var(--color-danger);}
.reading-status-text{font-size:13px;font-weight:600;color:var(--color-success);}
#noiseStartBtn.is-stopping{background:linear-gradient(135deg,#e53935,#ef5350);}
#readingStartBtn.is-stopping{background:linear-gradient(135deg,#2e7d32,#43a047);}
.reading-duration-adj{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.reading-dur-display{font-size:15px;font-weight:700;color:var(--text-dark);min-width:44px;text-align:center;}
.reading-dur-btn{height:28px;padding:0 8px;font-size:12px;font-weight:600;background:#f5f5f5;border:1.5px solid #e0e0e0;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-dark);white-space:nowrap;}
.reading-dur-btn:hover{background:#e0e0e0;}

/* ===== 导入积分弹窗 ===== */
.import-scores-file-btn{padding:9px 18px;border:1.5px dashed var(--pink-main);border-radius:var(--radius-full);color:var(--pink-main);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:all 0.2s;background:var(--pink-pale);}
.import-scores-file-btn:hover{background:var(--pink-light);}
#importScoresTable th,#importScoresTable td{padding:6px 10px;text-align:left;border-bottom:1px solid #f0f0f0;font-size:13px;}
#importScoresTable tr:last-child td{border-bottom:none;}
#importScoresTable td:nth-child(2),#importScoresTable td:nth-child(3){color:var(--pink-main);font-weight:600;}
.group-maxlevel-adopt-banner{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fff8e1,#fff3e0);border:1.5px solid #ffd54f;border-radius:10px;padding:10px 14px;margin:8px 16px 0;font-size:14px;font-weight:600;color:#e65100;gap:10px;}
.group-maxlevel-adopt-banner button{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;border:none;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity 0.15s;}
.group-maxlevel-adopt-banner button:hover{opacity:0.85;}
/* ===== 左侧导航 + 标签页布局（桌面横屏优先） ===== */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.app-startup-shell {
  min-height: 240px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--text-mid, #6f6570);
  text-align: center;
}
.app-startup-shell strong { color: var(--text-dark, #33273a); font-size: 18px; }
.app-startup-shell small { display: block; margin-top: 4px; font-size: 14px; }
.app-startup-mark {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(230, 50, 120, .18);
  border-top-color: var(--pink-main, #e63278);
  border-radius: 50%;
  animation: app-startup-spin .8s linear infinite;
}
@keyframes app-startup-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .app-startup-mark { animation: none; } }

/* 左侧导航 */
.side-nav {
  flex: 0 0 196px;
  display: flex;
  flex-direction: column;
  background: var(--bg-nav, #ffffff);
  border-right: 1px solid var(--pink-border, var(--line, #eceae3));
  padding: 14px 10px 12px;
  gap: 6px;
}
.sn-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px 12px;
  border-bottom: 1px solid var(--pink-border, #eee);
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--text-dark, #333);
}
.sn-brand-name {
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sn-brand-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light, #999);
  letter-spacing: .5px;
}
.sn-list { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sn-item {
  display: flex; align-items: center; gap: 10px;
  border: none; background: none; cursor: pointer;
  padding: 11px 14px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--text-mid, #666);
  text-align: left; width: 100%;
  transition: background .15s, color .15s;
}
.sn-item .sn-icon { font-size: 18px; }
.sn-item:hover { background: var(--pink-pale, #f6f6f6); }
.sn-item.active { background: var(--pink-main, #e91e8c); color: #fff; }
.sn-item .sn-badge {
  margin-left: auto; background: #ff7043; color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 1px 7px;
}
.sn-footer {
  border-top: 1px solid var(--pink-border, #eee);
  padding-top: 10px; display: flex; flex-direction: column; gap: 8px;
}
.sn-role-btn {
  border: 1.5px solid var(--pink-border, #ddd); background: var(--bg-card, #fff);
  border-radius: 12px; padding: 9px 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text-dark, #333);
}
.sn-role-btn:hover { border-color: var(--pink-main, #e91e8c); color: var(--pink-main, #e91e8c); }

/* 右侧内容区 */
.app-main {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-page, #fafafa);
}
#viewRoot { max-width: 1080px; margin: 0 auto; padding: 18px 24px 40px; }

/* 视图通用 */
.v-empty { text-align: center; color: var(--text-light, #aaa); padding: 48px 0; font-size: 14px; }
.v-card {
  background: var(--bg-card, #fff); border: 1px solid var(--pink-border, #eee);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.v-card-title {
  font-size: 15px; font-weight: 800; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.v-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.v-tab-btn {
  border: 1.5px solid var(--pink-border, #eee); background: var(--bg-card, #fff);
  border-radius: 999px; padding: 8px 18px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text-mid, #666);
}
.v-tab-btn.active { background: var(--pink-main, #e91e8c); border-color: var(--pink-main, #e91e8c); color: #fff; }
.v-link { border: none; background: none; color: var(--pink-main, #e91e8c); font-size: 13px; font-weight: 600; cursor: pointer; }

/* 孩子切换条 */
.child-switch-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.child-switch-chip {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--pink-border, #eee); background: var(--bg-card, #fff);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-mid, #666);
}
.child-switch-chip.active { background: var(--pink-main, #e91e8c); border-color: var(--pink-main, #e91e8c); color: #fff; }
.child-switch-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; }

/* 表单 */
.v-input {
  padding: 9px 12px; border: 1.5px solid var(--pink-border, #eee); border-radius: 10px;
  font-size: 13px; outline: none; background: #fff; color: var(--text-dark, #333);
}
.v-input:focus { border-color: var(--pink-main, #e91e8c); }
.v-input.num { width: 84px; }
.v-select {
  padding: 9px 10px; border: 1.5px solid var(--pink-border, #eee); border-radius: 10px;
  font-size: 13px; background: #fff; color: var(--text-dark, #333);
}
.v-btn {
  border: none; border-radius: 10px; padding: 9px 16px; cursor: pointer;
  font-size: 13px; font-weight: 700; background: var(--pink-main, #e91e8c); color: #fff;
}
.v-btn.ghost { background: #fff; color: var(--text-mid, #666); border: 1.5px solid var(--pink-border, #eee); }
.v-btn.danger { background: var(--color-danger, #d9534f); }
.v-btn.small { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.v-btn:disabled { opacity: .45; cursor: not-allowed; }

/* 行 */
.v-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--pink-pale, #faf6f6); margin-bottom: 6px;
}
.v-row .v-title { flex: 1; font-size: 14px; font-weight: 600; }
.v-row .v-sub { flex: 1; font-size: 12px; color: var(--text-light, #999); }
.v-row.confirmed { background: #e8f5e9; }
.v-row.done { background: #fff8e1; }
.v-pts { font-size: 14px; font-weight: 800; color: var(--pink-main, #e91e8c); flex-shrink: 0; }

/* 孩子端任务：桌面使用任务、奖励、状态、操作四列，避免宽屏两端信息过度拉开 */
.v-row.task-list-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(130px, .42fr) minmax(160px, .55fr) auto;
  gap: 20px;
  min-height: 76px;
  padding: 12px 18px;
}
.task-list-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.task-list-icon { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.task-list-main .v-title { min-width: 0; }
.task-list-reward {
  color: #fb8c00;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.task-list-status {
  color: var(--text-light, #999);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.task-list-status.done { color: #d97706; }
.task-list-status.confirmed { color: #2f855a; }
.task-list-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 88px;
}
.task-list-action-note {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.task-list-action-note.done { color: #b45309; background: #ffedd5; }
.task-list-action-note.confirmed { color: #2f855a; background: #dcfce7; }

@media (max-width: 720px) {
  .v-row.task-list-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main action"
      "reward status";
    gap: 6px 12px;
    min-height: 0;
    padding: 12px 14px;
  }
  .task-list-main { grid-area: main; }
  .task-list-reward { grid-area: reward; font-size: 13px; }
  .task-list-status { grid-area: status; justify-self: end; align-self: center; }
  .task-list-action { grid-area: action; min-width: 0; }
}

/* BOSS 横幅 */
.v-boss-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, #2b2450, #4a2e6e); color: #fff;
  box-shadow: 0 8px 24px rgba(60,40,100,.22);
}
.v-boss-banner img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: rgba(255,255,255,.12); }
.v-boss-banner .b-info { flex: 1; }
.v-boss-banner .b-name { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.v-boss-banner .b-sub { font-size: 12px; opacity: .85; margin-bottom: 8px; }
.hp-bg { height: 10px; border-radius: 999px; background: rgba(0,0,0,.1); overflow: hidden; }
.hp-bg.on-dark { background: rgba(255,255,255,.2); }
.hp-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-main, #e91e8c), var(--purple-main, #7c4dff));
  transition: width .5s ease;
}
.hp-boss { background: linear-gradient(90deg, #ff6b6b, #ff3d3d); }

/* BOSS 卡（孩子端）：9:16 竖版，上图下文 */
.v-boss-page {
  display: grid;
  grid-template-columns: 330px 1fr;       /* 1.5x 等比放大（220 → 330） */
  gap: 24px;
  align-items: stretch;
}
.v-boss-card-col,
.v-boss-log-col {
  min-width: 0;
  display: flex;
  align-items: stretch;                   /* 让 col 内子元素高度一致 */
}
.v-boss-card-col { flex: 0 0 330px; }
.v-boss-log-col  { flex: 1 1 auto; }
.v-boss-card-col > .v-boss-card { width: 100%; }
.v-boss-log-col > .v-card {
  flex: 1 1 auto;
  width: 100%;
  margin-bottom: 0;                       /* 覆盖 .v-card 默认 margin，避免被挤掉 14px */
  display: flex;
  flex-direction: column;
}
.v-boss-log-col > .v-card .dmg-log { flex: 1 1 auto; min-height: 0; }
.v-boss-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 24px;                   /* 1.5 倍 → 圆角同步放大 */
  overflow: hidden;
  background: #fafafa;                   /* 淡白单色 */
  color: #3a3a3a;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.v-boss-card-img {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 21px 21px 6px;
  background: radial-gradient(ellipse at top, rgba(255,255,255,.18), transparent 70%);
}
.v-boss-card-img img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 27px rgba(0,0,0,.35));
  animation: fbBossBounce 2s ease-in-out infinite;
}
@keyframes fbBossBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.v-boss-card-body {
  flex: 0 0 auto;
  padding: 15px 21px 21px;
  background: linear-gradient(to top, rgba(0,0,0,.04), transparent);
}
.v-boss-card-name {
  font-size: 22px;                       /* ~1.5x 16 */
  font-weight: 800;
  letter-spacing: .75px;
}
.v-boss-card-sub {
  font-size: 13px;                       /* ~1.5x 11 */
  opacity: .7;
  margin: 3px 0 12px;
}
.v-boss-card .hp-bg { height: 13px; background: rgba(0,0,0,.12); }     /* ~1.5x 9 */
.v-boss-card-hp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  font-size: 13px;                       /* ~1.5x 11 */
}
.v-boss-card-hplabel { opacity: .8; }
.v-boss-card-hpval   { font-weight: 700; font-size: 16px; }
@media (max-width: 760px) {
  .v-boss-page { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .v-boss-card { width: 100%; }
}

/* ===== 任务页 PK 竞技场：宠物 1:1 + VS + BOSS 1:1 ===== */
.v-vs-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(64px, 6vw, 90px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(16px, 2vw, 32px);
  margin-bottom: 14px;
}

/* 孩子端今日任务进度条 */
.task-progress {
  background: var(--bg-card, #fff);
  border: 1px solid var(--pink-border, #eee);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.task-progress-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--text-dark, #333);
  margin-bottom: 8px;
}
.task-progress-num { color: var(--pink-main, #e91e8c); }
.task-progress-bar {
  height: 10px; border-radius: 999px;
  background: rgba(0,0,0,.07); overflow: hidden;
}
.task-progress-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #ec407a, #ab47bc);
  transition: width .4s ease;
}
.task-progress.all-done .task-progress-fill {
  background: linear-gradient(90deg, #ffc107, #ff9800);
}
.task-progress.all-done .task-progress-num {
  color: #b8860b;
  animation: taskDonePulse 1s ease-in-out 2;
}
@keyframes taskDonePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.v-vs-side { min-width: 0; display: flex; }
.v-vs-side > * { width: 100%; min-width: 0; }
.v-vs-badge {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.v-vs-text {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(48px, 4vw, 64px);
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #ff5c5c 0%, #ff8a3d 50%, #ffd54f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 12px rgba(255,90,60,.25);
  transform: skewX(-8deg);
  user-select: none;
}
.v-pet-square-card,
.v-boss-square-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #f9f5ff 0%, #fce4ec 100%);
  border: 1.5px solid #ecd9ff;
  box-shadow: 0 4px 12px rgba(124,77,255,.08);
}
.v-boss-square-card {
  background: linear-gradient(160deg, #ffb6c1 0%, #ff8fab 100%);  /* 浅粉渐变 */
  border-color: #ff7a9e;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,105,150,.18);
}
.v-pet-square-card img,
.v-boss-square-card img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  padding: 14px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
  animation: petFloat 3.4s ease-in-out infinite;
  will-change: transform;
}
.v-boss-square-card img {
  animation-duration: 4s;          /* BOSS 与宠物节奏错开 */
  animation-delay: -0.8s;
}
.v-pet-square-card.has-egg img { object-fit: cover; padding: 28%; }
.v-pet-square-info,
.v-boss-square-info {
  flex: 0 0 auto;
  min-height: 92px;                       /* 统一高度，让左右卡片底部分隔线对齐 */
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;                    /* 水平居中 */
  justify-content: center;                /* 垂直居中 */
  background: rgba(255,255,255,.85);
  text-align: center;
  backdrop-filter: blur(2px);
}
.v-boss-square-info {
  background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,.10));
  color: #fff;
}
.v-pet-square-name,
.v-boss-square-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark, #333);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v-boss-square-name { color: #fff; }
.v-boss-square-stage {
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
  margin-left: 4px;
}
.v-pet-square-lv {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--purple-main, #7c4dff);
}
.v-boss-square-info .hp-bg {
  width: 100%;                             /* flex column 父容器中撑满宽度 */
  height: 8px; margin: 8px 0 0;
}
.v-boss-square-hp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
}
.v-boss-square-hp b { font-weight: 800; }
@media (min-width: 761px) {
  .v-vs-arena {
    height: clamp(320px, 36vh, 420px);
  }
  .v-vs-side,
  .v-vs-side > * {
    min-height: 0;
  }
  .v-pet-square-card,
  .v-boss-square-card {
    height: 100%;
    aspect-ratio: auto;
  }
  .v-pet-square-card img,
  .v-boss-square-card img {
    padding: 12px 18px;
  }
  .v-pet-square-info,
  .v-boss-square-info {
    min-height: 92px;
    padding: 8px 14px 10px;
  }
}
@media (max-width: 760px) {
  .v-vs-arena { grid-template-columns: 1fr; }
  .v-vs-text { font-size: 48px; }
}

/* ===== 家长端 BOSS 守卫战设置（竖版 3:4 卡片网格） ===== */
.p-boss-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 6px;
}
.p-boss-card-cell {
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;                       /* 竖版 3:4 */
  background: #faf6f0;
  border-radius: 16px;
  padding: 14px 14px 16px;
  border: 1.5px solid #f0e8d8;
  min-width: 0;
  overflow: hidden;
}
.p-boss-card-img {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0;
}
.p-boss-card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.p-boss-card-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark, #333);
  text-align: center;
  margin: 6px 0 8px;
  min-height: 43px;
  display: grid;
  place-items: center;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.p-boss-card-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  min-width: 0;
}
.p-boss-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid, #666);
  white-space: nowrap;
  flex: 0 0 auto;
}
.p-boss-card .v-input.num,
.p-boss-card .v-select {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 10px;
  max-width: 100%;
  min-width: 0;
}
.p-boss-card .v-input.num { width: 100%; flex: 0 0 auto; }
.p-boss-card-row > .v-input.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.p-boss-card .v-select    { width: 100%; min-width: 0; flex: 0 0 auto; }
.p-boss-card-reward-grp {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 64px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.p-boss-hint {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-light, #999);
}
.p-boss-card .v-card-title { font-size: 22px; }
.p-boss-card .v-card-title .v-btn.small { font-size: 16px; padding: 8px 16px; }
@media (max-width: 560px) {
  .p-boss-card-grid { grid-template-columns: 1fr; gap: 12px; }
}
.v-pet-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--bg-card, #fff); border: 1.5px solid var(--pink-border, #eee);
}
.v-pet-banner img { width: 72px; height: 72px; object-fit: contain; }
.v-pet-banner .p-info { flex: 1; }
.v-pet-banner .p-name { font-size: 15px; font-weight: 800; }
.v-pet-banner .p-sub { font-size: 12px; color: var(--text-mid, #777); margin: 3px 0 8px; }

/* 网格 */
.v-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.v-cell {
  padding: 12px; border-radius: 12px; background: var(--pink-pale, #faf6f6);
  border: 1px solid var(--pink-border, #eee);
}
.v-cell .vc-name { font-size: 13px; font-weight: 700; }
.v-cell .vc-meta { font-size: 12px; color: var(--text-mid, #777); margin-top: 3px; }
.v-cell .vc-pts { font-size: 14px; font-weight: 800; color: var(--pink-main, #e91e8c); margin-top: 6px; }

/* 日历 */
.cal-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head button {
  border: none; background: none; font-size: 16px; cursor: pointer;
  padding: 4px 10px; border-radius: 8px; color: var(--text-mid, #666);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 42px); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--text-light, #999); padding: 4px 0; }
.cal-day {
  height: 42px; border-radius: 10px; border: 1px solid transparent;
  background: var(--bg-card, #fff); cursor: pointer; font-size: 13px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-dark, #333); position: relative;
}
.cal-day.other { color: #ccc; }
.cal-day.sel { background: var(--pink-main, #e91e8c); color: #fff; }
.cal-day.is-today { border-color: var(--pink-main, #e91e8c); }
.cal-day .dot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #ff7043;
}
.cal-day .dot.red { background: #e53935; }

/* 未来 7 天条带（家长端任务页） */
.week-strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-top: 12px;
}
.week-strip-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border: 1px solid var(--pink-border, #eee);
  border-radius: 10px; background: var(--bg-card, #fff);
  cursor: pointer; font: inherit; color: var(--text-dark, #333);
}
.week-strip-cell.today { border-color: var(--pink-main, #e91e8c); }
.week-strip-cell.sel { background: var(--pink-main, #e91e8c); color: #fff; }
.week-strip-cell .ws-label { font-size: 11px; color: var(--text-light, #999); }
.week-strip-cell.sel .ws-label { color: rgba(255,255,255,.85); }
.week-strip-cell .ws-day { font-size: 15px; font-weight: 700; line-height: 1.1; }
.week-strip-cell .ws-count { font-size: 10px; color: var(--text-mid, #666); }
.week-strip-cell.sel .ws-count { color: rgba(255,255,255,.9); }

/* 便签（家长页顶部 tab 即 v-tabs） */

/* 游戏卡（旧版：纯 emoji 小卡） */
.game-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.game-card {
  border: 1.5px solid var(--pink-border, #eee); background: var(--bg-card, #fff);
  border-radius: 14px; padding: 16px 10px; cursor: pointer; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--text-dark, #333);
}
.game-card .gc-icon { font-size: 30px; display: block; margin-bottom: 6px; }
.game-card:hover { border-color: var(--pink-main, #e91e8c); }

/* 游戏卡（新：参考班级宠物园游戏预览图 + 一行三个） */
.game-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.game-card-3 {
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--pink-border, #eee);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.game-card-3:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(233,30,140,.12); }
.game-card-3 .gc-img {
  aspect-ratio: 16 / 9;
  background: #fafafa;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.game-card-3 .gc-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.game-card-3 .gc-title {
  padding: 10px 12px;
  font-size: 14px; font-weight: 700; text-align: center;
  color: #ff8fab;                         /* 浅粉色 */
}
@media (max-width: 760px) {
  .game-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* 兑换行 */
.ex-row {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-radius: 12px; background: var(--bg-card, #fff);
  border: 1.5px solid var(--pink-border, #eee); margin-bottom: 8px;
}
.ex-row .ex-icon { font-size: 24px; }
.ex-row .ex-title { flex: 1; font-size: 14px; font-weight: 600; }
.ex-row .ex-cost { font-size: 13px; font-weight: 800; color: var(--pink-main, #e91e8c); flex-shrink: 0; }

/* 钱包 */
.wallet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.wallet-cell {
  padding: 12px; text-align: center; border-radius: 14px;
  background: var(--bg-card, #fff); border: 1.5px solid var(--pink-border, #eee);
}
.wallet-cell .wc-icon { font-size: 24px; }
.wallet-cell .wc-val { font-size: 18px; font-weight: 800; color: var(--pink-main, #e91e8c); }
.wallet-cell .wc-label { font-size: 12px; color: var(--text-light, #999); }

/* 伤害记录 */
.dmg-log { max-height: 320px; overflow-y: auto; }
.dmg-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px dashed var(--pink-border, #eee); font-size: 12px; color: var(--text-mid, #777);
}
.dmg-row:last-child { border-bottom: none; }

/* 装扮格子 */
.cos-cell {
  border: 1.5px solid var(--pink-border, #eee); background: var(--bg-card, #fff);
  border-radius: 12px; padding: 10px; text-align: center; position: relative;
}
.cos-cell img { width: 56px; height: 56px; object-fit: contain; }
.cos-cell .cos-name { font-size: 12px; font-weight: 600; margin-top: 4px; }
.cos-cell .cos-meta { font-size: 11px; color: var(--text-light, #999); margin-top: 2px; }
.cos-cell.owned { border-color: #66bb6a; }
.cos-cell.equipped { border-color: var(--pink-main, #e91e8c); background: var(--pink-pale, #fdf5f9); }

@media (max-width: 720px) {
  .side-nav { flex-basis: 72px; padding: 10px 6px; }
  .sn-brand { font-size: 0; padding: 8px 0; text-align: center; gap: 0; }
  .sn-brand-name { font-size: 0; }
  .sn-brand-name::before { content: "🐾"; font-size: 20px; }
  .sn-brand-sub { display: none; }
  .sn-item { justify-content: center; padding: 12px 0; }
  .sn-item span { display: none; }
  .sn-item .sn-icon { font-size: 20px; }
  #viewRoot { padding: 12px 10px 30px; }
}

/* ===== 家庭管理：成员卡片横版 4:3 ===== */
.f-name-card .v-card-title { margin-bottom: 8px; }
.f-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.f-member-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #fff5f9 0%, #ffe9f3 100%);
  border: 1.5px solid var(--pink-border, #fce4ec);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(233, 30, 140, 0.06);
  transition: transform .15s, box-shadow .15s;
}
.f-member-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(233, 30, 140, 0.15);
}
.f-member-pet {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff, #fff8fb);
  border-right: 1.5px solid var(--pink-border, #fce4ec);
}
.f-member-pet-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.f-member-pet-egg {
  font-size: 40px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
}
.f-member-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  justify-content: space-between;
  min-width: 0;
}
.f-member-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  min-width: 0;
}
.f-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.f-gender {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.f-gender-male   { background: #e3f2fd; color: #1976d2; }
.f-gender-female { background: #fce4ec; color: #e91e63; }
.f-member-meta  { font-size: 12px; color: var(--text-light); }
.f-member-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.f-member-actions .v-btn { padding: 4px 10px; font-size: 11px; border-radius: 8px; }
.f-member-card-edit {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  border-color: #ffd54f;
}
.f-edit-name {
  flex: 1;
  font-size: 14px;
  padding: 6px 10px;
  min-width: 0;
}
.f-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.f-gender-toggle {
  display: inline-flex;
  border: 1.5px solid var(--pink-border, #fce4ec);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.f-gender-toggle .f-gender-btn {
  border: none;
  background: transparent;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-mid);
  border-right: 1px solid var(--pink-border, #fce4ec);
}
.f-gender-toggle .f-gender-btn:last-child { border-right: none; }
.f-gender-toggle .f-gender-btn:hover { background: var(--pink-pale); }
.f-gender-toggle .f-gender-btn.active {
  background: var(--pink-main, #e91e8c);
  color: #fff;
}

@media (max-width: 720px) {
  .f-member-card { grid-template-columns: 80px 1fr; }
}
@media (max-width: 480px) {
  .f-member-grid { grid-template-columns: 1fr; }
  .f-member-card { grid-template-columns: 96px 1fr; }
}
/* ===== 宠物页：大卡片（家长网格 / 孩子左卡都用同一份 .pd-card，保证两边"完全一样"） ===== */

/* 家长端宠物网格：每张卡用 .pd-card-slot 包 .pd-card，slot 是点击区 */
.pet-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pet-grid-3 > .pd-card-slot {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: initial;
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.pet-grid-3 > .pd-card-slot:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 18px rgba(124,77,255,.18));
}
.pet-grid-3 > .pd-card-slot:focus-visible {
  outline: 3px solid rgba(233, 30, 140, .36);
  outline-offset: 2px;
}
.pet-grid-3 > .pd-card-slot > .pd-card {
  width: 100%;
}

/* 孩子端宠物页：上方档案与照料区对齐，图鉴独立占满下一行 */
.pet-page-layout { display: grid; gap: 24px; }
.pet-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.pd-card {
  aspect-ratio: 9 / 16;
  /* 卡片样式：与右侧 .pd-panel 一致的 18px 圆角 + 柔和阴影 */
  border: none;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(60, 35, 47, .05);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pd-card.unowned {
  background: #fff;
  box-shadow: 0 0 0 2px #e6dfe0;
}

/* ===== 装扮叠加层（z-index 分层） =====
   background (0) → pedestal (1) → 宠物 (2) → effect (3) → nameplate (4) → 文字 (5) → stains (6) → status (7) → frame (8) */
.pd-cosmetic-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pd-cosmetic-pedestal {
  position: absolute;
  z-index: 1;
  left: 5%;
  top: 44%;
  width: 90%;
  height: 20%;
  object-fit: contain;
  animation: petFloat 3.4s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}
.pd-cosmetic-effect {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: 115.2%;
  height: 52.2%;
  object-fit: contain;
  opacity: .48;
  animation: pdEffectPulse 2.8s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}
.pd-cosmetic-nameplate {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 88%;
  height: 14%;
  object-fit: contain;
  pointer-events: none;
}
.pd-cosmetic-frame {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.pd-card .pd-pet-img {
  position: absolute;
  top: 17%;
  left: 11%;
  width: 78%;
  height: 38%;
  margin: 0;
  object-fit: contain;
  z-index: 2;
}
.pd-card .pd-stains {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  padding: 8px;
  background: rgba(0, 0, 0, .06);
  font-size: 18px;
  pointer-events: none;
  z-index: 6;
}
.pd-card.dirty-black { background: #111 !important; }
.pd-card.dirty-black img { opacity: .35; filter: grayscale(1); }
.pd-card.dirty-black .pd-nameplate-title,
.pd-card.dirty-black .pd-tier { color: #999; }
.pd-card.dirty-black .pd-stat .val { color: #888; }
.pd-card .pd-status {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 7;
  border-radius: 999px;
  background: rgba(35, 31, 34, .78);
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.pd-card .pd-status.dying { background: #d96717; }
.pd-card .pd-status.dead { background: #b71c1c; }
.pd-nameplate-footer {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  height: 12.8%;
  border-top: 1px dashed rgba(182, 136, 19, .55);
  pointer-events: none;
}
.pd-nameplate-footer .pd-cosmetic-nameplate {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 88%;
  height: 100%;
  transform: translateX(-50%);
  object-fit: contain;
}
.pd-nameplate-title {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 66%;
  height: 52%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #312b35;
  font-size: clamp(6px, calc(14px - (var(--pd-title-length, 8) - 6) * 1.1px), 12px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-tier {
  position: absolute;
  z-index: 5;
  top: 4%;
  left: 50%;
  width: 76%;
  transform: translateX(-50%);
  margin: 0;
  color: #9b7200;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}
.pd-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: calc(12.8% + 14px);
  z-index: 1;
}
.pd-stat { display: flex; align-items: center; gap: 8px; }
.pd-stat .ic {
  width: auto;
  min-width: 32px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #6b5a39;
  text-align: left;
  letter-spacing: .02em;
}
.pd-stat .bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(93, 69, 42, .12); overflow: hidden; }
.pd-stat .fill { height: 100%; border-radius: inherit; }
.pd-stat .fill.gold { background: linear-gradient(90deg, #ffc107, #ff9800); }
.pd-stat .fill.mood { background: linear-gradient(90deg, #ec407a, #ab47bc); }
.pd-stat .fill.hunger { background: linear-gradient(90deg, #ff7043, #e53935); }
.pd-stat .fill.clean { background: linear-gradient(90deg, #42a5f5, #1e88e5); }
.pd-stat .val { width: 32px; flex-shrink: 0; color: #665f68; font-size: 11px; font-weight: 700; text-align: right; }
.pd-unowned-egg { position: relative; z-index: 1; width: min(74%, 146px); aspect-ratio: 1 / 1.1; display: grid; place-items: center; margin: 22px auto 5px; border-radius: 48% 48% 44% 44%; background: radial-gradient(circle at 50% 30%, #fff 0 12%, #fff1cd 13% 55%, #f5cb78 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 12px 22px rgba(182, 126, 43, .2); }
.pd-unowned-egg img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 7px 6px rgba(126, 79, 36, .18)); }
.pd-unowned-name { position: relative; z-index: 1; color: #312b35; font-size: 17px; font-weight: 800; text-align: center; }
.pd-card.unowned .pd-tier { position: relative; top: auto; left: auto; width: auto; transform: none; margin-top: 4px; }

@media (min-width: 761px) {
  .pd-bars { padding-bottom: calc(12.8% + 26px); }
}

.pet-detail-layout .pd-actions { display: grid; gap: 16px; }
.pet-detail-layout {
  --care-action-feed-surface: #fff4d7;
  --care-action-feed-border: #ead38c;
  --care-action-feed-ink: #604a18;
  --care-action-bath-surface: #eaf6ff;
  --care-action-bath-border: #b9ddef;
  --care-action-bath-ink: #24516f;
  --care-action-play-surface: #f2efff;
  --care-action-play-border: #d4caf4;
  --care-action-play-ink: #554176;
}
/* 右侧三行卡片（积分详情 / 互动照料 / 伙伴管理+专属昵称）：
   总高度由 JS 同步到左卡 aspect-ratio 算出的高度（--pet-right-total），
   单行高度 = (总 - gaps) / 3（左卡 9:16 决定外层 box 高，aspect-ratio '赢' grid stretch）。 */
.pet-detail-layout .pd-actions-3rows {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-content: stretch;
  min-height: 0;
  height: var(--pet-right-total, auto);
  max-height: var(--pet-right-total, none);
  overflow: hidden;
}
.pet-detail-layout .pd-actions-3rows > .pd-panel,
.pet-detail-layout .pd-actions-3rows > .pd-profile-controls { min-height: 0; }
.pd-points-panel,
.pd-care-panel { display: flex; flex-direction: column; }
.pd-points-panel .pd-wallet,
.pd-care-panel .pd-interact { margin-top: auto; }
/* Keep the desktop care panel on the same 12px bottom rhythm as pet assets. */
.pet-detail-layout .pd-care-panel .pd-panel-head { margin-bottom: 0; }
.pd-panel {
  border: 1px solid #f0e6e4;
  border-radius: 18px;
  background: #fffefd;
  box-shadow: 0 5px 16px rgba(60, 35, 47, .05);
}
.pd-points-panel { padding: 12px 16px; }
.pd-care-panel { padding: 12px 16px; overflow: hidden; }
.pd-panel-head,
.pd-codex-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pd-panel h2 { margin: 0; color: #342d39; font-size: 14px; line-height: 1.3; }
.pd-kicker { margin: 0 0 4px; color: #a2747d; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.pd-status-note { max-width: 168px; color: #847b82; font-size: 11px; line-height: 1.4; text-align: right; }
.pd-wallet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.pd-wallet .wc {
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 18px;
  border: 1px solid #f3e9df;
  border-radius: 14px;
  background: #fffaf2;
  text-align: left;
}
.pd-wallet .wc:nth-child(2) { background: #f8f4ff; border-color: #eee5ff; }
.pd-wallet .wc:nth-child(3) { background: #fff8ec; border-color: #f5e9c8; }
.pd-wallet .wc-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.pd-wallet .wc-icon .workspace-image-icon { width: 36px; height: 36px; vertical-align: 0; }
.pd-wallet .wc .vc {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.pd-wallet .v { color: #3e3543; font-size: 22px; font-weight: 900; white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; }
.pd-wallet .l { color: #887f84; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1; align-self: end; }
.pd-subsection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.pd-subsection-head strong { color: #493b46; font-size: 13px; }
.pd-subsection-head span { color: #948a90; font-size: 11px; }
.pet-detail-layout .pd-interact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pet-detail-layout .pd-care-action {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 18px;
  border: 1px solid #efdfdd;
  border-radius: 14px;
  background: #fff;
  color: #5b505c;
  box-shadow: none;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pet-detail-layout .pd-care-action .pc-action-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.pet-detail-layout .pd-care-action .pc-action-icon .workspace-image-icon {
  width: 36px;
  height: 36px;
  vertical-align: 0;
}
.pet-detail-layout .pd-care-action b {
  font-size: 16px;
  font-weight: 800;
  flex: 0 0 auto;
}
.pet-detail-layout .pd-care-action .pc-cost {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.pet-detail-layout .pd-care-action .pc-cost .workspace-image-icon {
  width: 18px;
  height: 18px;
}
.pet-detail-layout .pd-care-action.feed { border-color: var(--care-action-feed-border); background: var(--care-action-feed-surface); color: var(--care-action-feed-ink); }
.pet-detail-layout .pd-care-action.bath { border-color: var(--care-action-bath-border); background: var(--care-action-bath-surface); color: var(--care-action-bath-ink); }
.pet-detail-layout .pd-care-action.play { border-color: var(--care-action-play-border); background: var(--care-action-play-surface); color: var(--care-action-play-ink); }
.pet-detail-layout .pd-care-action.feed small { color: var(--care-action-feed-ink); }
.pet-detail-layout .pd-care-action:hover { transform: translateY(-2px); border-color: #b9aec8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75); }
.pet-detail-layout .pd-care-action:focus-visible,
.pd-codex-cell:focus-visible { outline: 3px solid rgba(233, 30, 140, .36); outline-offset: 2px; }

.pd-profile-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; }
.pd-adopt-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: linear-gradient(135deg, #fff9fb, #fff7ef); }
.pd-adopt-panel h2 { font-size: 15px; }
.pd-adopt-panel p:not(.pd-kicker) { margin: 5px 0 0; color: #867a81; font-size: 12px; line-height: 1.45; }
.pd-adopt-button { min-width: 104px; min-height: 42px; white-space: nowrap; }
.pd-rename { padding: 16px 18px; }
.pd-rename-label { display: grid; gap: 0; color: #493b46; font-size: 15px; font-weight: 800; }
.pd-rename-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.pd-rename-row .v-input { width: 100%; min-width: 0; box-sizing: border-box; }
.pd-rename-row .v-btn { min-width: 64px; }

.pd-codex { padding: 18px; }
.pd-codex-count { flex: 0 0 auto; border-radius: 999px; background: #fff4df; color: #9a6811; padding: 6px 10px; font-size: 11px; font-weight: 800; }
.pd-codex .hp-bg { height: 8px; margin-top: 14px; background: #f1ebe2; }
.pd-codex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 10px; margin-top: 16px; }
.pd-codex-cell {
  position: relative;
  aspect-ratio: 1 / 1.08;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 5px;
  overflow: hidden;
  border: 1px solid #eee5df;
  border-radius: 13px;
  background: #fffaf6;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.pd-codex-cell img { width: 100%; height: 100%; object-fit: contain; }
.pd-codex-cell.own:hover { transform: translateY(-2px); border-color: var(--pink-main, #e91e8c); box-shadow: 0 5px 12px rgba(186, 82, 132, .14); }
.pd-codex-cell.lock { cursor: not-allowed; background: #f7f4f2; }
.pd-codex-cell.lock img { opacity: .55; filter: grayscale(.6); }
.pd-codex-cell.current { border: 2px solid var(--pink-main, #e91e8c); background: #fff1f7; box-shadow: 0 0 0 3px rgba(233, 30, 140, .1); }
.pd-codex-cell .dot { position: absolute; right: 4px; bottom: 4px; min-width: 17px; height: 17px; border-radius: 999px; display: grid; place-items: center; padding: 0 3px; color: #fff; font-size: 10px; font-weight: 800; }
.pd-codex-cell .dot.ok { background: transparent; }
.pd-codex-cell .dot.lock { background: transparent; color: #837a7d; font-size: 9px; padding-right: 0; }
.pd-codex-note { margin: 12px 0 0; color: #92878d; font-size: 11px; line-height: 1.45; text-align: center; }
/* 领养宠物弹窗（参考班级宠物园：渐变标题 + 6列网格 + 状态条） */
.adopt-overlay,
.switch-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(20, 20, 30, .55);
  display: flex; align-items: center; justify-content: center;
}
.adopt-modal,
.switch-modal {
  width: min(880px, 96vw); max-height: 92vh;
  background: #fff; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px rgba(0,0,0,.25);
}
.adopt-modal .head,
.switch-modal .head {
  position: relative;
  padding: 18px 56px 16px 22px;
  background: linear-gradient(135deg, #e91e8c 0%, #7c4dff 100%);
  color: #fff;
}
.adopt-modal .head h2,
.switch-modal .head h2 {
  font-size: 19px; font-weight: 800; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.adopt-modal .head .sub,
.switch-modal .head .sub { font-size: 12px; opacity: .9; margin-top: 3px; }
.adopt-modal .head .close,
.switch-modal .head .close {
  position: absolute; top: 10px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.2); color: #fff; border: none;
  font-size: 0; line-height: 0; cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
}
.adopt-modal .head .close img,
.adopt-modal .head .close .workspace-image-icon,
.switch-modal .head .close img,
.switch-modal .head .close .workspace-image-icon {
  width: 14px; height: 14px; max-width: 14px; max-height: 14px;
  object-fit: contain; display: block;
  filter: brightness(0) invert(1);  /* close SVG 默认黑色,转白色 */
}
.adopt-modal .body,
.switch-modal .body { flex: 1; overflow-y: auto; padding: 16px 22px; background: #fafafa; }
.adopt-modal .grp-title,
.switch-modal .grp-title {
  font-size: 13px; font-weight: 800; color: var(--text-mid);
  margin: 12px 0 8px;
}
.adopt-modal .grid-6,
.switch-modal .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.adopt-modal .cell,
.switch-modal .cell {
  background: #fff; border: 2px solid transparent;
  border-radius: 12px; padding: 10px 6px;
  text-align: center; cursor: pointer; position: relative;
  transition: transform .12s;
}
.adopt-modal .cell:hover,
.switch-modal .cell:hover { transform: translateY(-2px); }
.adopt-modal .cell img,
.switch-modal .cell img { width: 56px; height: 56px; object-fit: contain; }
.adopt-modal .cell .nm,
.switch-modal .cell .nm { font-size: 12px; font-weight: 600; margin-top: 4px; }
.adopt-modal .cell.sel,
.switch-modal .cell.sel { border-color: var(--main, #e91e8c); background: #fdf5f9; }
.adopt-modal .cell.cur,
.switch-modal .cell.cur { border-color: rgba(233, 30, 140, .4); background: #fff1f7; }
/* 锁定态：与图鉴风格一致——灰度半透明图 + 右下角小锁标签（不再覆盖黑色蒙版） */
.adopt-modal .cell.locked,
.switch-modal .cell.lock { cursor: not-allowed; background: #f7f4f2; }
.adopt-modal .cell.locked img,
.switch-modal .cell.lock img { filter: grayscale(.6); opacity: .55; }
.adopt-modal .cell.locked .nm,
.switch-modal .cell.lock .nm { opacity: .55; }
.adopt-modal .cell .lock,
.switch-modal .cell .lock {
  position: absolute; right: 6px; bottom: 6px;
  width: 16px; height: 16px; padding: 0;
  background: transparent; border-radius: 0;
  display: grid; place-items: center;
  line-height: 0; font-size: 0; color: transparent;
  z-index: 2;
}
.adopt-modal .cell .lock img,
.adopt-modal .cell .lock .workspace-image-icon,
.switch-modal .cell .lock img,
.switch-modal .cell .lock .workspace-image-icon {
  width: 16px; height: 16px; max-width: 16px; max-height: 16px;
  object-fit: contain; display: block;
  opacity: .8;
}
.adopt-modal .foot,
.switch-modal .foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; background: #fff;
  border-top: 1px solid var(--pink-border, #eee);
}
.adopt-modal .foot .stats,
.switch-modal .foot .stats { display: flex; gap: 14px; font-size: 13px; color: var(--text-mid); }
.adopt-modal .foot .stats .locked-warn,
.switch-modal .foot .stats .locked-warn { color: #e53935; font-weight: 700; }
.adopt-modal .foot .btns,
.switch-modal .foot .btns { display: flex; gap: 8px; }
.adopt-modal .foot button.cancel,
.switch-modal .foot button.cancel {
  background: #fff; border: 1.5px solid var(--pink-border);
  border-radius: 999px; padding: 8px 22px; font-size: 13px; cursor: pointer;
}
.adopt-modal .foot button.confirm,
.switch-modal .foot button.confirm {
  background: var(--main-soft, #fdf5f9); color: #b0b0b0;
  border: 0; border-radius: 999px; padding: 8px 22px;
  font-size: 13px; font-weight: 700; cursor: not-allowed;
}
.adopt-modal .foot button.confirm.active,
.switch-modal .foot button.confirm.active {
  background: var(--main, #e91e8c); color: #fff; cursor: pointer;
}
/* 切换 modal 右下角小图标（已解锁对勾 / 未解锁锁，去掉圆形背景） */
.switch-modal .cell .dot {
  position: absolute; right: 6px; bottom: 6px;
  width: 16px; height: 16px; padding: 0;
  background: transparent; border-radius: 0;
  display: grid; place-items: center;
  line-height: 0; font-size: 0; color: transparent;
}
.switch-modal .cell .dot img,
.switch-modal .cell .dot .workspace-image-icon {
  width: 16px; height: 16px; max-width: 16px; max-height: 16px;
  object-fit: contain; display: block;
  opacity: .85;
}
.switch-modal .cell .dot.ok { background: transparent; }
.switch-modal .cell .dot.lock { background: transparent; }
/* 切换 modal 空状态（未领养） */
.switch-modal .switch-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 22px; text-align: center;
}
.switch-modal .switch-empty-emoji { font-size: 56px; margin-bottom: 14px; opacity: .55; }
.switch-modal .switch-empty-title { font-size: 16px; font-weight: 700; color: var(--text-dark, #333); margin-bottom: 6px; }
.switch-modal .switch-empty-sub { font-size: 13px; color: var(--text-mid, #666); margin-bottom: 22px; }
.switch-modal .switch-empty-btn {
  background: var(--main, #e91e8c); color: #fff; border: 0;
  border-radius: 999px; padding: 10px 28px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 14px rgba(233, 30, 140, .25);
}
.switch-modal .switch-empty-btn:hover { background: #d6187d; }

/* 宠物图加浮动效果（卡片间错峰呼吸） */
.pet-card .pc-img-wrap > img {
  animation: petFloat 3.2s ease-in-out infinite;
  will-change: transform;
}
.pet-card:nth-child(2) .pc-img-wrap > img { animation-delay: -0.6s; animation-duration: 3.6s; }
.pet-card:nth-child(3) .pc-img-wrap > img { animation-delay: -1.2s; animation-duration: 3.0s; }
.pet-card:nth-child(4) .pc-img-wrap > img { animation-delay: -1.8s; animation-duration: 3.4s; }
.pet-card:nth-child(5) .pc-img-wrap > img { animation-delay: -2.4s; animation-duration: 3.2s; }
.pet-card:nth-child(6) .pc-img-wrap > img { animation-delay: -0.9s; animation-duration: 3.5s; }

.pd-card .pd-pet-img {
  animation: petFloat 3.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes pdEffectPulse {
  0%, 100% { transform: translateX(-50%) scale(.94); }
  50% { transform: translateX(-50%) scale(1.06); }
}

/* 减少动画偏好设置支持：用户开启则不浮动 */
@media (prefers-reduced-motion: reduce) {
  .pet-card .pc-img-wrap > img,
  .pd-card .pd-pet-img,
  .pd-cosmetic-pedestal,
  .pd-cosmetic-effect {
    animation: none;
  }
}

@media (max-width: 760px) {
  .pet-grid-3 { grid-template-columns: 1fr; }
  .adopt-modal .grid-6,
  .switch-modal .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pet-detail-layout { grid-template-columns: 1fr; }
}

/* ===== 装扮弹窗 ===== */
.pd-cosmetic-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 8px 16px;
  font-size: 14px;
}
.pd-cosmetic-box { max-width: 720px; width: 92vw; }
.pd-cosmetic-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid #f0e6e4;
  background: #fffaf5;
}
.pd-cosmetic-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #847b82;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.pd-cosmetic-tab.active {
  color: #c2185b;
  border-bottom-color: #e91e8c;
}
.pd-cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px !important;
  max-height: 56vh;
  overflow-y: auto;
}
.pd-cosmetic-item {
  position: relative;
  border: 2px solid #f0e6e4;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.pd-cosmetic-item:hover { border-color: #e91e8c; transform: translateY(-2px); }
.pd-cosmetic-item.equipped {
  border-color: #e91e8c;
  background: linear-gradient(180deg, #fff5f8 0%, #ffe5ee 100%);
  box-shadow: 0 4px 10px rgba(233, 30, 140, .12);
}
.pd-cosmetic-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8f4ff 0%, #fff5e6 100%);
}
.pd-cosmetic-item-name {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}
.pd-cosmetic-item-status {
  margin-top: 2px;
  font-size: 11px;
  color: #847b82;
}
.pd-cosmetic-item.equipped .pd-cosmetic-item-status {
  color: #c2185b;
  font-weight: 700;
}
.pd-cosmetic-foot {
  padding: 10px 16px 14px;
  font-size: 12px;
  color: #847b82;
  border-top: 1px solid #f0e6e4;
  background: #fffaf5;
  text-align: center;
}

/* 衣橱与装扮商店使用同一套浅色商品卡语言 */
.pd-cosmetic-open-btn {
  min-height: 44px;
  border-radius: 14px;
}
.pd-cosmetic-open-btn .workspace-image-icon { width: 20px; height: 20px; }
.pd-cosmetic-box {
  overflow: hidden;
  border-radius: 24px;
  background: #fbfbfd;
}
.pd-cosmetic-box .modal-header { min-height: 64px; padding: 0 18px; background: #fff; }
.pd-cosmetic-box .modal-title { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; }
.pd-cosmetic-box .modal-title .workspace-image-icon { width: 25px; height: 25px; }
.pd-cosmetic-box .modal-close-btn { width: 44px; height: 44px; display: grid; place-items: center; }
.pd-cosmetic-box .modal-close-btn .workspace-image-icon { width: 18px; height: 18px; }
.pd-cosmetic-tabs {
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: #f6f4f8;
}
.pd-cosmetic-tabs::-webkit-scrollbar { display: none; }
.pd-cosmetic-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #e4e0e8;
  border-radius: 14px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 750;
}
.pd-cosmetic-tab small { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #f0edf3; display: inline-grid; place-items: center; color: #7a7480; font-size: 10px; }
.pd-cosmetic-tab.active { color: #175d9e; border-color: #94c2ee; background: #eaf4ff; }
.pd-cosmetic-tab.active small { color: #175d9e; background: #d4eaff; }
.pd-cosmetic-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 16px !important;
  background: #fbfbfd;
}
.pd-cosmetic-item {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e6e2e9;
  border-radius: 18px;
  background: #fffaf4;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform .15s ease, border-color .18s ease, box-shadow .18s ease;
}
.pd-cosmetic-item:nth-child(3n + 2) { background: #f2f9ff; }
.pd-cosmetic-item:nth-child(3n + 3) { background: #fbf5ff; }
.pd-cosmetic-item:hover { border-color: #83baf0; }
.pd-cosmetic-item.equipped {
  border-color: #72b0eb;
  background: #eaf5ff;
  box-shadow: 0 0 0 3px rgba(77, 153, 224, .15);
}
.pd-cosmetic-item img { aspect-ratio: 4 / 3; border-radius: 13px; background: rgba(255,255,255,.72); }
.pd-cosmetic-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pd-cosmetic-item-status { color: #706a76; font-size: 12px; }
.pd-cosmetic-item.equipped .pd-cosmetic-item-status { color: #175d9e; }
.pd-cosmetic-foot { border-color: #e9e5ec; background: #f6f4f8; }
.pd-cosmetic-empty {
  grid-column: 1 / -1;
  min-height: 240px;
  padding: 24px;
  border-radius: 18px;
  background: #f5faff;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}
.pd-cosmetic-empty .workspace-image-icon { width: 48px; height: 48px; opacity: .68; }
.pd-cosmetic-empty strong { color: var(--text-dark); font-size: 17px; }
.pd-cosmetic-empty span { font-size: 13px; line-height: 1.5; }
.pd-cosmetic-empty button { min-height: 44px; margin-top: 7px; padding: 0 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg,#ff4f9a,#8b61e9); color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #5e3cb7; }

@media (max-width: 760px) {
  #cosmeticModal { align-items: flex-end; padding: 0; }
  .pd-cosmetic-box {
    width: 100%;
    max-width: none;
    max-height: 86vh;
    max-height: min(86dvh, 760px);
    margin-top: auto;
    border-radius: 24px 24px 0 0;
  }
  .pd-cosmetic-box .modal-header { min-height: 60px; }
  .pd-cosmetic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 58dvh; padding: 12px !important; }
  .pd-cosmetic-tabs { padding: 9px 12px; }
  .pd-cosmetic-item { padding: 8px; }
  .pd-cosmetic-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .pd-cosmetic-item { transition: none; }
}
/* ===== 家长/孩子双端：PIN 弹窗 ===== */
.family-pin-box {
    width: 300px;
    max-width: calc(100vw - 48px);
    padding: 24px 20px 20px;
    text-align: center;
}
.family-pin-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.family-pin-subtitle {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 16px;
    min-height: 16px;
}
.family-pin-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}
.family-pin-dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--pink-main);
    background: transparent;
    transition: background 0.15s;
}
.family-pin-dots span.filled {
    background: var(--pink-main);
}
.family-pin-error {
    font-size: 12px;
    color: var(--color-danger);
    min-height: 18px;
    margin-bottom: 8px;
}
.family-pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.family-pin-key {
    height: 52px;
    border: 1.5px solid #eee;
    border-radius: 12px;
    background: #fafafa;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.15s;
}
.family-pin-key:hover { background: var(--pink-pale); border-color: var(--pink-light); }
.family-pin-key:active { transform: scale(0.95); }
.family-pin-key-aux {
    font-size: 14px;
    color: var(--text-mid);
}
/* ===== 家庭任务系统 UI ===== */
.ftask-box {
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.ftask-mgr-box { width: 560px; }
.ftask-body {
    overflow-y: auto;
    padding: 12px 16px;
    flex: 1;
}
.ftask-tabs {
    display: flex;
    border-bottom: 2px solid #f0f0f0;
    padding: 0 12px;
}
.ftask-tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
}
.ftask-tab.active { color: var(--pink-main); border-bottom-color: var(--pink-main); }

.ftask-child-block { margin-bottom: 14px; }
.ftask-child-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
}
.ftask-cat-block { margin-bottom: 14px; }
.ftask-cat-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-mid);
    margin-bottom: 6px;
}
.ftask-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #faf7f2;
    margin-bottom: 6px;
}
.ftask-row.done { background: #fff8e1; }
.ftask-row.confirmed { background: #e8f5e9; }
.ftask-icon { font-size: 18px; flex-shrink: 0; }
.ftask-title { flex: 1; font-size: 14px; color: var(--text-dark); }
.ftask-points {
    font-size: 13px;
    font-weight: 700;
    color: var(--pink-main);
    flex-shrink: 0;
}
.ftask-status { font-size: 12px; flex-shrink: 0; }
.ftask-status.confirmed { color: #43a047; font-weight: 600; }
.ftask-status.waiting { color: #fb8c00; font-weight: 600; }
.ftask-status.pending { color: var(--text-light); }

.ftask-done-btn, .ftask-confirm-btn, .ftask-assign-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.ftask-done-btn { background: var(--pink-main); color: #fff; }
.ftask-confirm-btn { background: #43a047; color: #fff; }
.ftask-assign-btn { background: #eef2ff; color: #4f5bd5; }
.ftask-reject-btn {
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-mid);
    cursor: pointer;
    flex-shrink: 0;
}
.ftask-del-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
    flex-shrink: 0;
}
.ftask-del-btn:hover { opacity: 1; }
.ftask-autodaily {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--text-mid);
    flex-shrink: 0;
    cursor: pointer;
}
.ftask-empty {
    color: var(--text-pale);
    font-size: 13px;
    text-align: center;
    padding: 12px 0;
}

.ftask-settings {
    border-top: 1px solid #f0f0f0;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ftask-setting-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-mid);
    cursor: pointer;
}

.ftask-add-form { display: flex; flex-direction: column; gap: 10px; }
.ftask-add-row { display: flex; gap: 8px; align-items: center; }
.ftask-input {
    padding: 10px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    width: 100%;
}
.ftask-input:focus { border-color: var(--pink-main); }
.ftask-points-input { width: 80px; flex-shrink: 0; }
.ftask-select {
    padding: 10px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    width: 100%;
}
.ftask-add-hint { font-size: 13px; color: var(--text-light); }
.ftask-assign-go { margin-top: 6px; }
.ftask-assign-box { width: 320px; max-width: calc(100vw - 48px); }

/* 导航栏任务按钮角标 */
.nav-task-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
/* ===== 三套主题：家长端简洁风 / 孩子端男孩 / 女孩 =====
   通过 body[data-theme="parent|boy|girl"] 覆盖 CSS 变量实现。
   variables.css 的 :root 为基础值，这里按主题整体替换主色与表面色。 */

/* ---- 女孩主题（默认，延续粉紫黏土风，略提亮） ---- */
body[data-theme="girl"] {
    --pink-main: #e91e8c;
    --pink-dark: #c2185b;
    --pink-light: #f8bbd0;
    --pink-pale: #fdf5f9;
    --pink-border: #fce4ec;
    --purple-main: #7c4dff;
    --purple-light: #ede7f6;
    --bg-page: #fdf5f9;
    --bg-card: #ffffff;
    --bg-nav: #ffffff;
}

/* ---- 男孩主题：蓝/青绿硬朗风 ---- */
body[data-theme="boy"] {
    --pink-main: #1e88e5;
    --pink-dark: #1565c0;
    --pink-light: #bbdefb;
    --pink-pale: #f2f8ff;
    --pink-border: #e3f2fd;
    --purple-main: #00897b;
    --purple-light: #e0f2f1;
    --bg-page: #f0f7fc;
    --bg-card: #ffffff;
    --bg-nav: #ffffff;
    --color-success: #2e7d32;
}

/* ---- 家长主题：莫兰迪中性简洁风（鼠尾草绿 + 灰褐 + 烟粉） ---- */
body[data-theme="parent"] {
    --pink-main: #6d8b74;
    --pink-dark: #56705e;
    --pink-light: #c8d6c9;
    --pink-pale: #f4f7f2;
    --pink-border: #e2e9e0;
    --purple-main: #8a7b6d;
    --purple-light: #f0ebe4;
    --bg-page: #f6f5f1;
    --bg-card: #ffffff;
    --bg-nav: #ffffff;
    --text-dark: #3a3a36;
    --text-mid: #6b6b64;
    --color-danger: #b05a5a;
    --shadow-card: 0 1px 4px rgba(90, 100, 88, 0.08);
    --shadow-hover: 0 6px 18px rgba(90, 100, 88, 0.14);
    --shadow-nav: 0 1px 6px rgba(90, 100, 88, 0.06);
    --radius-md: 10px;
    --radius-lg: 14px;
}
/* ===== 家庭版双端页面（孩子端三页 + 家长端总览） ===== */
#childHomeView, #parentHomeView { display: none; }
body[data-family-role="child"] #childHomeView { display: block; }
body[data-family-role="parent"] #parentHomeView { display: block; }
/* 孩子模式隐藏教师向内容：班级信息栏、排序/批量栏、孩子卡片网格 */
body[data-family-role="child"] .class-info-bar,
body[data-family-role="child"] #sortBatchBar,
body[data-family-role="child"] #studentGrid,
body[data-family-role="child"] #emptyStudentHint,
body[data-family-role="child"] .find-student-btn,
body[data-family-role="child"] .zoom-ctrl { display: none !important; }
/* 家长模式隐藏欢迎语中面向班级的引导（保留创建入口） */
body[data-family-role="parent"] #sortBatchBar .zoom-ctrl { display: none; }

/* ===== 孩子端：整体布局 ===== */
.child-home {
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 14px 76px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.child-switcher {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.child-switcher-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--pink-border);
    background: var(--bg-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
    cursor: pointer;
    transition: all 0.15s;
}
.child-switcher-chip.active {
    background: var(--pink-main);
    border-color: var(--pink-main);
    color: #fff;
}
.child-switcher-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: contain;
}

/* ===== 孩子端：底部 tab ===== */
.child-bottom-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    background: var(--bg-nav);
    border-top: 1px solid var(--pink-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    padding-bottom: env(safe-area-inset-bottom);
}
.child-bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 0 7px;
    border: none;
    background: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
}
.child-bottom-tab .cbt-icon { font-size: 21px; line-height: 1; }
.child-bottom-tab.active { color: var(--pink-main); }

/* ===== 孩子端：任务页 ===== */
.ct-page { display: none; flex-direction: column; gap: 12px; }
.ct-page.active { display: flex; }

.boss-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2b2450 0%, #4a2e6e 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(60, 40, 100, 0.25);
    overflow: hidden;
}
.boss-banner::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}
.boss-banner-img {
    width: 84px;
    height: 84px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.boss-banner-info { flex: 1; position: relative; z-index: 1; }
.boss-banner-name { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.boss-banner-progress { font-size: 12px; opacity: 0.85; margin-bottom: 6px; }
.boss-banner-hp-bg {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}
.boss-banner-hp-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6b6b, #ff3d3d);
    transition: width 0.5s ease;
}
.boss-banner-hp-text { font-size: 11px; opacity: 0.9; margin-top: 4px; text-align: right; }

/* 今日任务卡片 */
.ct-tasks-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ct-task-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--pink-border);
    margin-bottom: 8px;
}
.ct-task-card.confirmed { border-color: #c8e6c9; background: #f6fbf4; }
.ct-task-card.done { border-color: #ffe0b2; background: #fffaf0; }
.ct-task-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--pink-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ct-task-info { flex: 1; min-width: 0; }
.ct-task-title { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.ct-task-status { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.ct-task-points {
    font-size: 15px;
    font-weight: 800;
    color: var(--pink-main);
    flex-shrink: 0;
}
.ct-task-btn {
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--pink-main);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s;
}
.ct-task-btn:active { transform: scale(0.94); }
.ct-empty {
    text-align: center;
    color: var(--text-pale);
    font-size: 13px;
    padding: 26px 0;
}

/* ===== 孩子端：宠物页 ===== */
.ct-pet-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 16px 18px;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1.5px solid var(--pink-border);
}
.ct-pet-img { width: 128px; height: 128px; object-fit: contain; }
.ct-pet-name { font-size: 17px; font-weight: 800; color: var(--text-dark); }
.ct-pet-level { font-size: 13px; color: var(--text-mid); }
.ct-pet-progress-bg {
    width: 100%;
    max-width: 260px;
    height: 10px;
    border-radius: 999px;
    background: var(--pink-pale);
    overflow: hidden;
}
.ct-pet-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pink-main), var(--purple-main));
    transition: width 0.5s ease;
}
.ct-pet-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ct-pet-stat {
    padding: 12px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--pink-border);
    text-align: center;
}
.ct-pet-stat-val { font-size: 18px; font-weight: 800; color: var(--pink-main); }
.ct-pet-stat-label { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.ct-action-row { display: flex; gap: 10px; }
.ct-action-btn {
    flex: 1;
    border: none;
    border-radius: 14px;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--pink-main), var(--purple-main));
    cursor: pointer;
}

/* 风格切换 */
.ct-theme-row { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.ct-theme-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid var(--pink-border);
    background: var(--bg-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
    cursor: pointer;
}
.ct-theme-btn.active { border-color: var(--pink-main); color: var(--pink-main); }

/* ===== 孩子端：奖励页 ===== */
.ct-wallet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ct-wallet-item {
    padding: 14px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--pink-border);
    text-align: center;
}
.ct-wallet-item .cwi-icon { font-size: 26px; }
.ct-wallet-item .cwi-val { font-size: 20px; font-weight: 800; color: var(--pink-main); margin-top: 2px; }
.ct-wallet-item .cwi-label { font-size: 12px; color: var(--text-light); }
.ct-reward-shop-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--pink-border);
    background: var(--bg-card);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    margin-bottom: 10px;
}
.ct-reward-shop-btn .crs-icon { font-size: 24px; }
.ct-reward-shop-btn .crs-arrow { margin-left: auto; color: var(--text-pale); }

/* ===== 家长端：总览仪表盘 ===== */
.parent-home { padding: 12px 14px 30px; }
.parent-home h2 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 4px 0 10px;
}
.ph-card {
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid #e8e6e0;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-card);
}
.ph-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ph-card-title .ph-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--pink-main);
    cursor: pointer;
    border: none;
    background: none;
}
.ph-confirm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed #ece9e2;
}
.ph-confirm-row:last-child { border-bottom: none; }
.ph-confirm-name { width: 64px; font-size: 13px; font-weight: 600; color: var(--text-dark); flex-shrink: 0; }
.ph-confirm-title { flex: 1; font-size: 13px; color: var(--text-mid); }
.ph-confirm-pts { font-size: 13px; font-weight: 700; color: var(--pink-main); flex-shrink: 0; }
.ph-confirm-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.ph-confirm-btn.ok { background: #6d8b74; color: #fff; }
.ph-confirm-btn.no { background: #f0ebe4; color: #8a7b6d; }
.ph-child-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.ph-child-card {
    padding: 12px;
    border-radius: 12px;
    background: #faf9f6;
    border: 1px solid #ece9e2;
}
.ph-child-card .phc-name { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.ph-child-card .phc-meta { font-size: 12px; color: var(--text-mid); margin-top: 3px; }
.ph-child-card .phc-pts { font-size: 15px; font-weight: 800; color: var(--pink-main); margin-top: 6px; }
.ph-boss-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-mid);
}
.ph-boss-line img { width: 40px; height: 40px; border-radius: 8px; }
.ph-boss-line .phb-hp { flex: 1; }
.phb-hp-bg { height: 8px; border-radius: 999px; background: #ece9e2; overflow: hidden; margin-top: 5px; }
.phb-hp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #b05a5a, #d9816b); }

@media (max-width: 640px) {
    .child-home { padding-bottom: 84px; }
    .boss-banner-img { width: 70px; height: 70px; }
}
/* ===== 装扮商店 ===== */
.cosmetics-shop-modal{width:min(920px,94vw);height:min(760px,90dvh);display:flex;flex-direction:column;overflow:hidden;}
.cosmetics-tabs,.cosmetics-category-tabs{display:flex;overflow-x:auto;scrollbar-width:none;}
.cosmetics-shop-modal>.modal-header,.cosmetics-tabs{flex:0 0 auto;}
.cosmetics-tabs{gap:4px;padding:10px 18px;background:linear-gradient(135deg,#f1edff,#fff1f6);border-bottom:2px solid var(--clay-line);}
.cosmetics-tabs::-webkit-scrollbar,.cosmetics-category-tabs::-webkit-scrollbar{display:none;}
.cosmetics-tab{min-height:44px;border:0;border-radius:12px;background:transparent;color:#625475;font-weight:900;white-space:nowrap;cursor:pointer;padding:8px 20px;}
.cosmetics-tab.active{background:#fff;color:var(--purple-main);box-shadow:0 3px 10px rgba(92,71,150,.16);}
.cosmetics-category-tabs{gap:8px;}
.cosmetics-category-btn{min-height:44px;border:2px solid var(--clay-line);border-radius:999px;background:#fffdf8;color:var(--text-mid);font-weight:800;white-space:nowrap;cursor:pointer;padding:8px 16px;}
.cosmetics-category-btn.active{background:var(--pink-pale);border-color:var(--pink-main);color:var(--pink-main);}
.cosmetics-panel{display:none;flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 18px 20px;}
.cosmetics-panel.active{display:block;}
.cosmetics-category-tabs{margin-bottom:14px;}
.cosmetics-shop-grid,.cosmetics-wardrobe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.cosmetic-item-card,.cosmetic-clear-card{min-width:0;min-height:148px;border:2px solid var(--clay-line);border-radius:18px;background:#fffdf8;color:var(--text-dark);padding:9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit;}
.cosmetic-item-card.selected,.cosmetic-item-card.equipped{border-color:var(--pink-main);box-shadow:0 0 0 3px var(--pink-pale);}
.cosmetic-item-card small{color:var(--text-light);font-size:12px;}
.cosmetic-thumb{width:100%;height:94px;border-radius:12px;background:linear-gradient(145deg,#fff7ef,#f5ecff);overflow:hidden;display:grid;place-items:center;}
.cosmetic-thumb img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block;}
.cosmetic-thumb-background{width:min(100%,118px);height:auto;aspect-ratio:9/16;}
.cosmetic-thumb-petEffect{width:min(100%,118px);height:auto;aspect-ratio:1/1;}
.cosmetics-section-heading{font-weight:900;color:var(--text-dark);margin:18px 0 10px;}
.cosmetics-student-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
.cosmetics-student-btn{min-height:72px;border:2px solid var(--clay-line);background:white;border-radius:14px;color:var(--text-mid);display:grid;gap:2px;padding:8px;cursor:pointer;text-align:left;}
.cosmetics-student-btn.selected{border-color:#7c5cff;background:#f2efff;}
.cosmetics-student-btn:disabled{opacity:.58;cursor:not-allowed;}
.cosmetics-student-btn span,.cosmetics-student-btn small{font-size:12px;}
.cosmetics-footer{position:sticky;bottom:-20px;margin:18px -18px -20px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:rgba(255,253,248,.96);border-top:1px solid var(--clay-line);display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3;}
.cosmetics-selection-summary,.cosmetics-wallet-summary{font-size:13px;font-weight:800;color:var(--text-mid);}
.cosmetics-student-picker{display:flex;align-items:center;gap:10px;font-weight:800;margin-bottom:10px;}
.cosmetics-student-picker select{min-height:44px;flex:1;border:2px solid var(--clay-line);border-radius:12px;background:white;color:var(--text-dark);padding:6px 10px;font:inherit;}
.cosmetics-wallet-summary{margin-bottom:14px;background:#fff7d7;border-radius:12px;padding:10px;}
.cosmetic-clear-card{min-height:148px;justify-content:center;border-style:dashed;color:var(--text-light);}
.cosmetics-empty{grid-column:1/-1;padding:32px 16px;text-align:center;color:var(--text-light);background:#fffaf4;border:2px dashed var(--clay-line);border-radius:16px;}
.cosmetics-settings-hint{margin:0 0 12px;color:var(--text-light);}
.cosmetics-sets-hint{margin:0 0 14px;color:var(--text-light);}
.cosmetics-settings-section-title{margin:24px 0 6px;color:var(--text-dark);}
.cosmetics-settings-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 14px;}
.cosmetics-settings-toolbar button{min-height:44px;padding:8px 16px;border:2px solid var(--clay-line);border-radius:12px;background:#fff;color:var(--text-mid);font:inherit;font-weight:800;cursor:pointer;}
.cosmetics-settings-toolbar button:hover{border-color:var(--pink-main);color:var(--pink-main);}
.cosmetics-settings-list{display:grid;gap:8px;}
.cosmetics-setting-row{display:grid;grid-template-columns:58px minmax(120px,1fr) auto 104px 84px;align-items:center;gap:10px;border:1px solid var(--clay-line);border-radius:14px;background:#fffdf8;padding:8px;}
.cosmetics-setting-row>img{width:58px;height:58px;object-fit:contain;background:#f8f2ec;border-radius:10px;}
.cosmetics-setting-row>div{display:grid;gap:2px;}
.cosmetics-setting-row small{color:var(--text-light);}
.cosmetics-setting-row select,.cosmetics-setting-row input[type=number]{min-height:44px;min-width:0;border:2px solid var(--clay-line);border-radius:10px;background:white;color:var(--text-dark);padding:6px 8px;font:inherit;}
.cosmetics-switch{min-height:44px;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.cosmetics-switch input{width:20px;height:20px;}
.profile-section-tabs{display:flex;gap:0;border-bottom:1px solid #f0f0f0;margin:0 -20px;padding:0 20px;overflow-x:auto;scrollbar-width:none;}
.profile-section-tabs::-webkit-scrollbar{display:none;}
.profile-cosmetics-panel{padding:12px 0 16px;}

/* ===== 套装真实分层预览 ===== */
.cosmetic-sets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.cosmetics-shop-grid.cosmetics-set-offer-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.cosmetic-set-card{min-width:0;border:2px solid var(--clay-line);border-radius:20px;background:#fffdf8;padding:14px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 5px 0 rgba(240,214,181,.48);}
.cosmetic-set-offer{width:100%;color:inherit;font:inherit;cursor:pointer;}
.cosmetic-set-offer.selected{border-color:var(--pink-main);box-shadow:0 0 0 3px var(--pink-pale);}
.cosmetic-set-info>small{display:block;margin:-4px 0 8px;color:var(--purple-main);font-weight:800;}
.cosmetic-set-preview-card{position:relative;width:min(100%,170px);aspect-ratio:9/16;flex:0 0 auto;background:#fffaf4;overflow:visible;isolation:isolate;}
.cosmetic-set-preview-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.cosmetic-set-preview-pet-area{position:absolute;z-index:2;left:7%;right:7%;top:8%;height:67%;display:flex;align-items:center;justify-content:center;}
.cosmetic-set-preview-pedestal{position:absolute;z-index:1;left:4%;bottom:0;width:92%;height:34%;object-fit:contain;}
.cosmetic-set-preview-pet{position:relative;z-index:2;width:92%;height:92%;object-fit:contain;}
.cosmetic-set-preview-effect{position:absolute;z-index:3;left:-12%;top:-12%;width:124%;height:124%;object-fit:contain;}
.cosmetic-set-preview-progress{position:absolute;z-index:4;left:8%;right:8%;bottom:15%;height:5px;border-radius:999px;background:rgba(255,255,255,.74);overflow:hidden;}
.cosmetic-set-preview-progress span{display:block;width:72%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink-main),var(--clay-gold));}
.cosmetic-set-preview-name{position:absolute;z-index:4;left:12%;right:12%;bottom:5%;height:8%;display:grid;place-items:center;}
.cosmetic-set-preview-name img{position:absolute;inset:-55% -15%;width:130%;height:210%;object-fit:fill;z-index:-1;}
.cosmetic-set-preview-name strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#543e61;}
.cosmetic-set-preview-frame{position:absolute;z-index:6;left:-4.893%;top:-3.488%;width:110.092%;height:106.312%;object-fit:fill;pointer-events:none;}
.cosmetic-set-info{width:100%;text-align:center;}
.cosmetic-set-info h3{margin:0;color:var(--text-dark);font-size:18px;}
.cosmetic-set-info p{min-height:38px;margin:5px 0 10px;color:var(--text-light);font-size:13px;line-height:1.45;}
.cosmetic-set-items{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;}
.cosmetic-set-items span{padding:4px 7px;border-radius:999px;background:#f3efff;color:#655781;font-size:11px;font-weight:700;}

/* ===== 孩子卡片装扮稳定分层 ===== */
.card-cosmetic-background,.card-cosmetic-frame{position:absolute;pointer-events:none;}
.card-cosmetic-background{inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.card-cosmetic-background~.card-top-bar,.card-cosmetic-background~.card-pet-area,
.card-cosmetic-background~.card-name-row,.card-cosmetic-background~.card-progress-area,
.card-cosmetic-background~.card-stats-row{position:relative;z-index:2;}
.card-cosmetic-frame{inset:0;width:100%;height:100%;object-fit:fill;z-index:7;}
.student-card.has-cosmetic-frame{overflow:visible;border-width:0;padding:calc(14px * var(--card-scale,1));border-radius:0;box-shadow:0 10px 24px rgba(92,64,76,.16);}
.student-card.has-cosmetic-frame:hover{box-shadow:0 14px 30px rgba(92,64,76,.2);}
.student-card.has-cosmetic-frame:active{box-shadow:0 7px 18px rgba(92,64,76,.16);}
.student-card.has-cosmetic-frame .card-cosmetic-background{border-radius:inherit;}
.student-card.has-cosmetic-frame .card-cosmetic-frame{inset:auto;left:-4.893%;top:-3.488%;width:110.092%;height:106.312%;}
.student-card.has-cosmetic-frame>.card-top-bar,
.student-card.has-cosmetic-frame>.card-pet-area,
.student-card.has-cosmetic-frame>.card-progress-area,
.student-card.has-cosmetic-frame>.card-stats-row{position:relative;z-index:9;}
.student-card.has-cosmetic-frame .card-level-badge{background:transparent;border-color:transparent;box-shadow:none;}
.card-cosmetic-pedestal{position:absolute;z-index:1;width:92%;height:34%;object-fit:contain;left:4%;bottom:2%;pointer-events:none;}
.card-pet-emoji,.card-pet-egg-wrap{position:relative;z-index:2;}
.card-cosmetic-effect{position:absolute;z-index:3;width:124%;height:124%;object-fit:contain;pointer-events:none;animation:cosmeticAuraPulse 2.8s ease-in-out infinite;}
.card-bubble-pet{z-index:4;}
.card-top-bar-actions{justify-content:flex-end;}
.card-pet-area.has-pet-name{padding-bottom:calc(22px * var(--card-scale,1));}
.card-pet-meta{position:absolute;z-index:9;left:50%;bottom:0;max-width:96%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;text-align:center;font-size:calc(11px * var(--card-scale,1));font-weight:800;color:var(--text-light);text-shadow:0 1px rgba(255,255,255,.9);}
.card-pet-name,.card-pet-rank-name{overflow:hidden;text-overflow:ellipsis;}
.card-pet-name{flex:0 1 auto;}
.card-pet-rank-name{flex:0 0 auto;}
.card-name-row{position:relative;z-index:4;min-height:calc(22px * var(--card-scale,1));align-items:center;}
.student-card:not(.group-pet-card) .card-stats-row{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);column-gap:calc(5px * var(--card-scale,1));}
.student-card:not(.group-pet-card) .card-stat-item:first-child{grid-column:1;grid-row:1;justify-self:start;}
.student-card:not(.group-pet-card) .card-stat-student{grid-column:2;grid-row:1;}
.student-card:not(.group-pet-card) .card-stat-medals{grid-column:3;grid-row:1;justify-self:end;}
.student-card:not(.group-pet-card) .card-stat-dormant,
.student-card:not(.group-pet-card) .card-stat-hungry{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:calc(4px * var(--card-scale,1));}
.card-stat-student{position:relative;z-index:0;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;}
.card-stat-student .card-student-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-cosmetic-nameplate{position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:124.8%;height:214.5%;object-fit:fill;pointer-events:none;}
.card-cosmetic-nameplate~.card-student-name{padding:0 12%;color:#784d56;text-shadow:0 1px #fff;}

@keyframes cosmeticAuraPulse{50%{transform:scale(1.04);opacity:.82;}}
@media(prefers-reduced-motion:reduce){
    .card-cosmetic-effect{animation:none;opacity:.88;}
}

@media(max-width:640px){
    .cosmetics-shop-modal{width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;}
    .cosmetics-tabs{padding-inline:12px;}
    .cosmetics-panel{padding:12px 12px calc(20px + env(safe-area-inset-bottom));}
    .cosmetics-shop-grid,.cosmetics-wardrobe-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cosmetics-student-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cosmetic-item-card,.cosmetic-clear-card{min-height:142px;}
    .cosmetics-footer{bottom:calc(-20px - env(safe-area-inset-bottom));margin-inline:-12px;padding-inline:12px;}
    .cosmetics-setting-row{grid-template-columns:50px minmax(0,1fr) auto;}
    .cosmetics-setting-row>img{width:50px;height:50px;grid-row:1/3;}
    .cosmetics-setting-row select,.cosmetics-setting-row input[type=number]{grid-row:2;}
    .cosmetics-setting-row select{grid-column:2;}
    .cosmetics-setting-row input[type=number]{grid-column:3;width:64px;}
    .cosmetic-sets-grid{grid-template-columns:1fr;}
    .cosmetics-shop-grid.cosmetics-set-offer-grid{grid-template-columns:1fr;}
    .cosmetic-set-card{display:grid;grid-template-columns:124px minmax(0,1fr);align-items:center;text-align:left;}
    .cosmetic-set-preview-card{width:124px;}
    .cosmetic-set-info{text-align:left;}
    .cosmetic-set-info p{min-height:0;}
    .cosmetic-set-items{justify-content:flex-start;}
}
/* Clay UI rollout layer: keeps the redesign scoped and easy to remove. */

:root {
    --ui-icons-version: 20260620;
    --clay-green: #26a96c;
    --clay-green-soft: #e9fff4;
    --clay-blue: #2477b8;
    --clay-blue-soft: #e8f5ff;
    --clay-red: #d93d50;
    --clay-red-soft: #fff0f2;
}

/* Shared shells */
.modal-overlay {
    background: rgba(50, 35, 58, 0.42);
    backdrop-filter: blur(4px);
}

.modal-box,
.lottery-box,
.qb-panel,
.aq-panel,
.numpad-box {
    background: var(--clay-surface);
    border: 3px solid var(--clay-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
}

.modal-header,
.lottery-header,
.qb-header,
.aq-header {
    background: linear-gradient(135deg, #fff7d7, #fff1f6);
    border-bottom: 3px solid var(--clay-line);
}

.modal-title,
.qb-title,
.aq-title,
.lottery-student-name-big {
    color: var(--clay-ink);
    font-weight: 900;
}

.modal-footer,
.aq-footer,
.fb-active-footer {
    border-top: 3px solid var(--clay-line);
    background: rgba(255, 247, 233, 0.78);
}

.modal-close-btn,
.modal-close-btn-white,
.qb-btn-close,
.aq-close {
    width: 40px;
    height: 40px;
    border: 2px solid var(--clay-line);
    border-radius: var(--radius-full);
    background: #fffdf8;
    color: var(--text-mid);
    box-shadow: 0 4px 0 rgba(240, 214, 181, 0.7);
    transition: transform 0.2s var(--clay-press), box-shadow 0.2s var(--clay-press), background 0.2s;
}

.modal-close-btn:hover,
.modal-close-btn-white:hover,
.qb-btn-close:hover,
.aq-close:hover {
    background: #fff1f6;
    color: var(--pink-dark);
    transform: translateY(-2px);
}

.modal-close-btn:active,
.modal-close-btn-white:active,
.qb-btn-close:active,
.aq-close:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(240, 214, 181, 0.7);
}

/* Forms and tabs */
.form-label,
.aq-field label,
.lottery-select-label,
.shop-step-label,
.group-auto-label {
    color: var(--text-mid);
    font-weight: 800;
}

.form-input,
.form-textarea,
.aq-field select,
.aq-field textarea,
.aq-field input[type="text"],
.aq-opt-row input,
.fb-exam-count-input,
.fb-exam-name-input,
.fb-score-input,
.fb-medal-input,
.group-count-input,
.group-edit-name-input,
.shop-name-input,
.shop-cost-input,
.lottery-prize-name,
.lottery-prize-type,
.lottery-prize-amount,
.lottery-prize-count,
.numpad-display {
    min-height: 44px;
    border: 2px solid var(--clay-line);
    border-radius: var(--radius-md);
    background: #fffdf8;
    box-shadow: inset 0 -2px 0 rgba(240, 214, 181, 0.46);
}

.form-input:focus,
.form-textarea:focus,
.aq-field select:focus,
.aq-field textarea:focus,
.aq-field input:focus,
.fb-score-input:focus {
    border-color: var(--pink-main);
    box-shadow: 0 0 0 4px rgba(255, 92, 159, 0.12), inset 0 -2px 0 rgba(240, 214, 181, 0.46);
}

.shop-tabs,
.scoring-page-tabs,
.fb-lb-tab-row,
.qb-filters {
    border-bottom: 3px solid var(--clay-line);
    background: rgba(255, 253, 248, 0.72);
}

.shop-tab-btn,
.scoring-page-tab-btn,
.fb-lb-tab-btn,
.gd-tab-btn {
    min-height: 44px;
    font-weight: 900;
    color: var(--text-mid);
}

.shop-tab-btn.active,
.scoring-page-tab-btn.active,
.fb-lb-tab-btn.active,
.gd-tab-btn.active {
    color: var(--pink-dark);
    border-color: var(--pink-main);
}

/* Shared buttons */
.qb-btn,
.aq-btn-cancel,
.aq-btn-submit,
.shop-confirm-btn,
.shop-add-btn,
.shop-delete-btn,
.shop-icon-btn,
.lottery-save-btn,
.fb-btn-secondary,
.fb-btn-settle,
.fb-btn-end,
.fb-export-all-btn,
.group-mode-btn,
.group-auto-btn,
.batch-select-all-btn,
.batch-add-btn,
.batch-reset-btn,
.batch-exit-btn,
.numpad-btn,
.bam-skip-btn,
.bam-done-btn {
    min-height: 44px;
    border: 2px solid var(--clay-line);
    border-radius: var(--radius-full);
    font-weight: 900;
    transition: transform 0.2s var(--clay-press), box-shadow 0.2s var(--clay-press), background 0.2s;
}

.qb-btn,
.aq-btn-cancel,
.fb-btn-secondary,
.fb-export-all-btn,
.batch-select-all-btn,
.batch-exit-btn,
.numpad-btn {
    background: #fffdf8;
    color: var(--text-mid);
    box-shadow: 0 5px 0 rgba(240, 214, 181, 0.7);
}

.aq-btn-submit,
.lottery-save-btn,
.fb-btn-settle,
.group-auto-btn,
.bam-done-btn,
.numpad-btn.numpad-confirm {
    background: linear-gradient(135deg, var(--pink-main), #ff8dbb);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 6px 0 #d62972;
}

.batch-add-btn,
.qb-btn-import {
    background: var(--clay-green-soft);
    color: var(--clay-green);
    border-color: #a7e8c7;
    box-shadow: 0 5px 0 #a7e8c7;
}

.batch-reset-btn,
.fb-btn-end,
.numpad-btn.numpad-del {
    background: var(--clay-red-soft);
    color: var(--clay-red);
    border-color: #ffc5cf;
    box-shadow: 0 5px 0 #ffc5cf;
}

.qb-btn:hover,
.aq-btn-cancel:hover,
.aq-btn-submit:hover:not(:disabled),
.shop-confirm-btn:hover:not(:disabled),
.lottery-save-btn:hover,
.fb-btn-secondary:hover,
.fb-btn-settle:hover,
.fb-export-all-btn:hover,
.group-auto-btn:hover,
.batch-select-all-btn:hover,
.batch-add-btn:hover,
.batch-reset-btn:hover,
.batch-exit-btn:hover,
.numpad-btn:hover,
.bam-skip-btn:hover,
.bam-done-btn:hover {
    transform: translateY(-2px);
}

/* Batch mode */
.batch-checkbox {
    width: 28px;
    height: 28px;
    border: 3px solid var(--clay-line);
    box-shadow: 0 3px 0 rgba(240, 214, 181, 0.72);
}

.batch-checkbox.checked {
    background: linear-gradient(135deg, var(--pink-main), #ff8dbb);
    border-color: #fff;
}

.student-card.batch-selected {
    border-color: var(--pink-main);
    box-shadow: 0 0 0 4px rgba(255, 92, 159, 0.16), var(--shadow-hover);
}

.batch-float-bar {
    background: var(--clay-surface);
    border: 3px solid var(--clay-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    padding: 12px 18px;
}

/* Leaderboard */
.lb-row,
.fb-lb-row,
.fb-final-rank-row {
    margin: 8px 0;
    border: 2px solid var(--clay-line);
    border-radius: var(--radius-lg);
    background: #fffdf8;
    box-shadow: 0 5px 0 rgba(240, 214, 181, 0.52);
}

.lb-row:hover,
.fb-lb-row:hover {
    background: #fff1f6;
}

.lb-rank,
.fb-lb-rank,
.fb-rank-num {
    font-weight: 900;
}

.lb-rank.top1,
.fb-lb-row.rank-1 .fb-lb-rank,
.fb-rank-num.rank-1 {
    color: #d88a00;
}

.lb-points,
.fb-lb-val {
    color: var(--pink-dark);
    font-weight: 900;
}

/* Shop */
.shop-item-card,
.shop-student-card,
.profile-medal-item,
.profile-pet-item,
.gps-pet-item {
    border: 3px solid var(--clay-line);
    border-radius: var(--radius-lg);
    background: #fffdf8;
    box-shadow: 0 6px 0 rgba(240, 214, 181, 0.58);
    transition: transform 0.2s var(--clay-press), box-shadow 0.2s var(--clay-press), border-color 0.2s;
}

.shop-item-card:hover,
.shop-student-card:hover,
.profile-medal-item:hover,
.profile-pet-item:hover,
.gps-pet-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 rgba(240, 214, 181, 0.58), 0 14px 24px rgba(50, 35, 58, 0.1);
}

.shop-item-card.selected,
.shop-student-card.selected {
    border-color: var(--pink-main) !important;
    box-shadow: 0 0 0 4px rgba(255, 92, 159, 0.14), 0 6px 0 #ffc1d9 !important;
}

.shop-confirm-btn {
    background: linear-gradient(135deg, #ffd66b, #ff9f43);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 6px 0 #d88a00;
}

/* Lottery and classroom tools */
.lottery-type-card,
.lottery-student-list,
.lottery-scratch-tile,
.lottery-prize-row,
.group-auto-section,
.group-edit-zone,
.group-icon-picker {
    border: 3px solid var(--clay-line);
    border-radius: var(--radius-lg);
    background: #fffdf8;
    box-shadow: 0 6px 0 rgba(240, 214, 181, 0.54);
}

.lottery-type-card:hover,
.lottery-type-card.active,
.lottery-student-item.selected {
    border-color: var(--pink-main);
    background: #fff1f6;
}

.lottery-tile {
    border-radius: var(--radius-lg);
    transition: transform 0.2s var(--clay-press), box-shadow 0.2s var(--clay-press);
}

.lottery-tile:hover {
    transform: translateY(-3px) scale(1.02);
}

.lottery-tile.lottery-tile-winner {
    box-shadow: 0 0 0 4px var(--pink-main), 0 10px 0 #ffc1d9, 0 18px 30px rgba(255, 92, 159, 0.26);
}

.scratch-cover {
    background: linear-gradient(135deg, #c7b7ff, #9fd7ff);
    border: 3px solid #fff;
    color: #fff;
}

.lottery-egg-tile {
    box-shadow: inset 0 -8px 0 rgba(216, 138, 0, 0.28), 0 8px 0 #e5b84d, 0 16px 26px rgba(255, 214, 107, 0.35);
}

/* Final battle, group, task and question bank */
.fb-boss-bar {
    border: 3px solid #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 0 rgba(35, 25, 50, 0.28), 0 18px 34px rgba(50, 35, 58, 0.22);
}

.fb-setup-boss-preview,
.fb-exam-card,
.fb-score-panel-header,
.fb-score-table th,
.fb-score-table td,
.gd-member-card,
.gd-score-cell,
.gd-correction-cell,
.profile-exam-btn,
.qb-card,
.qb-filter-btn {
    border: 2px solid var(--clay-line);
    border-radius: var(--radius-md);
    background: #fffdf8;
}

.fb-exam-card,
.profile-exam-btn,
.qb-filter-btn {
    box-shadow: 0 4px 0 rgba(240, 214, 181, 0.58);
    transition: transform 0.2s var(--clay-press), box-shadow 0.2s var(--clay-press), background 0.2s;
}

.fb-exam-card:hover,
.profile-exam-btn:hover,
.qb-filter-btn:hover {
    transform: translateY(-2px);
}

.fb-exam-card.selected,
.profile-exam-btn.has-score,
.qb-filter-btn.active,
.group-mode-btn.active {
    background: var(--purple-light);
    border-color: var(--purple-main);
    color: var(--purple-main);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12), 0 4px 0 #c7b7ff;
}

.fb-exam-card.settled,
.gd-score-cell.has-val,
.gd-correction-cell.corrected {
    background: var(--clay-green-soft);
    border-color: #a7e8c7;
}

.qb-card {
    box-shadow: 0 5px 0 rgba(240, 214, 181, 0.5);
}

.qb-tag {
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-full);
    font-weight: 900;
}

.qb-delete-btn {
    min-height: 34px;
    border: 2px solid #ffc5cf;
    border-radius: var(--radius-full);
    background: var(--clay-red-soft);
    color: var(--clay-red);
    font-weight: 900;
}

/* Feedback and motion */
.toast-container .toast,
.toast {
    border: 3px solid var(--clay-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
}

.score-float-text {
    text-shadow: 0 3px 0 #fff, 0 8px 18px rgba(50, 35, 58, 0.22);
}

.score-float-positive {
    color: var(--clay-green);
}

.score-float-negative {
    color: var(--clay-red);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    .nav-bar {
        left: 8px;
        right: 8px;
        top: 8px;
        height: 56px;
        border-radius: 20px;
    }

    .page-main {
        margin-top: 74px;
        padding-inline: 10px;
    }

    .modal-overlay,
    .question-bank-overlay,
    .add-question-overlay {
        padding: 10px;
    }

    .modal-body,
    .shop-tab-content,
    .aq-body {
        padding: 16px;
    }

    .modal-footer,
    .aq-footer {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .btn-cancel,
    .btn-confirm,
    .aq-btn-cancel,
    .aq-btn-submit {
        flex: 1 1 140px;
    }
}
/* Final mobile overrides: imported after the desktop clay theme. */
@media (max-width: 640px) {
  .nav-bar {
    top: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-top));
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    border: 0;
    border-bottom: 1px solid var(--clay-line);
    border-radius: 0;
    background: rgba(255,253,248,.96);
    box-shadow: 0 4px 18px rgba(50,35,58,.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-logo {
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    background: #fff1f6;
  }
  .nav-logo span:not(.nav-logo-icon) { display: none; }
  .page-main {
    margin-top: calc(60px + env(safe-area-inset-top));
    padding: 16px 12px calc(96px + env(safe-area-inset-bottom));
    min-height: calc(100dvh - 60px);
  }
  .class-info-bar {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-width: 1px;
    border-radius: 18px;
    box-shadow: none;
    background: rgba(255,253,248,.94);
  }
  .student-grid { grid-template-columns: repeat(var(--card-cols, 2), minmax(0, 1fr)) !important; gap: 10px !important; }
  .student-card {
    aspect-ratio: 9 / 16;
    min-height: 0;
    padding: calc(12px * var(--card-scale, 1));
    border-width: calc(2px * var(--card-scale, 1));
    border-radius: calc(22px * var(--card-scale, 1));
    box-shadow: 0 5px 16px rgba(50,35,58,.08);
  }
  .student-card:hover { transform: none; box-shadow: 0 5px 16px rgba(50,35,58,.08); }
  .student-card:active { transform: scale(.985); }
  .card-pet-area { min-height: 0; margin-bottom: calc(6px * var(--card-scale, 1)); animation: none; }
  .card-student-name { font-size: calc(13px * var(--card-scale, 1)); }
  .card-pet-type,
  .card-progress-label,
  .card-stat-item { font-size: calc(11px * var(--card-scale, 1)); }
  .card-heart-btn {
    min-width: calc(22px * var(--card-scale, 1));
    min-height: calc(22px * var(--card-scale, 1));
    margin: 0;
    box-shadow: none;
  }
  .sort-batch-bar {
    margin-bottom: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    overflow: visible;
    border-width: 1px;
    border-radius: 16px;
    box-shadow: none;
  }
  .student-action-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    overflow: visible;
  }
  .student-action-row .sort-btn,
  .student-action-row .batch-enter-btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 4px 3px;
    border-width: 1px;
    font-size: 10px;
    white-space: nowrap;
    box-shadow: none;
  }
  .student-action-row > button:nth-of-type(1),
  .student-action-row > button:nth-of-type(2) { grid-column: span 2; }
  .student-action-row > button:nth-of-type(3),
  .student-action-row > button:nth-of-type(4) { grid-column: span 3; }
  .student-action-row > button:nth-of-type(5) { grid-column: span 2; }
  .student-action-row .sort-label,
  .student-action-row .sort-bar-divider { display: none; }
  .find-zoom-group {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
  }
  .find-student-btn {
    grid-column: span 5;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 6px 4px;
    border-width: 1px;
    font-size: 11px;
    white-space: nowrap;
    box-shadow: none;
  }
  .find-zoom-group > .batch-enter-btn {
    grid-column: span 3;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 6px 3px;
    border-width: 1px;
    font-size: 11px;
    white-space: nowrap;
    box-shadow: none;
  }
  .find-zoom-group > .zoom-ctrl { display: contents; }
  .zoom-btn {
    grid-column: span 2;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 6px 2px;
    border-width: 1px;
    font-size: 11px;
    box-shadow: none;
  }
  #scoringPanelModal { align-items: flex-end; padding: 0; }
  #scoringPanelModal .modal-box { width: 100%; max-width: none !important; border-radius: 24px 24px 0 0; }
}

@media (max-width: 370px) {
  .mobile-nav-item { font-size: 10px; }
}
/* Family workspace redesign — single visual source of truth loaded after legacy styles. */
:root {
  --workspace-pink: #e63278;
  --workspace-pink-bright: #ff5c9f;
  --workspace-pink-deep: #b9205d;
  --workspace-purple: #7057d9;
  --workspace-purple-deep: #5037b2;
  --workspace-blue: #3c9ee8;
  --workspace-blue-deep: #2374b6;
  --workspace-yellow: #ffc84a;
  --workspace-yellow-deep: #d79618;
  --workspace-orange: #ff7c52;
  --workspace-orange-deep: #cf4f2b;
  --workspace-green: #36b98a;
  --workspace-green-deep: #21835f;
  --workspace-cream: #fff7e8;
  --workspace-surface: #fffefb;
  --workspace-ink: #2d2138;
  --workspace-muted: #74697c;
  --workspace-line: #f0dcca;
  --workspace-radius-sm: 12px;
  --workspace-radius-md: 18px;
  --workspace-radius-lg: 24px;
  --workspace-radius-xl: 30px;
  --workspace-shadow-card: 0 6px 0 rgba(221, 190, 158, .62), 0 18px 38px rgba(75, 48, 67, .08);
  --workspace-shadow-float: 0 10px 0 rgba(217, 183, 147, .66), 0 26px 56px rgba(58, 38, 61, .18);
  --workspace-ease: cubic-bezier(.22, 1, .36, 1);
  --workspace-press: 120ms;
  --workspace-state: 180ms;
  --workspace-modal: 240ms;
  --mobile-nav-ink: #12131a;
  --workspace-action-primary: linear-gradient(145deg, var(--workspace-pink-bright), var(--pink-main));
  --workspace-action-danger: #c94454;
  --workspace-action-danger-deep: #962d3b;
  --workspace-action-success: #237f5c;
  --workspace-action-warning: #9a6100;
}

/* Candidate-task category tabs share the same compact control across desktop and mobile. */
.task-template-category-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 12px;
}
.task-template-category-tabs .task-template-library-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.task-template-category-tabs .task-template-library-actions .v-btn {
  min-height: 44px;
  padding: 8px 14px;
  white-space: nowrap;
}
.task-template-select-label-short { display: none; }
.task-template-category-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  color: var(--text-mid);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform var(--workspace-press) ease, background var(--workspace-state), color var(--workspace-state), border-color var(--workspace-state);
}
.task-template-category-tab .workspace-image-icon { width: 21px; height: 21px; }
.task-template-category-tab:hover { transform: translateY(-1px); }
.task-template-category-tab:active { transform: translateY(1px); }
.task-template-category-tab.active {
  border-color: #e8c5d5;
  color: var(--workspace-pink-deep);
  background: var(--pink-pale);
  box-shadow: 0 3px 0 #edc9d8;
}
.task-template-empty {
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px dashed var(--workspace-line);
  border-radius: 14px;
  color: var(--text-light);
  background: #fffafc;
  font-size: 13px;
  text-align: center;
}
@media (max-width: 820px) {
  .task-template-category-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
  }
  .task-template-category-tab { width: 100%; min-width: 0; padding-inline: 4px; }
  .task-template-category-tabs .task-template-library-actions {
    display: contents;
  }
  .task-template-category-tabs .task-template-library-actions .v-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 6px 4px;
    font-size: 12px;
  }
  .task-template-select-action {
    color: var(--workspace-purple-deep) !important;
    border-color: #d8cff8 !important;
    background: var(--purple-light) !important;
    box-shadow: 0 3px 0 #d1c5f4 !important;
  }
  .task-template-select-label-full { display: none; }
  .task-template-select-label-short { display: inline; }
  .task-template-library-actions .danger { grid-column: 1 / -1; }
}

.workspace-image-icon {
  width: 1.55em;
  height: 1.55em;
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  place-items: center;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.workspace-image-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

body[data-family-role="parent"] {
  --pink-main: var(--workspace-pink);
  --pink-dark: var(--workspace-pink-deep);
  --pink-light: #ffc0d8;
  --pink-pale: #fff0f6;
  --pink-border: #f5d1df;
  --purple-main: var(--workspace-purple);
  --purple-light: #eeeaff;
  --bg-page: var(--workspace-cream);
  --bg-card: var(--workspace-surface);
  --bg-nav: rgba(255, 254, 251, .96);
  --text-dark: var(--workspace-ink);
  --text-mid: var(--workspace-muted);
  --text-light: #94889c;
  --radius-md: var(--workspace-radius-sm);
  --radius-lg: var(--workspace-radius-md);
  --radius-xl: var(--workspace-radius-lg);
  --shadow-card: var(--workspace-shadow-card);
}

body[data-family-role="child"] {
  --pink-main: #7956e8;
  --pink-dark: #5536b8;
  --pink-light: #cfc2ff;
  --pink-pale: #f2efff;
  --pink-border: #dcd4ff;
  --purple-main: #ff5c87;
  --purple-light: #ffe6ef;
  --bg-page: #f6f1ff;
  --bg-card: #fffefe;
  --bg-nav: rgba(255, 254, 255, .97);
  --text-dark: #2d2340;
  --text-mid: #746987;
}

body[data-family-role="child"][data-theme="boy"] {
  --pink-main: #287fc8;
  --pink-dark: #165d99;
  --pink-light: #a9ddf7;
  --pink-pale: #eaf8ff;
  --pink-border: #c8e9f7;
  --purple-main: #17a58e;
  --purple-light: #dcfaf3;
  --bg-page: #eef9fb;
}

html { background: var(--workspace-cream); }

body {
  min-width: 0;
  overflow: hidden;
  background: var(--bg-page);
  color: var(--text-dark);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pink-main) 42%, transparent);
  outline-offset: 3px;
}

.app-shell {
  min-height: 100dvh;
  height: 100dvh;
  background: var(--bg-page);
}

.mobile-app-bar,
.mobile-bottom-nav,
.mobile-more-overlay { display: none; }

.side-nav {
  flex: 0 0 224px;
  padding: 18px 14px 14px;
  gap: 10px;
  background: var(--bg-nav);
  border-right: 1px solid color-mix(in srgb, var(--workspace-line) 88%, white);
  box-shadow: 10px 0 36px rgba(87, 59, 72, .05);
  z-index: 30;
}

.sn-brand {
  min-height: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding: 10px 8px 16px;
  margin: 0 0 8px;
  color: var(--workspace-ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--workspace-line);
}

.sn-brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--workspace-pink-bright), var(--workspace-pink));
  border: 2px solid #fff;
  border-radius: 15px;
  box-shadow: 0 5px 0 var(--workspace-pink-deep), 0 9px 18px rgba(230, 50, 120, .2);
}
.sn-brand-mark .ui-svg-icon { width: 23px; height: 23px; }
.sn-brand-mark .workspace-image-icon { width: 34px; height: 34px; }
.sn-brand-copy { min-width: 0; display: flex; flex-direction: column; }
.sn-brand-name { font-size: 17px; line-height: 1.25; }
.sn-brand-sub { margin-top: 3px; font-size: 11px; letter-spacing: .04em; color: var(--text-light); }

.sn-list { gap: 7px; padding: 2px 0; }
.sn-item {
  min-height: 52px;
  padding: 8px 10px;
  gap: 11px;
  border-radius: 17px;
  color: var(--text-mid);
  font-size: 14px;
  font-weight: 800;
  transition: transform var(--workspace-press) ease, background var(--workspace-state), color var(--workspace-state), box-shadow var(--workspace-state);
}
.sn-item:hover { background: color-mix(in srgb, var(--pink-pale) 72%, white); transform: translateX(2px); }
.sn-item:active { transform: translateY(2px); }
.sn-item.active { color: var(--workspace-ink); background: #fff; box-shadow: 0 5px 0 var(--workspace-line), 0 12px 24px rgba(69, 45, 65, .08); }
.sn-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--workspace-pink);
}
.sn-icon .ui-svg-icon { width: 19px; height: 19px; }
.sn-icon.generated { background: transparent !important; }
.sn-icon.generated .workspace-image-icon { width: 35px; height: 35px; }
.sn-item[data-tone="purple"] .sn-icon { background: var(--workspace-purple); }
.sn-item[data-tone="blue"] .sn-icon { background: var(--workspace-blue); }
.sn-item[data-tone="yellow"] .sn-icon { color: #5d3a00; background: var(--workspace-yellow); }
.sn-item[data-tone="orange"] .sn-icon { background: var(--workspace-orange); }
.sn-item[data-tone="green"] .sn-icon { background: var(--workspace-green); }
.sn-item.active[data-tone="pink"] { color: var(--workspace-pink-deep); }
.sn-item.active[data-tone="purple"] { color: var(--workspace-purple-deep); }
.sn-item.active[data-tone="blue"] { color: var(--workspace-blue-deep); }
.sn-item.active[data-tone="yellow"] { color: #8b5a00; }
.sn-item.active[data-tone="orange"] { color: var(--workspace-orange-deep); }
.sn-item.active[data-tone="green"] { color: var(--workspace-green-deep); }
.sn-badge, .mobile-task-badge {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 2px solid #fff;
  background: var(--workspace-orange);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  box-shadow: 0 2px 0 var(--workspace-orange-deep);
}

.sn-footer { gap: 10px; padding-top: 14px; border-color: var(--workspace-line); }
.sn-account-entry { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--workspace-line); border-radius: 16px; color: var(--workspace-ink); background: #fff; box-shadow: 0 4px 0 var(--workspace-line); font: inherit; text-align: left; cursor: pointer; }
.sn-account-entry:hover { border-color: var(--pink-light); background: #fff8fb; }.sn-account-entry:active { transform: translateY(1px); box-shadow: 0 3px 0 var(--workspace-line); }
.sn-account-entry-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: var(--pink-pale); }.sn-account-entry-icon .workspace-image-icon { width: 22px; height: 22px; }
.sn-account-entry > span:last-child { min-width: 0; display: grid; gap: 1px; }.sn-account-entry strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.sn-account-entry small { overflow: hidden; color: var(--text-light); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sn-role-btn {
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  padding: 7px 10px;
  text-align: left;
  border: 1px solid var(--workspace-line);
  border-radius: 16px;
  color: var(--workspace-ink);
  background: #fff;
  box-shadow: 0 4px 0 var(--workspace-line);
}
.sn-role-btn .ui-svg-icon { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--pink-main); }
.sn-role-btn .workspace-image-icon { grid-row: 1 / 3; width: 30px; height: 30px; }
.sn-role-btn span { font-size: 13px; font-weight: 900; line-height: 1.1; }
.sn-role-btn small { font-size: 10px; color: var(--text-light); line-height: 1.1; }

.app-main {
  position: relative;
  background:
    radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--workspace-blue) 17%, transparent) 0, transparent 28%),
    radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--workspace-yellow) 20%, transparent) 0, transparent 30%),
    linear-gradient(145deg, var(--bg-page), color-mix(in srgb, var(--bg-page) 78%, #f3ecff));
  scrollbar-gutter: stable;
}
#viewRoot { width: 100%; max-width: 1320px; padding: 22px 34px 60px; }

.workspace-page-header {
  min-height: 74px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.workspace-page-copy h1 { margin: 0 0 4px; font-size: clamp(27px, 3vw, 38px); line-height: 1.08; letter-spacing: -.035em; color: var(--workspace-ink); }
.workspace-page-copy p { margin: 0; color: var(--text-mid); font-size: 14px; }
.workspace-page-header .workspace-eyebrow { display: none; }
.workspace-eyebrow {
  display: block;
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.workspace-primary-action { min-width: 132px; }
.mobile-calendar-disclosure,
.mobile-month-calendar,
.week-month-toggle { display: none; }

.workspace-segments {
  width: fit-content;
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid var(--workspace-line);
  border-radius: 18px;
}
.parent-task-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, 370px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
}
.parent-task-toolbar .workspace-segments { grid-column: 1; margin-bottom: 0; }
.parent-task-toolbar .workspace-primary-action { grid-column: 2; justify-self: start; }
.workspace-segment {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 17px;
  border: 0;
  border-radius: 13px;
  color: var(--text-mid);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.workspace-segment .ui-svg-icon { width: 18px; height: 18px; }
.workspace-segment.active { color: #fff; background: linear-gradient(145deg, var(--workspace-pink-bright), var(--workspace-pink)); box-shadow: 0 4px 0 var(--workspace-pink-deep); }

.v-card,
.pet-panel,
.game-card,
.cos-cell,
.wallet-cell,
.f-card,
.p-boss-row {
  border: 1px solid color-mix(in srgb, var(--workspace-line) 88%, white);
  border-radius: var(--workspace-radius-md);
  background: var(--bg-card);
  box-shadow: var(--workspace-shadow-card);
}
.v-card { padding: 20px; margin-bottom: 18px; }
.v-card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; font-size: 17px; line-height: 1.35; color: var(--workspace-ink); }
.v-card-title > small,
.v-card-title > .v-card-title-action { margin-left: auto; }
.v-card-title > .ui-svg-icon,
.v-card-title > span > .ui-svg-icon { width: 20px; height: 20px; color: var(--pink-main); }
.v-empty { padding: 54px 20px; font-size: 15px; color: var(--text-mid); }

.v-btn,
.btn-solid-pink,
.auth-btn-primary,
.primary-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 17px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--workspace-pink-bright), var(--pink-main));
  box-shadow: 0 5px 0 var(--pink-dark), 0 10px 20px color-mix(in srgb, var(--pink-main) 20%, transparent);
  font-size: 13px;
  font-weight: 900;
  transition: transform var(--workspace-press) ease, box-shadow var(--workspace-press) ease, filter var(--workspace-state);
}
.v-btn .ui-svg-icon { width: 17px; height: 17px; }
.v-btn:hover { filter: saturate(1.06) brightness(1.02); transform: translateY(-1px); }
.v-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pink-dark); }
.v-btn.small { min-height: 44px; padding: 7px 13px; font-size: 12px; border-radius: 12px; }
.v-btn.ghost,
.secondary-button {
  color: var(--text-mid);
  background: #fff;
  border-color: var(--workspace-line);
  box-shadow: 0 4px 0 var(--workspace-line);
}
.v-btn.ghost:active { box-shadow: 0 1px 0 var(--workspace-line); }
.v-btn.danger { background: #d94c5b; box-shadow: 0 5px 0 #a52f3c; }
.v-btn:disabled, button:disabled { opacity: .48; filter: grayscale(.25); cursor: not-allowed; box-shadow: none; transform: none; }

.v-input,
.v-select,
.auth-input,
.parent-cosmetic-row input,
.parent-cosmetic-row select {
  min-height: 44px;
  padding: 9px 12px;
  border: 1.5px solid var(--workspace-line);
  border-radius: 13px;
  color: var(--workspace-ink);
  background: #fff;
  font-size: 14px;
  transition: border-color var(--workspace-state), box-shadow var(--workspace-state);
}
.v-input:focus, .v-select:focus, .auth-input:focus { border-color: var(--pink-main); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink-main) 13%, transparent); outline: 0; }
.v-input.num { width: 92px; }
.workspace-field { display: flex; flex-direction: column; gap: 7px; }
.workspace-field > span { color: var(--text-mid); font-size: 12px; font-weight: 800; }
.workspace-field .v-input, .workspace-field .v-select { width: 100%; }

.task-template-create-fields {
  display: grid;
  grid-template-columns: 96px 108px minmax(240px, 380px) 104px 88px 184px;
  align-items: start;
  justify-content: start;
  gap: 12px;
}
.task-template-create-fields > * { box-sizing: border-box; min-width: 0; min-height: 64px; height: 64px; }
.task-template-create-fields .task-template-icon,
.task-template-create-fields .task-template-reward-type,
.task-template-create-fields .v-input.num { text-align: center; }
.task-template-create-fields .task-template-icon {
  display: grid;
  padding: 6px;
  place-items: center;
  cursor: pointer;
}
.task-template-create-fields .task-template-icon .workspace-image-icon { width: 30px; height: 30px; }
.task-template-create-fields .v-btn { min-width: 0; margin: 0; }

.task-icon-picker { width: min(440px, 100%); padding: 20px; }
.task-icon-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.task-icon-picker-header h2 { margin: 0; color: var(--text-dark); font-size: 20px; }
.task-icon-picker-close {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 9px;
  place-items: center;
  border: 1px solid #eadde3;
  border-radius: 14px;
  background: #fff8fa;
  cursor: pointer;
}
.task-icon-picker-close .workspace-image-icon { width: 22px; height: 22px; }
.task-icon-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.task-icon-picker-option {
  display: grid;
  min-height: 82px;
  place-items: center;
  padding: 12px;
  border: 2px solid #f0dce5;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: transform var(--workspace-state), border-color var(--workspace-state), background var(--workspace-state);
}
.task-icon-picker-option:hover { transform: translateY(-2px); border-color: #f68bb9; background: #fff6f9; }
.task-icon-picker-option.selected { border-color: var(--pink-main); background: #fff0f6; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink-main) 14%, transparent); }
.task-icon-picker-option .workspace-image-icon { width: 44px; height: 44px; }

/* Parent task planner */
.task-planner-layout { display: grid; grid-template-columns: minmax(320px, 370px) minmax(0, 1fr); gap: 22px; align-items: start; }
.task-calendar-card { position: sticky; top: 28px; padding: 22px; }
.cal-head { gap: 8px; }
.cal-head b { flex: 1; text-align: center; font-size: 17px; color: var(--workspace-ink); }
.calendar-nav-btn, .cal-head > button:not(.v-btn) {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--workspace-line);
  border-radius: 13px;
  color: var(--text-mid);
  background: #fff;
  font-size: 22px;
}
.cal-grid { gap: 3px; }
.cal-dow { padding: 7px 0; font-size: 12px; font-weight: 800; }
.cal-day {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  transition: transform var(--workspace-press), background var(--workspace-state), color var(--workspace-state);
}
.cal-day:hover { background: var(--pink-pale); transform: translateY(-1px); }
.cal-day.sel { color: #fff; background: linear-gradient(145deg, var(--workspace-pink-bright), var(--pink-main)); box-shadow: 0 4px 0 var(--pink-dark); }
.cal-day.is-today:not(.sel) { border: 2px solid var(--workspace-pink); color: var(--workspace-pink-deep); }
.cal-day .dot { width: 5px; height: 5px; bottom: 4px; background: var(--workspace-yellow-deep); }
.cal-day .dot.red { background: #d94c5b; }
.week-strip { gap: 5px; margin-top: 18px; }
.week-strip-cell { min-height: 64px; border-radius: 13px; }
.week-strip-cell.today { border-width: 2px; }
.week-strip-cell.sel { color: #fff; border-color: var(--pink-main); background: var(--pink-main); box-shadow: 0 4px 0 var(--pink-dark); }
.week-strip-cell.sel :is(.ws-label, .ws-count) { color: rgba(255, 255, 255, .86); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 13px; margin: 14px 0 0; color: var(--text-light); font-size: 11px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--workspace-yellow-deep); }
.legend-dot.overdue { background: #d94c5b; }

.task-day-card { min-height: 520px; }
.task-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.task-day-heading h2 { margin: 2px 0 0; font-size: 22px; color: var(--workspace-ink); }
.task-summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.task-summary-strip span { padding: 9px 10px; border: 1px solid var(--workspace-line); border-radius: 12px; color: var(--text-mid); background: #fffaf4; text-align: center; font-size: 11px; }
.task-summary-strip b { display: block; color: var(--workspace-ink); font-size: 17px; line-height: 1.1; }
.task-filter-row { display: flex; gap: 7px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.task-filter-row::-webkit-scrollbar { display: none; }
.task-filter-chip { min-height: 38px; flex: 0 0 auto; padding: 7px 13px; border: 1px solid var(--workspace-line); border-radius: 999px; color: var(--text-mid); background: #fff; font-size: 12px; font-weight: 800; }
.task-filter-chip.active { color: var(--workspace-pink-deep); border-color: #f2afc9; background: #fff0f6; }
.parent-task-list { display: flex; flex-direction: column; gap: 9px; }
.parent-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 16px;
  background: #fff;
  transition: transform var(--workspace-state) var(--workspace-ease), box-shadow var(--workspace-state);
}
.parent-task-row:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(56, 37, 58, .07); }
.parent-task-row.status-done { border-color: #f2d69b; background: #fffbef; }
.parent-task-row.status-confirmed { border-color: #bde7d6; background: #f1fbf6; }
.parent-task-person { min-width: 0; display: flex; align-items: center; gap: 8px; }
.parent-task-person > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--workspace-purple); font-size: 13px; font-weight: 900; }
.parent-task-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.parent-task-main { min-width: 0; display: flex; align-items: center; gap: 10px; }
.parent-task-emoji { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; background: #fff0f6; font-size: 18px; }
.parent-task-main div { min-width: 0; }
.parent-task-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--workspace-ink); font-size: 14px; }
.parent-task-main small { color: var(--text-light); font-size: 10px; }
.parent-task-points { color: var(--workspace-pink); font-weight: 900; font-variant-numeric: tabular-nums; }
.parent-task-status { font-size: 12px; font-weight: 800; color: var(--text-light); }
/* 桌面端 controls 让状态 + 3 个按钮同一水平行 */
.parent-task-controls { display: flex; align-items: center; gap: 8px; }
.parent-task-controls .parent-task-status { white-space: nowrap; }
/* 桌面端 parent-task-topline 也走 flex 行布局，让任务名 + 积分 同一行 */
.parent-task-topline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.parent-task-topline > strong { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-task-topline .parent-task-points { flex: 0 0 auto; }
.status-done .parent-task-status { color: #a26605; }
.status-confirmed .parent-task-status { color: var(--workspace-green-deep); }
.parent-task-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.task-more-menu { position: relative; }
.task-more-menu > summary { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--workspace-line); border-radius: 12px; background: #fff; color: var(--text-mid); cursor: pointer; list-style: none; font-weight: 900; }
.task-more-menu > summary::-webkit-details-marker { display: none; }
.task-more-menu > div { position: absolute; top: calc(100% + 7px); right: 0; z-index: 20; min-width: 138px; padding: 6px; border: 1px solid var(--workspace-line); border-radius: 13px; background: #fff; box-shadow: 0 18px 38px rgba(45, 33, 56, .16); }
.task-more-menu button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 9px; color: #b53b4a; background: transparent; font-size: 12px; font-weight: 800; }
.task-more-menu button:hover { background: #fff0f1; }
.task-more-menu .ui-svg-icon { width: 17px; height: 17px; }
.task-empty-state { min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; text-align: center; color: var(--text-mid); }
.task-empty-state > .ui-svg-icon { width: 42px; height: 42px; margin-bottom: 5px; color: #c4a9b8; }
.task-empty-state strong { color: var(--workspace-ink); font-size: 17px; }
.task-empty-state p { max-width: 300px; margin: 0 0 8px; font-size: 13px; }

.task-composer-overlay { position: fixed; inset: 0; z-index: 1300; visibility: hidden; pointer-events: none; background: rgba(45, 33, 56, 0); transition: background var(--workspace-modal), visibility var(--workspace-modal); }
.task-composer-overlay.show { visibility: visible; pointer-events: auto; background: rgba(45, 33, 56, .5); }
.task-composer { position: absolute; top: 0; right: 0; width: min(460px, 100%); height: 100dvh; display: flex; flex-direction: column; background: var(--workspace-surface); box-shadow: -24px 0 60px rgba(45, 33, 56, .2); transform: translateX(102%); transition: transform var(--workspace-modal) var(--workspace-ease); }
.task-composer-overlay.show .task-composer { transform: translateX(0); }
.task-composer-header { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 17px; border-bottom: 1px solid var(--workspace-line); }
.task-composer-header h2 { margin: 2px 0 0; color: var(--workspace-ink); font-size: 24px; }
.task-composer-close, .mobile-sheet-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; color: var(--text-mid); background: #f7eee6; font-size: 25px; }
.task-composer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; padding: 20px 24px calc(32px + env(safe-area-inset-bottom)); }
.composer-step { display: flex; align-items: flex-start; gap: 11px; margin-top: 5px; }
.composer-step-number { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--workspace-purple); font-size: 12px; font-weight: 900; }
.composer-step h3 { margin: 0; font-size: 15px; color: var(--workspace-ink); }
.composer-step p { margin: 1px 0 0; color: var(--text-light); font-size: 11px; }
.composer-field-grid { display: grid; grid-template-columns: 116px 1fr; gap: 12px; }
.task-composer-submit { width: 100%; min-height: 52px; margin-top: 3px; }
.week-plan-disclosure { margin-top: 8px; border-top: 1px solid var(--workspace-line); }
.week-plan-disclosure > summary { min-height: 68px; display: flex; align-items: center; gap: 11px; color: var(--text-mid); cursor: pointer; list-style: none; }
.week-plan-disclosure > summary::-webkit-details-marker { display: none; }
.week-plan-disclosure > summary > .ui-svg-icon { width: 23px; height: 23px; color: var(--workspace-blue); }
.week-plan-disclosure summary span { display: flex; flex-direction: column; }
.week-plan-disclosure summary strong { color: var(--workspace-ink); font-size: 13px; }
.week-plan-disclosure summary small { font-size: 10px; }
.week-plan-disclosure > div { display: flex; flex-direction: column; gap: 11px; padding: 0 0 14px 34px; }
body.task-composer-open { overflow: hidden; }
body.task-composer-open .app-main,
body.mobile-sheet-open .app-main { overflow: hidden; }

/* Shared page polish */
.v-tabs { gap: 7px; padding: 5px; width: fit-content; border: 1px solid var(--workspace-line); border-radius: 18px; background: rgba(255, 255, 255, .7); }
.v-tab-btn { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 13px; font-weight: 900; }
.v-tab-btn.active { border: 0; background: var(--pink-main); box-shadow: 0 4px 0 var(--pink-dark); }
.child-switch-bar { gap: 8px; }
.child-switch-chip { min-height: 44px; padding: 7px 14px; border-radius: 14px; box-shadow: 0 3px 0 var(--workspace-line); }
.child-switch-chip.active { box-shadow: 0 4px 0 var(--pink-dark); }

.game-grid { gap: 15px; }
.game-card { min-height: 150px; padding: 18px; transition: transform var(--workspace-state) var(--workspace-ease), box-shadow var(--workspace-state), border-color var(--workspace-state); }
.game-card:hover { transform: translateY(-4px); box-shadow: var(--workspace-shadow-float); }
.game-card:active { transform: translateY(2px); }
.game-card .gc-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; background: var(--purple-light); }
.game-reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.game-reward-grid .v-row { min-height: 64px; padding: 10px; border: 1px solid var(--workspace-line); border-radius: 14px; background: #fffaf4; }
.game-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.game-card-3 {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 21px;
  color: var(--workspace-ink);
  background: #fff;
  box-shadow: 0 6px 0 var(--workspace-line), 0 16px 28px rgba(45, 33, 56, .09);
  cursor: pointer;
  transition: transform var(--workspace-state) var(--workspace-ease), box-shadow var(--workspace-state), border-color var(--workspace-state);
}
.game-card-3:nth-child(3n + 1) { --game-accent: var(--workspace-pink); --game-accent-deep: var(--workspace-pink-deep); }
.game-card-3:nth-child(3n + 2) { --game-accent: var(--workspace-blue); --game-accent-deep: var(--workspace-blue-deep); }
.game-card-3:nth-child(3n) { --game-accent: var(--workspace-purple); --game-accent-deep: var(--workspace-purple-deep); }
.game-card-3:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--game-accent) 42%, white); box-shadow: 0 9px 0 color-mix(in srgb, var(--game-accent) 28%, var(--workspace-line)), 0 24px 38px rgba(45, 33, 56, .14); }
.game-card-3:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--workspace-line); }
.game-card-3 .gc-img { aspect-ratio: 16 / 10; overflow: hidden; background: #f5ecf2; }
.game-card-3 .gc-img img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 260ms var(--workspace-ease); }
.game-card-3:hover .gc-img img { transform: scale(1.035); }
.game-card-3 .gc-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 15px 15px; }
.game-card-3 .gc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.game-card-3 .gc-action { flex: 0 0 auto; color: #ff8fab; font-size: 11px; font-weight: 900; }
.pet-grid-3 { gap: 18px; }
.pet-card { width: 100%; padding: 0; overflow: hidden; appearance: none; text-align: initial; color: inherit; font: inherit; cursor: pointer; border: 2px solid rgba(255, 255, 255, .92); border-radius: 23px; box-shadow: var(--workspace-shadow-card); transition: transform var(--workspace-state) var(--workspace-ease), box-shadow var(--workspace-state); }
.pet-card:hover { transform: translateY(-5px); box-shadow: var(--workspace-shadow-float); }
.pet-card:active { transform: translateY(3px); }
.pc-img-wrap { background: radial-gradient(circle at 50% 32%, #fff 0 16%, #f2e9ff 52%, #e5ddff 100%); }
.pc-badge { box-shadow: 0 3px 0 rgba(62, 38, 76, .25); }
.wallet-cell { min-height: 96px; padding: 17px; }
.wallet-cell .wc-val { font-size: 24px; }
.wallet-grid { gap: 14px; margin-bottom: 18px; }
.wallet-cell:first-child { background: linear-gradient(145deg, #fff, #fff4c8); }
.wallet-cell:nth-child(2) { background: linear-gradient(145deg, #fff, #efe9ff); }
.ex-row { min-height: 64px; gap: 10px; padding: 10px 12px; border: 1px solid var(--workspace-line); border-radius: 14px; background: #fff; }
.ex-row + .ex-row { margin-top: 8px; }
.ex-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 13px; background: #fff4d0; font-size: 21px; }
.ex-title { min-width: 0; flex: 1; font-weight: 800; }
.ex-cost { color: var(--workspace-purple-deep); font-weight: 900; }
.cos-cell { transition: transform var(--workspace-state), box-shadow var(--workspace-state); }
.cos-cell:hover { transform: translateY(-3px); box-shadow: var(--workspace-shadow-float); }

.v-boss-banner { border: 2px solid rgba(255, 255, 255, .24); border-radius: 22px; background: linear-gradient(145deg, #35275c, #6e3f8d); box-shadow: 0 8px 0 #24183f, 0 20px 38px rgba(48, 31, 80, .22); }
.v-boss-banner img { border-radius: 16px; }
.p-boss-card { overflow: hidden; }
.p-boss-row { margin-bottom: 10px; padding: 13px; }
.p-boss-card > .v-card-title { padding-bottom: 12px; border-bottom: 1px solid var(--workspace-line); }
.v-boss-card { border: 2px solid rgba(0, 0, 0, .05); border-radius: 26px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08); }
.dmg-row { min-height: 52px; padding: 10px 12px; border-bottom: 1px solid var(--workspace-line); }
.dmg-row:last-child { border-bottom: 0; }
.f-name-card, .f-member-card, .f-settings-card { overflow: hidden; }
.nav-user-badge .ui-svg-icon { width: 13px; height: 13px; }

body[data-family-role="child"] #viewRoot { max-width: 1180px; }
body[data-family-role="child"] .v-card { border-width: 2px; }
body[data-family-role="child"] .v-card-title { font-size: 19px; }
body[data-family-role="child"] .v-btn { min-height: 48px; border-radius: 16px; font-size: 14px; }
body[data-family-role="child"] .pet-stage-card,
body[data-family-role="child"] .task-arena { box-shadow: var(--workspace-shadow-float); }
body[data-family-role="child"] .child-page-header { min-height: 86px; }
.task-list-row { min-height: 70px; gap: 12px; padding: 11px 13px; border: 1px solid var(--workspace-line); border-radius: 15px; background: #fff; display: flex; align-items: center; }
.task-list-row + .task-list-row { margin-top: 9px; }
.task-list-row.confirmed { border-color: #bde7d6; background: #f1fbf6; }
.task-list-row.done { border-color: #f2d69b; background: #fffbef; }
.task-list-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 12px; background: #f1edff; }
.task-list-reward { color: var(--workspace-purple-deep); font-weight: 900; flex: 0 0 auto; }
/* 任务行顶部行：emoji + 任务名 + 积分（桌面端 flex 一行不换行） */
.child-task-topline { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; margin-right: auto; }
.child-task-topline > .v-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.child-task-submit { flex: 0 0 auto; }
.task-progress { border: 2px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 5px 0 var(--workspace-line); }
/* Student task arena: each opponent reads as its own raised card. */
.v-vs-arena { border-radius: 0; box-shadow: none; }
.v-pet-square-card,
.v-boss-square-card {
  background: linear-gradient(160deg, #f9f5ff 0%, #fce4ec 100%);
}
.v-pet-square-card {
  border-color: #f1cce2;
  box-shadow: 0 6px 0 #ead9e4, 0 18px 30px rgba(98, 70, 104, .12);
}
.v-boss-square-card {
  border-color: #8fcdf3;
  color: var(--workspace-ink);
  box-shadow: 0 6px 0 #cce4f2, 0 18px 30px rgba(68, 126, 166, .14);
}
.v-pet-square-info { background: #fff0f6; }
.v-boss-square-info {
  background: #eaf7ff;
  color: #24597d;
}
.v-boss-square-name,
.v-boss-square-hp { color: #24597d; }
.v-boss-square-stage { color: #3c78a1; opacity: 1; }
.v-boss-square-info .hp-bg { background: #c8eaff; }
.v-boss-square-info .hp-boss { background: linear-gradient(90deg, #43b5f2, #247fba); }

/* Dialogs and feedback */
.modal-overlay { background: rgba(45, 33, 56, .52); backdrop-filter: blur(3px); transition: opacity var(--workspace-modal), visibility var(--workspace-modal); }
.modal-box { border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--workspace-radius-lg); background: var(--workspace-surface); box-shadow: var(--workspace-shadow-float); transition: transform var(--workspace-modal) var(--workspace-ease); }
.modal-header, .modal-footer { border-color: var(--workspace-line); }
.modal-close-btn, .modal-close-btn-white { min-width: 44px; min-height: 44px; }
.toast-item, .toast { border-radius: 15px; box-shadow: 0 7px 0 rgba(45, 33, 56, .2), 0 18px 35px rgba(45, 33, 56, .18); }
.feedback-fab { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 18px; background: var(--workspace-pink); box-shadow: 0 6px 0 var(--workspace-pink-deep), 0 14px 28px rgba(230, 50, 120, .23); }
.feedback-fab .ui-svg-icon { width: 23px; height: 23px; color: #fff; }
.auth-overlay { background: radial-gradient(circle at 20% 10%, #fff1c9, transparent 32%), radial-gradient(circle at 86% 90%, #e2dcff, transparent 34%), var(--workspace-cream); }
.auth-box { border: 1px solid var(--workspace-line); border-radius: 28px; box-shadow: var(--workspace-shadow-float); }

@media (max-width: 1120px) {
  .side-nav { flex-basis: 204px; }
  #viewRoot { padding-inline: 24px; }
  .parent-task-row { grid-template-columns: 88px minmax(160px, 1fr) 48px 60px auto; gap: 8px; }
}

@media (max-width: 820px) {
  body { overflow: hidden; font-size: 16px; }
  .app-shell { display: block; }
  .side-nav { display: none; }
  .mobile-app-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 340;
    height: calc(64px + env(safe-area-inset-top));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: max(8px, env(safe-area-inset-top)) 14px 8px;
    border-bottom: 1px solid var(--workspace-line);
    background: rgba(255, 254, 251, .96);
    backdrop-filter: blur(15px);
  }
  .mobile-brand { min-width: 0; height: 48px; display: flex; align-items: center; gap: 10px; color: var(--workspace-ink); text-decoration: none; font-size: 16px; font-weight: 900; }
  .mobile-brand > .ui-svg-icon { width: 40px; height: 40px; padding: 9px; color: #fff; background: var(--workspace-pink); border-radius: 14px; box-shadow: 0 4px 0 var(--workspace-pink-deep); }
  .mobile-brand-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; }
  .mobile-brand-icon > .ui-svg-icon { width: 40px; height: 40px; padding: 9px; color: #fff; background: var(--workspace-pink); border-radius: 14px; box-shadow: 0 4px 0 var(--workspace-pink-deep); }
  .mobile-brand-icon .workspace-image-icon { width: 44px; height: 44px; }
  .mobile-brand span:last-child { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-role-btn { min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--workspace-line); border-radius: 14px; color: var(--text-mid); background: #fff; font-size: 12px; font-weight: 900; }
  .mobile-role-btn .ui-svg-icon { width: 17px; height: 17px; color: var(--pink-main); }
  .mobile-role-btn .workspace-image-icon,
  .mobile-family-btn .workspace-image-icon { width: 30px; height: 30px; }
  .app-main { height: 100dvh; padding-top: calc(64px + env(safe-area-inset-top)); padding-bottom: calc(82px + env(safe-area-inset-bottom)); overflow-y: auto; }
  #viewRoot { max-width: none; padding: 18px 14px 36px; }
  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 350;
    height: 70px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--workspace-line);
    border-radius: 23px;
    background: rgba(255, 254, 251, .97);
    box-shadow: 0 9px 0 rgba(218, 187, 154, .58), 0 20px 44px rgba(45, 33, 56, .16);
    backdrop-filter: blur(16px);
  }
  .mobile-nav-item { position: relative; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 17px; color: var(--text-mid); background: transparent; font-size: 10px; font-weight: 900; }
  .mobile-nav-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 11px; }
  .mobile-nav-icon .ui-svg-icon { width: 20px; height: 20px; }
  .mobile-nav-icon.generated .workspace-image-icon { width: 31px; height: 31px; }
  .mobile-nav-item.active { color: var(--workspace-pink-deep); background: #fff0f6; }
  .mobile-nav-item.active[data-tone="purple"] { color: var(--workspace-purple-deep); background: #f0ecff; }
  .mobile-nav-item.active[data-tone="blue"] { color: var(--workspace-blue-deep); background: #e9f6ff; }
  .mobile-nav-item.active[data-tone="orange"] { color: var(--workspace-orange-deep); background: #fff0e9; }
  .mobile-nav-item.active[data-tone="yellow"] { color: #825400; background: #fff7d9; }
  .mobile-nav-item.active[data-tone="green"] { color: var(--workspace-green-deep); background: #e8f9f2; }
  .mobile-task-badge { position: absolute; top: 2px; right: 7px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 9px; }
  .mobile-more-overlay { position: fixed; inset: 0; z-index: 900; visibility: hidden; display: flex; align-items: flex-end; padding: 12px; background: rgba(45, 33, 56, 0); pointer-events: none; transition: background var(--workspace-modal), visibility var(--workspace-modal); }
  .mobile-more-overlay.show { visibility: visible; pointer-events: auto; background: rgba(45, 33, 56, .5); }
  .mobile-more-sheet { width: 100%; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); border: 1px solid rgba(255, 255, 255, .8); border-radius: 28px 28px 20px 20px; background: var(--workspace-surface); box-shadow: var(--workspace-shadow-float); transform: translateY(110%); transition: transform var(--workspace-modal) var(--workspace-ease); }
  .mobile-more-overlay.show .mobile-more-sheet { transform: translateY(0); }
  .mobile-sheet-handle { width: 42px; height: 5px; margin: 1px auto 10px; border-radius: 999px; background: #d8c8d1; }
  .mobile-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
  .mobile-sheet-heading small { color: var(--text-light); font-size: 11px; }
  .mobile-sheet-heading h2 { margin: 0; color: var(--workspace-ink); font-size: 21px; }
  .mobile-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mobile-more-item { min-height: 112px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 15px; text-align: left; border: 1px solid var(--workspace-line); border-radius: 19px; color: var(--workspace-ink); background: #fff; box-shadow: 0 5px 0 var(--workspace-line); }
  .mobile-more-item > span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--workspace-yellow-deep); }
  .mobile-more-item[data-tone="green"] > span { background: var(--workspace-green); }
  .mobile-more-item .ui-svg-icon { width: 22px; height: 22px; }
  .mobile-more-item strong { align-self: end; font-size: 15px; }
  .mobile-more-item small { align-self: start; color: var(--text-light); font-size: 10px; }
  body.mobile-sheet-open { overflow: hidden; }

  .workspace-page-header { min-height: 60px; align-items: center; margin-bottom: 12px; }
  .workspace-page-copy h1 { font-size: 28px; }
  .workspace-page-copy p { display: none; }
  .workspace-primary-action { min-width: auto; padding-inline: 14px; }
  .workspace-segments { width: 100%; }
  .parent-task-toolbar { display: flex; gap: 10px; }
  .parent-task-toolbar .workspace-segments { width: auto; flex: 1; }
  .parent-task-toolbar .workspace-primary-action {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
  }
  .parent-task-toolbar .workspace-primary-action span:last-child { display: none; }
  .workspace-segment { flex: 1; justify-content: center; }
  .task-planner-layout { grid-template-columns: 1fr; gap: 13px; }
  .task-calendar-card { position: static; top: auto; }
  .task-day-card { min-height: 0; }
  .parent-task-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "person meta"; gap: 8px 10px; padding: 12px; }
  .parent-task-main { grid-area: main; }
  .parent-task-person { grid-area: person; }
  .parent-task-points { grid-area: meta; justify-self: end; align-self: center; }
  .parent-task-status { grid-area: meta; justify-self: end; margin-right: 42px; }
  .parent-task-actions { grid-area: actions; }
  .parent-task-main small { display: none; }
  .parent-task-person > span { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; }
  .task-more-menu > div { position: fixed; inset: auto 14px calc(88px + env(safe-area-inset-bottom)); }
  .task-summary-strip span { padding-inline: 5px; }
  .task-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "task action" "reward status"; }
  .task-list-main { grid-area: task; min-width: 0; }
  .task-list-main .v-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-list-action { grid-area: action; }
  .task-list-reward { grid-area: reward; }
  .task-list-status { grid-area: status; text-align: right; }
  .game-reward-grid { grid-template-columns: 1fr; }
  .game-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .game-card-3 .gc-copy { align-items: flex-start; flex-direction: column; padding: 11px 12px 13px; }
  .game-card-3 .gc-action { font-size: 12px; }
  .pet-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .p-boss-row { grid-template-columns: 64px 1fr; }
  .v-card { padding: 16px; border-radius: 18px; box-shadow: 0 4px 0 rgba(221, 190, 158, .58), 0 12px 24px rgba(45, 33, 56, .07); }
  .feedback-fab { display: none; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box { width: 100%; max-width: none !important; max-height: 92dvh; border-radius: 28px 28px 0 0; }
}

/* Generated workspace icon library shared by parent and child workspaces. */
body[data-family-role="parent"] .workspace-segment .workspace-image-icon {
  width: 28px;
  height: 28px;
}
body[data-family-role="parent"] .workspace-segment.active .workspace-image-icon {
  filter: drop-shadow(0 2px 2px rgba(68, 40, 85, .14));
}
body[data-family-role="parent"] .v-card-title > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body[data-family-role="parent"] .v-card-title .workspace-image-icon {
  width: 30px;
  height: 30px;
}
body[data-family-role="parent"] .v-btn .workspace-image-icon {
  width: 24px;
  height: 24px;
}
body[data-family-role="parent"] .v-btn.small .workspace-image-icon {
  width: 20px;
  height: 20px;
}
body[data-family-role="parent"] .parent-task-emoji {
  background: transparent;
}
body[data-family-role="parent"] .parent-task-emoji .workspace-image-icon {
  width: 38px;
  height: 38px;
}
body[data-family-role="parent"] .task-template-row-icon .workspace-image-icon {
  width: 30px;
  height: 30px;
}
.task-template-row-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  align-self: center;
  line-height: 0;
}
body[data-family-role="parent"] .task-composer-close .workspace-image-icon {
  width: 34px;
  height: 34px;
}
body[data-family-role="parent"] .calendar-nav-btn .workspace-image-icon {
  width: 28px;
  height: 28px;
}
body[data-family-role="parent"] .calendar-nav-next .workspace-image-icon {
  transform: rotate(180deg);
}
body[data-family-role="parent"] .week-month-toggle .workspace-image-icon {
  width: 28px;
  height: 28px;
}
body[data-family-role="parent"] .reward-card .rc-icon .workspace-image-icon {
  width: min(92px, 76%);
  height: min(92px, 76%);
}
body[data-family-role="parent"] .reward-card .rc-del .workspace-image-icon {
  width: 24px;
  height: 24px;
}
body[data-family-role="parent"] .reward-card .rc-cur-btn .workspace-image-icon {
  width: 25px;
  height: 25px;
}
body[data-family-role="parent"] .family-empty-icon .workspace-image-icon {
  width: 84px;
  height: 84px;
}
body[data-family-role="parent"] .family-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-light);
  font-size: 12px;
}
body[data-family-role="parent"] .family-points .workspace-image-icon {
  width: 24px;
  height: 24px;
}
body[data-family-role="parent"] .pd-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body[data-family-role="parent"] .pd-status .workspace-image-icon {
  width: 24px;
  height: 24px;
}
body[data-family-role="parent"] .pd-stains i {
  width: 14px;
  height: 14px;
  display: block;
  border: 3px solid #6f412f;
  border-radius: 55% 45% 58% 42%;
  background: #9a6545;
  box-shadow: 8px 5px 0 -4px #70412f;
  transform: rotate(calc(var(--stain-rotation, 0) * 1deg));
}
body[data-family-role="parent"] .adopt-modal :is(.head h2, .foot .stats, .grp-title, .lock) .workspace-image-icon {
  width: 28px;
  height: 28px;
}

body[data-family-role="child"] :is(.v-card-title > span, .v-empty, .task-progress-num, .dmg-row > span, .p-sub, .b-name, .v-boss-square-name) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
body[data-family-role="child"] .v-card-title .workspace-image-icon { width: 28px; height: 28px; }
body[data-family-role="child"] .task-list-icon .workspace-image-icon { width: 34px; height: 34px; }
body[data-family-role="child"] .task-progress-num .workspace-image-icon { width: 22px; height: 22px; }
body[data-family-role="child"] .v-empty > .workspace-image-icon { width: 42px; height: 42px; }
body[data-family-role="child"] .dmg-row .workspace-image-icon { width: 22px; height: 22px; }
body[data-family-role="child"] .pc-action-icon .workspace-image-icon { width: 22px; height: 22px; }
body[data-family-role="child"] .pc-cost .workspace-image-icon { width: 18px; height: 18px; }
body[data-family-role="child"] .pd-codex-cell .dot .workspace-image-icon { width: 18px; height: 18px; }
body[data-family-role="child"] .pd-status,
body[data-family-role="child"] .adopt-modal :is(.head h2, .foot .stats, .grp-title, .lock) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body[data-family-role="child"] .pd-status .workspace-image-icon,
body[data-family-role="child"] .adopt-modal :is(.head h2, .foot .stats, .grp-title, .lock) .workspace-image-icon {
  width: 28px;
  height: 28px;
}
body[data-family-role="child"] .pd-stains i {
  width: 14px;
  height: 14px;
  display: block;
  border: 3px solid #6f412f;
  border-radius: 55% 45% 58% 42%;
  background: #9a6545;
  box-shadow: 8px 5px 0 -4px #70412f;
}

@media (max-width: 820px) {
  body[data-family-role="parent"] .workspace-segment .workspace-image-icon { width: 25px; height: 25px; }
  body[data-family-role="parent"] .reward-card .rc-icon .workspace-image-icon { width: 76px; height: 76px; }
  body[data-family-role="parent"] .mobile-nav-icon.generated .workspace-image-icon { width: 32px; height: 32px; }
}

@media (max-width: 520px) {
  #viewRoot { padding-inline: 11px; }
  .mobile-brand span:last-child { max-width: 132px; }
  .workspace-page-header { gap: 10px; }
  .workspace-primary-action span:last-child { display: none; }
  .workspace-primary-action { width: 48px; min-width: 48px; padding: 0; }
  .workspace-segment { padding-inline: 8px; }
  .task-calendar-card { padding: 14px; }
  .cal-head b { font-size: 15px; }
  .cal-head .v-btn.small { padding-inline: 10px; }
  .week-strip-cell { min-height: 60px; }
  .task-day-heading { align-items: flex-start; }
  .task-day-heading h2 { font-size: 19px; }
  .task-day-heading .v-btn span:last-child { display: none; }
  .task-summary-strip { gap: 5px; }
  .task-summary-strip b { font-size: 15px; }
  .parent-task-status { display: none; }
  .parent-task-points { margin-right: 0; }
  .task-composer { width: 100%; top: auto; bottom: 0; height: min(88dvh, 760px); border-radius: 28px 28px 0 0; transform: translateY(102%); }
  .task-composer-overlay.show .task-composer { transform: translateY(0); }
  .task-composer-header { min-height: 82px; padding: 18px 18px 14px; }
  .task-composer-body { padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); }
  .composer-field-grid { grid-template-columns: 105px 1fr; }
  .game-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-grid-3 { grid-template-columns: 1fr; }
  .ex-row { flex-wrap: wrap; }
  .ex-row .ex-title { min-width: calc(100% - 62px); }
}

/* Mobile workbench refresh: compact bento rhythm inspired by a native planner. */
@media (max-width: 820px) {
  html { background: #f5f5f8; }
  body {
    --mobile-gutter: clamp(12px, 4vw, 22px);
    background: #f5f5f8;
  }
  .app-shell { background: #f5f5f8; }
  .app-main {
    padding-top: calc(78px + env(safe-area-inset-top));
    padding-bottom: calc(98px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 100% 0, rgba(133, 110, 255, .09), transparent 28%),
      linear-gradient(180deg, #f8f8fb, #f3f3f7);
    scrollbar-gutter: auto;
  }
  #viewRoot {
    padding: 14px var(--mobile-gutter) 38px;
    overflow-x: clip;
  }

  .mobile-app-bar {
    height: calc(78px + env(safe-area-inset-top));
    align-items: flex-end;
    padding: max(8px, env(safe-area-inset-top)) var(--mobile-gutter) 10px;
    border: 0;
    background: rgba(248, 248, 251, .9);
    box-shadow: none;
  }
  .mobile-brand {
    height: 56px;
    gap: 11px;
    color: var(--mobile-nav-ink);
  }
  .mobile-brand > .ui-svg-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 11px;
    color: var(--workspace-purple-deep);
    background: #e9e4ff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 16px rgba(80, 55, 178, .14);
  }
  .mobile-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.12;
  }
  .mobile-brand-copy strong {
    max-width: min(46vw, 220px);
    overflow: hidden;
    color: var(--mobile-nav-ink);
    font-size: 16px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-brand-copy small {
    margin-top: 4px;
    color: #7c7c88;
    font-size: 11px;
    font-weight: 700;
  }
  .mobile-role-btn {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 8px 12px;
    border: 0;
    border-radius: 22px;
    color: var(--mobile-nav-ink);
    background: #fff;
    box-shadow: 0 6px 18px rgba(18, 19, 26, .08);
  }
  .mobile-role-btn .ui-svg-icon { color: var(--workspace-purple-deep); }

  .mobile-bottom-nav {
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    bottom: max(10px, env(safe-area-inset-bottom));
    height: 76px;
    gap: 3px;
    padding: 7px;
    border: 0;
    border-radius: 30px;
    background: var(--mobile-nav-ink);
    box-shadow: 0 16px 38px rgba(18, 19, 26, .24);
    backdrop-filter: none;
  }
  .mobile-nav-item {
    min-height: 62px;
    gap: 2px;
    border-radius: 24px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    transition: color 180ms ease, background 180ms ease, transform 120ms ease;
  }
  .mobile-nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 16px;
  }
  .mobile-nav-item.active,
  .mobile-nav-item.active[data-tone] {
    color: var(--mobile-nav-ink);
    background: #fff;
  }
  .mobile-nav-item:active { transform: scale(.96); }
  .mobile-task-badge {
    top: 1px;
    right: 5px;
    border-color: var(--mobile-nav-ink);
  }

  .workspace-page-header {
    position: relative;
    min-height: 124px;
    align-items: flex-end;
    gap: 12px;
    margin: 0 0 14px;
    padding: 20px;
    overflow: hidden;
    border: 0;
    border-radius: 26px;
    background: #a993ff;
    box-shadow: 0 12px 26px rgba(72, 56, 135, .13);
  }
  .workspace-page-header::after {
    content: "";
    position: absolute;
    width: 124px;
    height: 124px;
    right: -30px;
    top: -38px;
    border: 24px solid rgba(255,255,255,.22);
    border-radius: 38px;
    transform: rotate(28deg);
    pointer-events: none;
  }
  .workspace-page-copy { position: relative; z-index: 1; min-width: 0; }
  .workspace-page-copy h1 {
    margin: 0;
    color: #17141f;
    font-size: clamp(27px, 8vw, 36px);
    line-height: 1.02;
    letter-spacing: -.045em;
  }
  .workspace-page-copy p { display: block; margin-top: 8px; color: rgba(23,20,31,.72); font-size: 12px; }
  .workspace-primary-action {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    color: var(--mobile-nav-ink);
    background: #fff;
    border-color: #fff;
    box-shadow: 0 5px 0 rgba(18,19,26,.18);
  }

  .workspace-segments,
  .v-tabs {
    width: 100%;
    max-width: 100%;
    gap: 6px;
    margin: 0 0 14px;
    padding: 4px;
    overflow-x: auto;
    border: 0;
    border-radius: 18px;
    background: #e9e9ef;
    box-shadow: none;
    scrollbar-width: none;
  }
  .workspace-segments::-webkit-scrollbar,
  .v-tabs::-webkit-scrollbar { display: none; }
  .workspace-segment,
  .v-tab-btn {
    min-width: max-content;
    min-height: 44px;
    flex: 1 0 auto;
    border-radius: 14px;
  }
  .workspace-segment.active,
  .v-tab-btn.active {
    color: var(--mobile-nav-ink);
    background: #fff;
    box-shadow: 0 4px 12px rgba(18,19,26,.08);
  }

  .v-card,
  .pet-panel,
  .wallet-cell,
  .p-boss-card-cell,
  .reward-card,
  .cos-cell,
  .pd-panel {
    border-color: transparent;
    border-radius: 22px;
    box-shadow: 0 9px 24px rgba(18, 19, 26, .07);
  }
  .v-card { margin-bottom: 14px; padding: 16px; }
  .v-card-title { margin-bottom: 13px; font-size: 17px; }
  .v-btn { border-width: 0; box-shadow: 0 4px 0 var(--pink-dark); }
  .v-btn.ghost { border: 1px solid #e3e3ea; box-shadow: 0 3px 0 #d6d6df; }
  .v-input, .v-select { border-color: #dddde5; background: #fafafd; }
  .child-switch-bar {
    flex-wrap: nowrap;
    margin: 0 0 14px;
    padding-bottom: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .child-switch-bar::-webkit-scrollbar { display: none; }
  .child-switch-chip { flex: 0 0 auto; box-shadow: none; }

  /* Parent task planner: week first, full month on demand. */
  .task-planner-layout { gap: 14px; }
  .task-calendar-card {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .task-calendar-month { display: none; }
  .week-strip {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 4px 1px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .week-strip::-webkit-scrollbar { display: none; }
  .week-strip-cell {
    min-width: 54px;
    min-height: 74px;
    flex: 0 0 54px;
    border: 1px solid #d7d7df;
    border-radius: 22px;
    background: #fff;
    box-shadow: none;
    scroll-snap-align: start;
  }
  .week-strip-cell.sel {
    color: #fff;
    border-color: var(--mobile-nav-ink);
    background: var(--mobile-nav-ink);
    box-shadow: none;
  }
  .mobile-calendar-disclosure {
    display: block;
    margin-top: 6px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(18,19,26,.06);
  }
  .mobile-calendar-disclosure > summary {
    min-height: 52px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 4px 14px;
    cursor: pointer;
    list-style: none;
    font-weight: 900;
  }
  .mobile-calendar-disclosure > summary::-webkit-details-marker { display: none; }
  .mobile-calendar-disclosure > summary .ui-svg-icon { width: 20px; height: 20px; color: var(--workspace-purple-deep); }
  .mobile-calendar-disclosure > summary small { color: #858590; font-size: 11px; }
  .mobile-calendar-panel { padding: 0 12px 14px; border-top: 1px solid #ededf2; }
  .mobile-calendar-panel .cal-head { padding-top: 10px; }
  .mobile-calendar-panel .calendar-legend { margin-bottom: 0; }
  .task-day-card { padding: 17px; }
  .task-summary-strip { padding: 8px; border-radius: 16px; background: #f3efff; }
  .task-filter-row { flex-wrap: nowrap; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
  .task-filter-row::-webkit-scrollbar { display: none; }
  .task-filter-chip { flex: 0 0 auto; }
  .parent-task-row { border: 0; border-radius: 18px; box-shadow: none; }
  .parent-task-row.status-pending { background: #fff0f5; }
  .parent-task-row.status-done { background: #fff5d9; }
  .parent-task-row.status-confirmed { background: #e8f8ef; }

  /* Child task arena: one compact horizontal battle card. */
  body[data-family-role="child"][data-workspace-page="tasks"] .workspace-page-header { min-height: 112px; }
  .v-vs-arena {
    grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(18,19,26,.07);
  }
  .v-vs-text { font-size: 30px; letter-spacing: 0; text-shadow: none; }
  .v-pet-square-card,
  .v-boss-square-card {
    height: 172px;
    aspect-ratio: auto;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
  }
  .v-pet-square-card img,
  .v-boss-square-card img {
    padding: 8px;
    animation: none;
    filter: drop-shadow(0 5px 6px rgba(18,19,26,.14));
  }
  .v-pet-square-info,
  .v-boss-square-info {
    min-height: 62px;
    padding: 7px 6px 8px;
  }
  .v-pet-square-name,
  .v-boss-square-name { max-width: 100%; font-size: 13px; }
  .v-boss-square-stage { display: block; margin: 0; font-size: 9px; }
  .v-pet-square-lv { font-size: 10px; }
  .v-boss-square-info .hp-bg { height: 6px; margin-top: 5px; }
  .v-boss-square-hp { width: 100%; margin-top: 4px; font-size: 8px; }
  .task-progress { margin-bottom: 12px; padding: 12px 14px; border: 0; box-shadow: 0 8px 20px rgba(18,19,26,.06); }
  .task-list-row:nth-child(3n + 1) { background: #fff0f5; }
  .task-list-row:nth-child(3n + 2) { background: #eef5ff; }
  .task-list-row:nth-child(3n) { background: #fff7dc; }

  /* Games: every card has exactly the same footprint. */
  .game-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
  }
  .game-card-3 {
    aspect-ratio: 1 / 1.08;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 9px 22px rgba(18,19,26,.09);
  }
  .game-card-3 .gc-img { width: 100%; aspect-ratio: 16 / 10; flex: 0 0 auto; }
  .game-card-3 .gc-copy {
    min-height: 0;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: space-between;
    padding: 11px 12px 12px;
  }
  .game-card-3 .gc-title { width: 100%; font-size: 14px; }
  .game-card-3 .gc-action { font-size: 11px; }
  .game-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-reward-grid .v-row {
    min-width: 0;
    min-height: 112px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px !important;
    border: 0;
    background: #f2efff;
  }
  .game-reward-grid .v-row > span { width: auto !important; }
  .game-reward-grid .v-input { width: 100%; }

  /* Pet, shop, boss and family bento sections. */
  .pet-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-family-role="parent"] .pet-grid-3 .pd-card { aspect-ratio: 9 / 16; }
  .pet-detail-layout { grid-template-columns: 1fr; gap: 14px; }
  body[data-family-role="child"] .pet-detail-layout > div:first-child .pd-card {
    width: min(100%, 430px);
    aspect-ratio: 9 / 16;
    margin-inline: auto;
  }
  .pd-actions-3rows { height: auto !important; }
  .pd-actions-3rows > *, .pd-profile-controls { min-height: 0 !important; }
  .pd-interact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-care-action { min-width: 0; padding-inline: 6px; }
  .pd-care-action .pc-info-text small { font-size: 9px; }
  .pd-profile-controls { grid-template-columns: 1fr; }
  .pd-codex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-cosmetic-open-btn { position: static; width: 100%; margin: 0 0 12px; }
  .wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-cell { min-height: 112px; text-align: left; }
  .reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .reward-card { min-width: 0; min-height: 220px; padding: 14px 12px; }
  .reward-card .rc-icon { min-height: 88px; }
  .reward-card .rc-title { min-height: 44px; }
  .cos-grid, .pd-cosmetic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .p-boss-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .p-boss-card-cell { aspect-ratio: auto; min-height: 360px; }
  .p-boss-card-img { min-height: 170px; }
  .p-boss-card-row { grid-template-columns: 84px minmax(0, 1fr); }
  .v-boss-page { grid-template-columns: 1fr; gap: 14px; }
  .v-boss-card { width: 100%; max-width: 100%; }
  .dmg-log { max-height: 340px; overflow-y: auto; }

  body[data-workspace-page="family"] .v-card:nth-of-type(odd) { background: #eef8ff; }
  body[data-workspace-page="family"] .v-card:nth-of-type(even) { background: #fff5dd; }
  body[data-workspace-page="family"] .v-row { flex-wrap: wrap; gap: 8px; }
  body[data-workspace-page="family"] .v-row .v-title { min-width: calc(100% - 48px); }

  .mobile-more-overlay { padding: 0; }
  .mobile-more-sheet {
    border: 0;
    border-radius: 30px 30px 0 0;
    background: #f8f8fb;
  }
  .mobile-more-item { border: 0; box-shadow: none; }
  .mobile-more-item:first-child { background: #fff4cd; }
  .mobile-more-item:last-child { background: #e6f7ef; }
}

@media (max-width: 390px) {
  body { --mobile-gutter: 12px; }
  .workspace-page-header { min-height: 112px; padding: 17px; }
  .workspace-page-copy h1 { font-size: 28px; }
  .workspace-page-copy p { max-width: 230px; }
  .mobile-role-btn > span:last-child { display: none; }
  .mobile-role-btn { width: 44px; padding: 0; }
  .game-grid-3 { gap: 10px; }
  .game-card-3 .gc-title { font-size: 13px; }
  .game-card-3 .gc-action { font-size: 10px; }
  .v-vs-arena { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 4px; padding: 8px; }
  .v-vs-text { font-size: 26px; }
  .v-pet-square-card, .v-boss-square-card { height: 162px; }
  .composer-field-grid { grid-template-columns: 1fr; }
}

/* Compact mobile week calendar: seven 3:4 dates and an on-demand month view. */
@media (max-width: 820px) {
  .task-planner-layout { gap: 8px; }
  .task-calendar-card { margin-bottom: 0; }
  .week-strip-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
  }
  .week-strip-row .week-strip {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .week-strip-row .week-strip-cell {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 3 / 4;
    padding: 5px 1px;
    border-radius: 16px;
  }
  .week-month-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid #d7d7df;
    border-radius: 14px;
    color: var(--workspace-purple-deep);
    background: #fff;
    box-shadow: 0 3px 0 #d6d6df;
  }
  .week-month-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 #d6d6df; }
  .week-month-toggle:focus-visible { outline: 3px solid rgba(117, 183, 227, .45); outline-offset: 2px; }
  .week-month-toggle .ui-svg-icon { width: 20px; height: 20px; }
  .mobile-month-calendar:not([hidden]) {
    display: block;
    margin-top: 8px;
    padding: 10px 12px 14px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(18, 19, 26, .06);
  }
  .mobile-month-calendar .cal-head { padding-top: 0; }
  .mobile-month-calendar .calendar-legend { margin-bottom: 0; }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 920px) {
  .mobile-app-bar { height: 54px; padding-block: 5px; }
  .mobile-brand { height: 42px; }
  .mobile-brand > .ui-svg-icon { width: 36px; height: 36px; }
  .app-main { padding-top: 54px; }
  .mobile-bottom-nav { height: 62px; }
  .mobile-nav-item { min-height: 48px; flex-direction: row; }
  .mobile-nav-icon { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Mobile workspace layout contract — scheme B
   Apple-like information hierarchy, with dopamine color reserved for accents. */
@media (max-width: 820px) {
  body {
    --mobile-page-tint: #f2efff;
    --mobile-page-line: #ded6ff;
    --mobile-page-accent: #6652b6;
  }
  body[data-workspace-page="pets"] {
    --mobile-page-tint: #fff0f5;
    --mobile-page-line: #f7d7e4;
    --mobile-page-accent: #c5336e;
  }
  body[data-workspace-page="games"] {
    --mobile-page-tint: #f2efff;
    --mobile-page-line: #ddd4ff;
    --mobile-page-accent: #604bb4;
  }
  body[data-workspace-page="shop"] {
    --mobile-page-tint: #fff7df;
    --mobile-page-line: #f2dfaa;
    --mobile-page-accent: #9b6700;
  }
  body[data-workspace-page="boss"] {
    --mobile-page-tint: #edf6ff;
    --mobile-page-line: #cfe6fb;
    --mobile-page-accent: #246fa8;
  }
  body[data-workspace-page="family"] {
    --mobile-page-tint: #edf9f4;
    --mobile-page-line: #cfeade;
    --mobile-page-accent: #267a5b;
  }

  .app-main {
    scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }
  #viewRoot {
    width: 100%;
    min-width: 0;
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }
  #viewRoot > *,
  .v-card,
  .v-row,
  .workspace-segments,
  .pet-page-layout,
  .task-planner-layout,
  .task-day-panel,
  .task-day-card,
  .p-boss-card,
  .reward-grid,
  .game-grid-3 {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .v-title,
  .v-card-title,
  .workspace-page-copy,
  .workspace-page-copy h1,
  .workspace-page-copy p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .workspace-page-header {
    min-height: 92px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid var(--mobile-page-line);
    border-radius: 22px;
    background: var(--mobile-page-tint);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mobile-page-accent) 10%, transparent);
  }
  .workspace-page-header::after {
    width: 76px;
    height: 76px;
    right: -28px;
    top: -34px;
    border: 14px solid color-mix(in srgb, var(--mobile-page-accent) 12%, transparent);
    border-radius: 25px;
  }
  .workspace-page-copy h1,
  body[data-family-role="parent"][data-workspace-page="tasks"] .parent-task-page-header .workspace-page-copy h1 {
    margin: 0;
    color: #1d1d1f;
    font-size: clamp(25px, 7.2vw, 30px);
    line-height: 1.15;
    letter-spacing: -.035em;
  }
  .workspace-page-copy p,
  body[data-family-role="parent"][data-workspace-page="tasks"] .parent-task-page-header .workspace-page-copy p {
    display: block;
    max-width: 100%;
    margin: 5px 0 0;
    color: #606069;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
  }
  .workspace-page-header .workspace-eyebrow { display: none; }
  .workspace-page-header .workspace-primary-action {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--mobile-page-accent);
    background: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mobile-page-accent) 16%, transparent);
  }
  .workspace-page-header .workspace-primary-action span:last-child { display: none; }
  body[data-family-role="child"][data-workspace-page="tasks"] .workspace-page-header,
  body[data-family-role="child"] .child-page-header,
  body[data-family-role="parent"] .parent-task-page-header {
    min-height: 92px;
  }

  .workspace-segments,
  .v-tabs {
    margin-bottom: 12px;
  }
  .v-card {
    overflow: visible;
    padding: 15px;
  }
  .v-card-title {
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.35;
  }
  .v-card-title small { flex: 0 0 auto; font-size: 11px; }

  /* Parent tasks: readable rows and forms instead of compressed desktop columns. */
  .task-day-card { width: 100%; overflow: hidden; }
  .task-day-heading { min-width: 0; }
  .task-day-heading > div { min-width: 0; }
  .task-summary-strip {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .task-summary-strip span {
    min-width: 0;
    padding: 8px 3px;
    white-space: normal;
  }
  .parent-task-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main main"
      "person points"
      "status actions";
    gap: 8px 10px;
    padding: 12px;
  }
  .parent-task-main { grid-area: main; }
  .parent-task-main strong,
  .task-list-main .v-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.35;
  }
  .parent-task-main small { display: block; }
  .parent-task-person { grid-area: person; }
  .parent-task-person strong { white-space: normal; }
  .parent-task-points { grid-area: points; justify-self: end; margin: 0; }
  .parent-task-status { grid-area: status; display: block; justify-self: start; margin: 0; }
  .parent-task-actions { grid-area: actions; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .parent-task-actions .v-btn { min-width: 0; padding-inline: 11px; }
  .task-template-create-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .task-template-create-fields > * { width: 100%; min-width: 0; }
  .task-template-create-fields .task-template-name { grid-column: 1 / -1; }
  .task-template-create-fields .task-template-reward-type { grid-column: 1; }
  .task-template-create-fields .v-input.num { grid-column: 2; }
  .task-template-create-fields .v-btn { grid-column: 1 / -1; }
  .task-template-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title title"
      "points daily delete";
    gap: 9px 10px;
    padding: 12px;
  }
  .task-template-row > span:first-child { grid-area: icon; }
  .task-template-row > .v-title { grid-area: title; line-height: 1.4; }
  .task-template-row > .v-input { grid-area: points; width: 88px; }
  .task-template-daily { grid-area: daily; min-height: 44px; display: flex; align-items: center; gap: 5px; color: var(--text-mid); font-size: 12px; }
  .task-template-row > .v-btn { grid-area: delete; }

  /* Child tasks: each piece of information owns a row and remains wrap-safe. */
  .v-row.task-list-row,
  .task-list-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main main"
      "reward status"
      "action action";
    gap: 9px 10px;
    padding: 13px;
  }
  .task-list-main { grid-area: main; align-items: flex-start; }
  .task-list-main .v-title { font-size: 15px; }
  .task-list-reward { grid-area: reward; white-space: normal; }
  .task-list-status { grid-area: status; max-width: 148px; white-space: normal; text-align: right; line-height: 1.35; }
  .task-list-action { grid-area: action; width: 100%; justify-content: flex-end; }

  /* Pet cards keep the same 9:16 composition and all desktop information. */
  .pet-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pet-grid-3 > .pd-card-slot { min-width: 0; }
  .pet-grid-3 .pd-card {
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 10px 8px;
  }
  .pet-grid-3 .pd-card .pd-pet-img { margin-top: 12px; }
  .pd-card.unowned .pd-pet-img { flex: 0 1 auto; max-height: 42%; }
  .pet-grid-3 .pd-name { font-size: 14px; }
  .pet-grid-3 .pd-tier { font-size: 10px; }
  .pet-grid-3 .pd-bars { display: flex; gap: 5px; padding-top: 8px; }
  .pet-grid-3 .pd-stat { gap: 4px; }
  .pet-grid-3 .pd-stat .ic { min-width: 26px; font-size: 9px; }
  .pet-grid-3 .pd-stat .bar { height: 6px; }
  .pet-grid-3 .pd-stat .val { width: 25px; font-size: 9px; }
  .pet-grid-3 .pd-child { margin-top: 7px; padding: 9px 4px 6px; font-size: 13px; }
  .pet-detail-layout { grid-template-columns: 1fr; gap: 14px; }
  body[data-family-role="child"] .pet-detail-layout > div:first-child .pd-card {
    width: min(52vw, 240px);
    aspect-ratio: 9 / 16;
    margin-inline: auto;
  }
  .pet-detail-layout .pd-actions-3rows {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
    grid-template-rows: none;
  }
  .pd-panel-head,
  .pd-codex-head { gap: 10px; }
  .pd-status-note { max-width: 44%; }
  .pd-wallet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pd-wallet .wc { aspect-ratio: auto; min-height: 74px; flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .pd-wallet .wc .vc { align-items: center; }
  .pd-interact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pet-detail-layout .pd-care-action { min-height: 78px; aspect-ratio: auto; flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .pet-detail-layout .pd-care-action .pc-info-text { align-items: center; }
  .pd-profile-controls { grid-template-columns: 1fr; gap: 12px; }
  .pd-adopt-panel { flex-wrap: wrap; }
  .pd-codex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Game cards share one footprint; reward controls never force the grid wider. */
  .game-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-reward-grid .v-row > span { min-width: 0; width: auto !important; white-space: normal; }
  .game-reward-grid .v-input { min-width: 0; width: 100%; }
  .game-card-3 .gc-title { white-space: normal; line-height: 1.3; }

  /* Reward cards scale as grid children instead of keeping fixed input widths. */
  .reward-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .reward-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 3 / 4;
    padding: 12px 9px 10px;
    box-sizing: border-box;
  }
  .reward-card .rc-icon { min-height: 0; font-size: clamp(38px, 12vw, 54px); }
  .reward-card .rc-title { width: 100%; min-height: 38px; font-size: 13px; }
  .reward-card .rc-cost-row { min-width: 0; gap: 5px; }
  .reward-card .rc-cur-btn { min-width: 0; padding-inline: 6px; font-size: 11px; }
  .reward-card input.rc-cost { width: 48px; flex-basis: 48px; padding-inline: 4px; }
  .reward-card .rc-cost { max-width: 100%; padding-inline: 8px; font-size: 11px; }
  .reward-card .rc-buy { min-height: 44px; }
  .cos-grid,
  .pd-cosmetic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Parent BOSS settings are deliberately compact and always two-up. */
  .p-boss-card > .v-card-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 17px;
  }
  .p-boss-card > .v-card-title .v-btn { max-width: 102px; white-space: normal; line-height: 1.25; }
  .p-boss-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .p-boss-card-cell {
    min-width: 0;
    min-height: 330px;
    aspect-ratio: auto;
    padding: 10px;
    overflow: visible;
  }
  .p-boss-card-img { flex: 0 0 112px; min-height: 112px; padding: 2px; }
  .p-boss-card-name { min-height: 42px; margin: 4px 0 6px; font-size: 14px; line-height: 1.35; }
  .p-boss-card-row { grid-template-columns: 1fr; gap: 4px; padding: 3px 0; }
  .p-boss-card-label { font-size: 11px; }
  .p-boss-card-reward-grp { grid-template-columns: minmax(0, 1fr) 48px; gap: 5px; }
  .p-boss-card .v-input.num,
  .p-boss-card .v-select { width: 100%; min-width: 0; min-height: 40px; padding: 6px; font-size: 11px; }
  .p-boss-hint { font-size: 12px; line-height: 1.55; }
  .v-boss-page { grid-template-columns: 1fr; }
  .v-boss-card-col { justify-content: center; }
  .v-boss-card { width: min(68vw, 280px); }

  /* Settings and family management use wrapping rows with explicit ownership. */
  body[data-family-role="parent"][data-workspace-page="pets"] .v-card > .v-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
  }
  body[data-family-role="parent"][data-workspace-page="pets"] .v-card > .v-row > .v-title {
    grid-column: 1 / -1;
    line-height: 1.4;
  }
  body[data-family-role="parent"][data-workspace-page="pets"] .v-card > .v-row > .v-input { width: 100%; min-width: 0; }
  body[data-workspace-page="family"] .family-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }
  body[data-workspace-page="family"] .family-inline-form .v-input { width: 100%; min-width: 0; max-width: none !important; }
  body[data-workspace-page="family"] .family-members-card > .v-row { align-items: center; }
  body[data-workspace-page="family"] .family-members-card > .v-row .v-title {
    flex: 1 1 calc(100% - 46px);
    min-width: 0;
  }
}

/* Round two: family overview cards stay compact without hiding the daily decision data. */
.workspace-visual-system .family-member-avatar { width: 70px; }
.workspace-visual-system .family-member-card-action { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }

@media (max-width: 520px) {
  .family-avatar-settings { grid-template-columns: 56px minmax(0, 1fr); padding: 10px; }
  .family-avatar-preview { width: 56px; height: 56px; }
  .family-avatar-upload-control { grid-column: 1 / -1; width: 100%; }
  .family-avatar-reset { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .workspace-visual-system .family-overview-head { align-items: flex-start; gap: 5px; flex-direction: column; }
  .workspace-visual-system .family-overview-head p { font-size: 12px; }
  .workspace-visual-system .family-inline-form { align-items: end; }
  .workspace-visual-system .family-name-field { max-width: none; }
  .workspace-visual-system .family-members-head .v-btn { width: auto; min-width: 44px; padding-inline: 11px; }
  .workspace-visual-system .family-members-head .v-btn span { display: inline; }
  .workspace-visual-system .family-member-grid { grid-template-columns: 1fr; gap: 12px; }
  .workspace-visual-system .family-member-card { min-height: 264px; padding: 15px 15px 14px; gap: 12px; border-radius: 17px; }
  .workspace-visual-system .family-member-identity { align-items: flex-start; gap: 8px; padding-right: 48px; }
  .workspace-visual-system .family-member-avatar { width: 52px; border-width: 3px; }
  .workspace-visual-system .family-member-name { font-size: 15px; }
  .workspace-visual-system .family-member-pet { font-size: 10px; }
  .workspace-visual-system .family-member-pet .workspace-image-icon { width: 15px; height: 15px; }
  .workspace-visual-system .family-member-card-actions { top: 6px; right: 6px; flex-direction: column; gap: 2px; }
  .workspace-visual-system .family-member-card-action { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; }
  .workspace-visual-system .family-member-card-action .workspace-image-icon { width: 17px; height: 17px; }
  .workspace-visual-system .family-member-progress > div { font-size: 11px; }
  .workspace-visual-system .family-member-wallet { gap: 5px 8px; font-size: 11px; }
  .workspace-visual-system .family-member-wallet .workspace-image-icon { width: 18px; height: 18px; }
  .workspace-visual-system .family-member-growth { margin-left: 0; width: 100%; }
  .workspace-visual-system .family-member-primary-action { min-height: 44px; padding-inline: 6px; font-size: 11px; }
  .workspace-visual-system .family-member-primary-action .workspace-image-icon { width: 17px; height: 17px; }
}

/* Round three: pet, reward and BOSS pages share one decision-first hierarchy. */
.workspace-visual-system .pet-grid-3 > .pd-card-slot {
  display: grid;
  align-content: start;
  gap: 10px;
  cursor: default;
}

.workspace-visual-system .pet-grid-3 > .pd-card-slot:hover {
  transform: none;
  filter: none;
}

.workspace-visual-system .pet-card-primary-action {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  margin: 0;
}

.workspace-visual-system .pet-card-primary-action .workspace-image-icon { width: 20px; height: 20px; }
.workspace-visual-system .pd-card { box-shadow: var(--workspace-highlight), var(--workspace-shadow-soft); }
.workspace-visual-system .pd-stat .val,
.workspace-visual-system :is(.wc-val, .rc-cost, .p-boss-overview b, .boss-contribution-strip b) { font-variant-numeric: tabular-nums; }

.workspace-visual-system .parent-reward-create {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--workspace-border-soft);
}

.workspace-visual-system .parent-reward-create-head h3 { margin: 0; color: var(--workspace-ink); font-size: 17px; }
.workspace-visual-system .parent-reward-create-head p { margin: 3px 0 0; color: var(--text-light); font-size: 12px; }
.workspace-visual-system .parent-reward-create-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) minmax(130px, .8fr) minmax(140px, .9fr) minmax(100px, .55fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
}
.workspace-visual-system .parent-reward-create-grid .workspace-field { display: grid; gap: 6px; min-width: 0; }
.workspace-visual-system .parent-reward-create-grid :is(.v-input, .v-select, .parent-reward-add-button) { width: 100%; min-width: 0; min-height: 44px; }
.workspace-visual-system .parent-reward-add-button { white-space: nowrap; }
.workspace-visual-system .parent-reward-help { margin-top: 10px; color: var(--text-light); font-size: 12px; line-height: 1.7; }
.workspace-visual-system .reward-card .rc-meta-label { margin-top: 6px; color: var(--text-light); font-size: 10px; font-weight: 800; }
.workspace-visual-system .reward-card .rc-del { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.workspace-visual-system .reward-card .rc-del-wrap { top: 4px; right: 4px; }
.workspace-visual-system .child-shop-wallet .wallet-cell { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
.workspace-visual-system .child-shop-wallet .wc-copy { display: contents; }
.workspace-visual-system .child-shop-wallet .wc-label { color: var(--text-mid); font-size: 12px; font-weight: 800; white-space: nowrap; }
.workspace-visual-system .child-family-rewards .reward-card { opacity: 1; }
.workspace-visual-system .rc-availability {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 5px;
  border-radius: 999px;
  color: var(--workspace-green-deep);
  font-size: 11px;
  font-weight: 900;
}
.workspace-visual-system .rc-availability.insufficient { padding: 0 9px; color: #8d4057; background: #fde8ee; }
.workspace-visual-system .rc-availability .workspace-image-icon { width: 16px; height: 16px; }
.workspace-visual-system .child-family-rewards .reward-card[data-state="insufficient"] { background: #fff7f9; border-color: #efcbd6; }
.workspace-visual-system .child-family-rewards .reward-card[data-state="insufficient"] .rc-buy { opacity: 1; color: #874159; background: #f6dce5; border: 1px solid #e5b7c5; box-shadow: 0 3px 0 #c98fa1; }

.workspace-visual-system .p-boss-overview,
.workspace-visual-system .boss-contribution-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.workspace-visual-system .p-boss-overview { margin: 14px 0 18px; }
.workspace-visual-system :is(.p-boss-overview, .boss-contribution-strip) > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--workspace-border-soft);
  border-radius: 15px;
  background: var(--workspace-surface-soft);
  box-shadow: var(--workspace-highlight);
}
.workspace-visual-system :is(.p-boss-overview, .boss-contribution-strip) small { color: var(--text-light); font-size: 11px; font-weight: 800; }
.workspace-visual-system :is(.p-boss-overview, .boss-contribution-strip) b { min-width: 0; overflow: hidden; color: var(--workspace-ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-visual-system .p-boss-tier { align-self: flex-start; padding: 5px 9px; border-radius: 999px; color: var(--text-mid); background: var(--workspace-surface-raised); font-size: 11px; font-weight: 900; }
.workspace-visual-system .p-boss-reset-button { color: #a93f54; border-color: #ecc5ce; background: #fff7f8; }
.workspace-visual-system .boss-contribution-strip { margin-bottom: 14px; }
.workspace-visual-system .boss-contribution-strip > p {
  grid-column: 1 / -1;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 13px;
  border-radius: 14px;
  color: var(--text-mid);
  background: #fff8dc;
  font-size: 12px;
  font-weight: 800;
}
.workspace-visual-system .boss-contribution-strip > p .workspace-image-icon { width: 20px; height: 20px; }
.workspace-visual-system .v-boss-card { box-shadow: var(--workspace-highlight), var(--workspace-shadow-soft); }
.workspace-visual-system .v-boss-log-col { display: block; }
.workspace-visual-system .boss-log-disclosure { width: 100%; }
.workspace-visual-system .boss-log-disclosure > summary {
  min-height: 52px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--workspace-border-soft);
  border-radius: 16px;
  color: var(--workspace-ink);
  background: var(--workspace-surface-raised);
  box-shadow: var(--workspace-highlight), var(--workspace-shadow-soft);
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}
.workspace-visual-system .boss-log-disclosure > summary::-webkit-details-marker { display: none; }
.workspace-visual-system .boss-log-disclosure > summary .workspace-image-icon { width: 21px; height: 21px; }
.workspace-visual-system .boss-log-disclosure > summary small { color: var(--text-light); font-size: 11px; }
.workspace-visual-system .boss-log-disclosure[open] > summary { margin-bottom: 10px; border-color: color-mix(in srgb, var(--pink-main) 24%, var(--workspace-border-soft)); }
.workspace-visual-system .boss-log-disclosure > .v-card { width: 100%; margin: 0; box-sizing: border-box; }

@media (max-width: 820px) {
  .workspace-visual-system .parent-reward-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-visual-system .parent-reward-name,
  .workspace-visual-system .parent-reward-add-button { grid-column: 1 / -1; }
  .workspace-visual-system .p-boss-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-visual-system .p-boss-overview > span:last-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .workspace-visual-system .pet-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-visual-system .pet-card-primary-action { padding-inline: 6px; font-size: 11px; }
  .workspace-visual-system .parent-reward-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-visual-system .parent-reward-create-grid .workspace-field > span { font-size: 11px; }
  .workspace-visual-system .child-shop-wallet .wallet-cell { min-height: 94px; padding: 12px 9px; }
  .workspace-visual-system .reward-card .rc-del { width: 44px; height: 44px; }
  .workspace-visual-system .boss-contribution-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-visual-system .boss-contribution-strip > span:nth-child(3) { grid-column: 1 / -1; }
  .workspace-visual-system .boss-contribution-strip > p { grid-column: 1 / -1; }
  .workspace-visual-system .boss-contribution-strip b { font-size: 15px; }
  .workspace-visual-system .p-boss-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-visual-system .p-boss-overview > span:last-child { grid-column: 1 / -1; }
}

@media (min-width: 600px) and (max-width: 820px) and (orientation: portrait) {
  #viewRoot { padding-inline: 24px; }
  .pet-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  body[data-family-role="child"] .pet-detail-layout > div:first-child .pd-card { width: min(34vw, 260px); }
  .reward-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-boss-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .p-boss-card-cell { min-height: 390px; padding: 14px; }
  .p-boss-card-img { flex-basis: 160px; }
  .p-boss-card-row { grid-template-columns: 74px minmax(0, 1fr); align-items: center; }
  .p-boss-card-reward-grp { grid-template-columns: minmax(110px, 1fr) 62px; gap: 8px; }
}

@media (max-width: 390px) {
  .workspace-page-header,
  body[data-family-role="child"] .child-page-header,
  body[data-family-role="parent"] .parent-task-page-header {
    min-height: 92px;
    padding: 14px;
  }
  .workspace-page-copy h1 { font-size: 25px; }
  .workspace-page-copy p { max-width: 100%; }
  .v-card { padding: 13px; }
  .task-day-card { padding: 13px; }
  .p-boss-card-cell { min-height: 318px; padding: 8px; }
  .p-boss-card-img { flex-basis: 102px; min-height: 102px; }
  .p-boss-card-reward-grp { grid-template-columns: minmax(0, 1fr) 44px; }
}

/* Mobile precision layout contract
   Final portrait overrides for aligned two-row content, light navigation and
   compact controls. Kept last so legacy responsive rules cannot compress it. */
:root {
  --mobile-nav-surface: rgba(255, 255, 255, .94);
}

/* Game previews use the same 4:3 artwork tile in both roles. The title sits
   outside the visual tile so every preview remains clean and comparable. */
.game-card-3 {
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.game-card-3 .gc-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(112, 87, 217, .12);
  border-radius: 20px;
  background: #f4f1ff;
  box-shadow: 0 7px 18px rgba(45, 33, 56, .09);
}
.game-card-3 .gc-copy {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 4px 0;
  text-align: center;
}
.game-card-3 .gc-title {
  width: 100%;
  overflow: visible;
  color: var(--workspace-ink);
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}
.game-card-3:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: none;
}
.game-card-3:active { transform: translateY(2px); box-shadow: none; }

@media (max-width: 820px) {
  .mobile-app-bar {
    align-items: center;
    gap: 9px;
  }
  .mobile-brand { min-width: 0; flex: 1 1 auto; }
  .mobile-brand-copy strong { max-width: min(32vw, 180px); }
  .mobile-top-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
  }
  .mobile-family-btn,
  .mobile-role-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid #e6e8ee;
    border-radius: 22px;
    color: #31323a;
    background: #fff;
    box-shadow: 0 5px 15px rgba(18, 19, 26, .07);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }
  .mobile-family-btn .ui-svg-icon,
  .mobile-role-btn .ui-svg-icon { width: 16px; height: 16px; color: #5a47bc; }
  .mobile-family-btn.active { color: #165f91; border-color: #b8dcf5; background: #dff1ff; }
  .mobile-role-btn small {
    padding-left: 5px;
    border-left: 1px solid #e1e3e8;
    color: #7164aa;
    font-size: 9px;
  }

  .mobile-bottom-nav {
    border: 1px solid rgba(210, 216, 225, .84);
    background: var(--mobile-nav-surface);
    box-shadow: 0 14px 34px rgba(55, 62, 74, .16);
    backdrop-filter: blur(20px) saturate(150%);
  }
  .mobile-nav-item {
    color: #727781;
  }
  .mobile-nav-item.active,
  .mobile-nav-item.active[data-tone] {
    color: #17364d;
    background: #dff1ff;
    box-shadow: inset 0 0 0 1px rgba(117, 183, 227, .18);
  }
  .mobile-task-badge { border-color: #fff; }

  /* Seven dates always fit inside the portrait viewport. */
  .week-strip {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    padding: 4px 0 8px;
    overflow: visible;
  }
  .week-strip-cell {
    width: auto;
    min-width: 0;
    min-height: 72px;
    padding: 7px 1px;
    border-radius: 18px;
  }
  .week-strip-cell .ws-label { font-size: 10px; }
  .week-strip-cell .ws-day { font-size: 17px; }
  .week-strip-cell .ws-count { font-size: 8px; }
  .week-strip-cell.sel {
    color: #fff;
    border-color: #ff5c9f;
    background: linear-gradient(155deg, #ff6eaa, #8a67ed);
    box-shadow: 0 5px 12px rgba(201, 62, 135, .22);
  }

  /* Pet and BOSS information regions share one fixed baseline. */
  .v-pet-square-card,
  .v-boss-square-card {
    height: 176px;
    overflow: hidden;
    box-shadow: 0 5px 0 rgba(171, 174, 192, .24), 0 10px 18px rgba(53, 59, 76, .08);
  }
  .v-pet-square-info,
  .v-boss-square-info {
    height: 78px;
    min-height: 78px;
    flex: 0 0 78px;
    box-sizing: border-box;
  }
  .v-boss-square-name { white-space: nowrap; }
  .v-boss-square-stage {
    display: inline;
    margin: 0 3px 0 0;
    font-size: 9px;
    vertical-align: 1px;
  }

  /* Student tasks: a balanced information row and one centered action row. */
  .v-row.task-list-row,
  .task-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topline"
      "submit";
    gap: 12px;
    padding: 13px;
  }
  .child-task-topline {
    grid-area: topline;
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  .child-task-topline .task-list-icon { justify-self: start; }
  .child-task-topline .v-title {
    min-width: 0;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }
  .child-task-topline .task-list-reward {
    justify-self: end;
    color: #e63278;
    font-size: 14px;
    white-space: nowrap;
  }
  .child-task-submit {
    grid-area: submit;
    display: flex;
    justify-content: center;
  }
  .child-task-submit .v-btn {
    width: min(156px, 56%);
    min-height: 44px;
  }
  .child-task-submit .v-btn:disabled {
    color: #826728;
    opacity: 1;
    background: #fff0c9;
    box-shadow: none;
    cursor: default;
  }
  .child-task-submit .v-btn.confirmed:disabled { color: #287558; background: #dff5e9; }

  /* Parent tasks: two strict rows with edge alignment and four equal controls. */
  .parent-task-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tasktop" "taskcontrols";
    gap: 11px;
    padding: 13px;
  }
  .parent-task-topline {
    grid-area: tasktop;
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  .parent-task-topline > strong {
    min-width: 0;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }
  .parent-task-topline .parent-task-points {
    justify-self: end;
    color: #e63278;
    font-size: 14px;
    white-space: nowrap;
  }
  .parent-task-controls {
    grid-area: taskcontrols;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
  }
  .parent-task-controls > * { min-width: 0; width: 100%; justify-self: stretch; }
  .parent-task-controls > * { grid-area: auto !important; }
  .parent-task-controls .parent-task-status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 4px;
    border-radius: 12px;
    color: #69536f;
    background: rgba(255,255,255,.62);
    font-size: 11px;
    text-align: center;
  }
  .parent-task-controls .v-btn { min-height: 42px; padding: 5px 3px; font-size: 11px; }
  .parent-task-controls .v-btn:disabled { opacity: .42; box-shadow: none; }
  .parent-task-controls .parent-task-delete { color: #b93a55; border-color: #f0c8d0; background: #fff6f7; }

  /* Custom task and candidate library keep one readable horizontal row. */
  .task-template-create-fields {
    display: grid;
    grid-template-columns: minmax(64px, .8fr) minmax(64px, .8fr) minmax(100px, 1.55fr);
    gap: 7px;
  }
  .task-template-create-fields > * { min-width: 0; width: 100%; grid-column: auto !important; box-sizing: border-box; }
  .task-template-create-fields .v-select,
  .task-template-create-fields .v-input { min-height: 46px; padding-inline: 8px; font-size: 12px; }
  .task-template-create-fields .task-template-icon,
  .task-template-create-fields .task-template-reward-type,
  .task-template-create-fields .v-input.num { text-align: center; }
  .task-template-create-fields .task-template-icon .workspace-image-icon { width: 26px; height: 26px; }
  .task-template-create-fields > .v-input.num { width: 100% !important; min-width: 0; }
  .task-template-create-fields .v-btn { grid-column: auto !important; min-width: 0; margin-top: 0; }
  .task-template-library-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }
  .task-template-library-head h2 { margin: 0; font-size: 18px; }
  .task-template-library-head p { margin: 3px 0 0; color: var(--text-light); font-size: 11px; }
  .task-template-library-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 6px; }
  .task-template-library-actions .v-btn { min-height: 40px; padding: 6px 9px; font-size: 11px; }
.task-template-group + .task-template-group { margin-top: 14px; }
  .task-template-group .v-card-title { margin-bottom: 7px; font-size: 15px; }
  .task-template-row {
    width: 100%;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 54px 50px;
    grid-template-areas: none;
    align-items: center;
    gap: 6px;
    padding: 9px 8px;
  }
  .task-template-row:has(.task-template-selector) { grid-template-columns: 24px 28px minmax(0, 1fr) 50px 46px; }
  .task-template-row > * { grid-area: auto !important; min-width: 0; }
  .task-template-selector { display: grid; place-items: center; }
  .task-template-selector input { width: 18px; height: 18px; }
  .task-template-row-icon { font-size: 18px; text-align: center; }
  .task-template-row > .v-title {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .task-template-row > .v-input { width: 100%; min-height: 40px; padding: 5px; text-align: center; }
  .task-template-daily { min-height: 40px; justify-content: center; gap: 3px; font-size: 10px; white-space: nowrap; }

  /* Every pet setting is one line: label / equal input / unit. */
  body[data-family-role="parent"][data-workspace-page="pets"] .v-card > .v-row.pet-settings-row {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) 82px 64px;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
  }
  body[data-family-role="parent"][data-workspace-page="pets"] .v-card > .v-row.pet-settings-row > .v-title {
    grid-column: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
  }
  .pet-settings-row > .v-input { width: 82px !important; min-width: 82px; text-align: center; }
  .pet-settings-row > .v-title .workspace-image-icon,
  .pet-settings-unit .workspace-image-icon { width: 18px; height: 18px; vertical-align: 0; }
  .pet-settings-unit { min-height: 18px; display: inline-flex; align-items: center; gap: 3px; color: var(--text-light); font-size: 10px; white-space: nowrap; }
  .pet-adoption-settings-note { margin: -4px 0 8px; color: var(--text-light); font-size: 12px; line-height: 1.5; }

  /* Care actions mirror the wallet cards and use three distinct pale fills. */
  .pd-wallet .wc,
  .pet-detail-layout .pd-care-action {
    min-height: 84px;
    height: 84px;
    border: 1px solid rgba(106, 92, 137, .12);
    border-radius: 17px;
    box-sizing: border-box;
  }
  .pet-detail-layout .pd-care-action {
    color: var(--workspace-ink);
    box-shadow: none;
  }
  .pet-detail-layout .pd-care-action.feed { background: #fff4cf; }
  .pet-detail-layout .pd-care-action.bath { background: #e8f5ff; }
  .pet-detail-layout .pd-care-action.play { background: #fff0f6; }
  .pd-adopt-button,
  .pd-rename-save {
    width: 144px;
    min-width: 144px;
    min-height: 54px;
    padding: 9px 14px;
    border-radius: 18px;
    color: #fff;
    font-weight: 900;
  }
  .pd-rename-save { background: linear-gradient(135deg, #6f78e8, #9d5bdd); box-shadow: 0 4px 0 #5146b4; }

  /* Reward setting rows are one-per-line and titles align left. */
  .game-reward-heading,
  .child-game-heading { justify-content: flex-start; text-align: left; }
  .game-reward-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .game-reward-grid .v-row.game-reward-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(108px, 128px) 58px;
    align-items: center;
    gap: 8px !important;
    padding: 9px 11px;
    border: 1px solid #e4ddfa;
    background: #f3efff;
  }
  .game-reward-name { min-width: 0; color: var(--text-mid); font-size: 13px; }
  .game-reward-row .v-input { min-height: 44px; text-align: center; }
  .game-reward-unit { color: var(--text-light); font-size: 10px; white-space: nowrap; }
  .game-grid-3 { grid-auto-rows: auto; }
  .game-card-3 { aspect-ratio: auto; }
  .game-card-3 .gc-img { aspect-ratio: 16 / 9; }
  .game-card-3 .gc-copy { min-height: 38px; padding: 8px 3px 0; }

  /* Boss cells stand apart from the page and all reward values are centered. */
  .p-boss-card-cell {
    border: 1px solid #e8d7bf;
    background: #fff7e9;
    box-shadow: 0 7px 18px rgba(95, 70, 45, .08);
  }
  .p-boss-card-cell:nth-child(even) { border-color: #cfe2f4; background: #eef7ff; }
  .p-boss-card .v-input.num { text-align: center; }
  .p-boss-card .v-select { text-align: center; text-align-last: center; }

  .dmg-row { gap: 8px; }
  .dmg-row > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 390px) {
  .mobile-brand-copy strong { max-width: 104px; }
  .mobile-family-btn,
  .mobile-role-btn { padding-inline: 8px; }
  .mobile-role-btn small { display: none; }
  .mobile-family-btn span:last-child { display: none; }
  .week-strip { gap: 4px; }
  .week-strip-cell { min-height: 68px; border-radius: 16px; }
  .v-pet-square-card,
  .v-boss-square-card { height: 172px; }
  .task-template-create-fields { grid-template-columns: 62px 62px minmax(88px, 1fr); gap: 6px; }
  .pd-adopt-button,
  .pd-rename-save { width: 136px; min-width: 136px; }
}

/* Latest mobile refinements — task-line alignment and pet care beside the 9:16 card. */
@media (max-width: 820px) {
  /* Legacy grid-area declarations belong to the old parent grid. Reset them
     inside the new first-line grids so +points stays beside the task title. */
  .child-task-topline > *,
  .parent-task-topline > * { grid-area: auto !important; }

  .task-day-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  /* Stable icon-only top actions: two equal circular 48px touch targets. */
  .mobile-top-actions { flex: 0 0 auto; gap: 8px; }
  .mobile-family-btn,
  .mobile-role-btn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    flex: 0 0 48px;
    padding: 0;
    border-radius: 50%;
  }
  .mobile-family-btn .ui-svg-icon,
  .mobile-role-btn .ui-svg-icon { width: 20px; height: 20px; }

  /* Pet care beside the 9:16 card. Wrapper boxes become transparent to the
     mobile grid; secondary panels continue below at full width. */
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout {
    display: grid;
    grid-template-columns: min(52vw, 260px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: stretch;
    gap: 12px;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout > div:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout > div:first-child .pd-card {
    width: 100%;
    margin: 0;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout > div:last-child,
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-actions-3rows {
    display: contents;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pd-care-panel {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    padding: 11px;
    box-sizing: border-box;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pd-care-panel .pd-panel-head {
    flex: 0 0 auto;
    margin-bottom: 8px;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pd-care-panel .pd-interact {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action {
    width: 100%;
    height: auto;
    min-height: 44px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 9px;
    text-align: left;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action .pc-info-text {
    align-items: flex-start;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action.feed {
    color: #4b3510;
    border-color: #ecd17b;
    background: #fff4cf;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action.feed small {
    color: #72551d;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pd-points-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pd-profile-controls {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pd-adopt-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pd-adopt-button {
    justify-self: end;
  }

  .p-boss-card > .v-card-title .p-boss-reset-button,
  .p-boss-reset-button {
    width: auto;
    min-width: 126px;
    max-width: none;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .mobile-brand-copy strong { max-width: 118px; }
  .mobile-family-btn .ui-svg-icon,
  .mobile-role-btn .ui-svg-icon { display: inline-block !important; }
  .mobile-family-btn[hidden] { display: none !important; }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout {
    grid-template-columns: min(52vw, 204px) minmax(0, 1fr);
    gap: 10px;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pd-care-panel { padding: 9px; }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action {
    gap: 5px;
    padding-inline: 7px;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action > span { font-size: 19px; }
}

/* Keep the final mobile cascade aligned with the compact card specification. */
@media (max-width: 820px) {
  .game-entry-heading { justify-content: flex-start; text-align: left; }

  .pd-wallet .wc {
    min-height: 64px;
    height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 8px 12px;
  }
  .pd-wallet .wc .vc { display: flex; flex-direction: row; align-items: baseline; gap: 4px; }
  .pd-wallet .wc-icon .workspace-image-icon { width: 32px; height: 32px; }
  .pd-wallet .v { font-size: 22px; line-height: 1; }
  .pd-wallet .l { display: none; }

  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: 6px;
    padding: 7px 8px;
    white-space: nowrap;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action .pc-action-icon {
    display: inline-grid;
    place-items: center;
    align-self: center;
    line-height: 0;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action b { min-width: 0; font-size: 15px; }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action .pc-action-icon .workspace-image-icon { width: 32px; height: 32px; }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action .pc-cost {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: #72551d;
    font-size: 18px;
    font-weight: 900;
  }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action .pc-cost .workspace-image-icon { width: 16px; height: 16px; }
  body[data-family-role="child"][data-workspace-page="pets"] .pet-detail-layout .pd-care-action:not(.feed) .pc-cost { color: #6b6175; }

  .pd-adopt-button,
  .pd-rename-save {
    background: linear-gradient(135deg, var(--pink-main), var(--purple-main));
    box-shadow: 0 4px 0 var(--pink-dark);
  }

  .week-strip-row {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }
  .week-strip-row .week-strip { grid-column: span 7; }
  .week-strip-row .week-strip-cell { min-height: 0; padding: 4px 0 3px; }
  .week-strip-cell .ws-label { font-size: clamp(9px, 2.5vw, 12px); line-height: 1; white-space: nowrap; }
  .week-strip-cell .ws-day { font-size: clamp(17px, 4.8vw, 22px); line-height: 1.05; }
  .week-month-toggle {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
  }
  .week-month-toggle .ui-svg-icon { width: 18px; height: 18px; }

  .mobile-month-calendar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .mobile-month-calendar .cal-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 6px;
  }
  .mobile-month-calendar .cal-head b { min-width: 0; font-size: clamp(15px, 4vw, 17px); white-space: nowrap; }
  .mobile-month-calendar .cal-head .v-btn.small { width: 44px; min-width: 44px; padding-inline: 0; }
  .mobile-month-calendar .cal-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
  }
  .mobile-month-calendar .cal-dow { min-width: 0; padding-block: 6px; font-size: 11px; }
  .mobile-month-calendar .cal-day {
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    font-size: clamp(12px, 3.4vw, 15px);
  }
}

/* Task card system: shared 3:4 hierarchy with page-specific controls. */
.task-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

/* Legacy task rows used margins for a vertical list; the card grid owns spacing now. */
.task-card-grid .task-list-row + .task-list-row { margin-top: 0; }

.workspace-task-card {
  --task-card-fill: #f3efff;
  --task-card-line: #dcd3f5;
  --task-card-ink: #493d6f;
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: none !important;
  gap: 7px;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--task-card-line) !important;
  border-radius: 20px !important;
  color: var(--task-card-ink);
  background: var(--task-card-fill) !important;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--task-card-line) 82%, #cdbda9), 0 13px 24px rgba(45, 33, 56, .08) !important;
  transition: transform var(--workspace-state) var(--workspace-ease), box-shadow var(--workspace-state), border-color var(--workspace-state);
}

.workspace-task-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--task-card-line) 82%, #cdbda9), 0 18px 30px rgba(45, 33, 56, .12) !important;
}

.workspace-task-card > * { min-width: 0; grid-area: auto !important; }

.workspace-task-card.category-study {
  --task-card-fill: #fff0f6;
  --task-card-line: #f2c6d8;
  --task-card-ink: #8f2853;
}

.workspace-task-card.category-sport {
  --task-card-fill: #eef4ff;
  --task-card-line: #c9d9f7;
  --task-card-ink: #385a9a;
}

.workspace-task-card.category-housework {
  --task-card-fill: #fff5d9;
  --task-card-line: #ead59b;
  --task-card-ink: #76551e;
}

.workspace-task-card.category-custom {
  --task-card-fill: #f3efff;
  --task-card-line: #d9cff5;
  --task-card-ink: #554482;
}

.workspace-task-card .task-card-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(44px, 1fr) auto auto;
  align-items: center;
  justify-items: center;
  gap: 6px;
}

.workspace-task-card .task-card-icon {
  width: clamp(48px, 38%, 68px);
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 17px;
  background: rgba(255, 255, 255, .7);
  line-height: 0;
}

.workspace-task-card .task-card-icon .workspace-image-icon {
  width: 100% !important;
  height: 100% !important;
}

.workspace-task-card .task-card-title {
  width: 100%;
  min-width: 0;
  max-height: calc(1.35em * 3);
  display: -webkit-box;
  overflow: hidden;
  color: var(--workspace-ink);
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 900;
  line-height: 1.35;
  text-align: justify;
  text-align-last: center;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  justify-self: center;
}

.workspace-task-card .task-card-points {
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--task-card-ink);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  justify-self: center !important;
}

.workspace-task-card .task-card-points .workspace-image-icon {
  width: 24px;
  height: 24px;
}

.workspace-task-card .task-card-points b { white-space: nowrap; }

.parent-task-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.parent-task-card { overflow: visible; }
.parent-task-card.status-done { box-shadow: 0 0 0 2px #f1bc50, 0 13px 24px rgba(45, 33, 56, .08) !important; }
.parent-task-card.status-confirmed { box-shadow: 0 0 0 2px #74c9a9, 0 13px 24px rgba(45, 33, 56, .08) !important; }

.parent-task-card .task-card-main {
  grid-template-rows: minmax(36px, 1fr) auto auto;
  gap: 4px;
}
.parent-task-card .task-card-icon { width: clamp(40px, 32%, 48px); border-radius: 14px; }
.parent-task-card .task-card-title { font-size: 13px; line-height: 1.3; }
.parent-task-card .task-card-points { min-height: 24px; font-size: 12px; }
.parent-task-card .task-card-points .workspace-image-icon { width: 20px; height: 20px; }

.parent-task-card .parent-task-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.parent-task-card .parent-task-controls > * { width: 100%; min-width: 0; grid-area: auto !important; }
.parent-task-card .parent-task-status {
  grid-column: 1 / -1 !important;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px 6px;
  box-sizing: border-box;
  border-radius: 999px;
  color: var(--task-card-ink);
  background: rgba(255, 255, 255, .68);
  font-size: 11px;
  text-align: center;
}

.parent-task-card .parent-task-controls .v-btn {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--task-card-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--task-card-line) 82%, #cdbda9);
}

.parent-task-card .parent-task-controls .v-btn .workspace-image-icon {
  width: min(26px, 58%);
  height: min(26px, 58%);
}


.task-template-card {
  grid-template-rows: minmax(44px, 1fr) auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 6px;
}

.task-template-card .task-template-selector {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .86);
}

.task-template-card .task-template-selector input { width: 20px; height: 20px; margin: 0; }
.task-template-card.selected { border-color: var(--workspace-pink) !important; box-shadow: 0 0 0 3px rgba(230, 50, 120, .2), 0 13px 24px rgba(45, 33, 56, .08) !important; }

.task-template-card .task-template-points {
  width: 100%;
  gap: 3px;
}

.task-template-card .task-template-points .v-input.num {
  width: 46px;
  min-width: 46px;
  min-height: 36px;
  height: 36px;
  padding: 3px 4px;
  border-color: color-mix(in srgb, var(--task-card-line) 72%, #c5b7a7);
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

.task-template-card .task-template-controls { width: 100%; display: flex; justify-content: center; }
.task-template-card .task-template-daily {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--task-card-ink);
  background: rgba(255, 255, 255, .68);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.task-template-card .task-template-daily input { width: 18px; height: 18px; margin: 0; }

.child-task-card .child-task-submit {
  width: 100%;
  display: flex;
  justify-content: center;
}

.child-task-card .child-task-submit .v-btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 8px;
}

.child-task-card .child-task-submit .v-btn:disabled { opacity: 1; }
.child-task-card .task-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 8px;
}
.child-task-card .task-card-title { text-align: center; }
.child-task-card .task-card-icon,
.child-task-card .task-card-title,
.child-task-card .task-card-points { flex: 0 0 auto; }
.task-card-grid > :is(.task-empty-state, .task-template-empty, .v-empty) { grid-column: 1 / -1; }

@media (min-width: 821px) {
  .task-template-card {
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  /* Balance the icon's top whitespace with the daily control's bottom whitespace. */
  .task-template-card > :is(.task-card-icon, .task-card-title, .task-template-points, .task-template-controls) {
    transform: translateY(8px);
  }
}

/* Round five: keep care actions calm, contained, and consistent across breakpoints. */
body.workspace-visual-system .pet-detail-layout .pd-care-panel { overflow: hidden; }
body.workspace-visual-system .pet-detail-layout .pd-care-action {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74);
}
body.workspace-visual-system .pet-detail-layout .pd-care-action.feed {
  color: var(--care-action-feed-ink);
  border-color: var(--care-action-feed-border);
  background: var(--care-action-feed-surface);
}
body.workspace-visual-system .pet-detail-layout .pd-care-action.bath {
  color: var(--care-action-bath-ink);
  border-color: var(--care-action-bath-border);
  background: var(--care-action-bath-surface);
}
body.workspace-visual-system .pet-detail-layout .pd-care-action.play {
  color: var(--care-action-play-ink);
  border-color: var(--care-action-play-border);
  background: var(--care-action-play-surface);
}
body.workspace-visual-system .pet-detail-layout .pd-care-action.feed .pc-cost { color: var(--care-action-feed-ink); }
body.workspace-visual-system .pet-detail-layout .pd-care-action.bath .pc-cost { color: var(--care-action-bath-ink); }
body.workspace-visual-system .pet-detail-layout .pd-care-action.play .pc-cost { color: var(--care-action-play-ink); }

/* On desktop, the 9:16 BOSS card defines this row; damage history uses the same
   height and scrolls inside its list instead of stretching the page. */
@media (min-width: 821px) {
  body.workspace-visual-system .v-boss-page {
    height: calc(330px * 16 / 9);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  body.workspace-visual-system .v-boss-card-col,
  body.workspace-visual-system .v-boss-log-col { min-height: 0; }
  body.workspace-visual-system .v-boss-card-col > .v-boss-card {
    height: 100%;
    aspect-ratio: 9 / 16;
  }
  body.workspace-visual-system .v-boss-log-col { display: flex; }
  body.workspace-visual-system .boss-log-disclosure[open] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.workspace-visual-system .boss-log-disclosure[open] > summary { flex: 0 0 52px; }
  body.workspace-visual-system .boss-log-disclosure[open] > .v-card {
    height: calc(100% - 62px);
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.workspace-visual-system .boss-log-disclosure[open] .dmg-log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
}

/* A child selector always shares the available mobile width equally. */
@media (max-width: 820px) {
  .child-switch-bar {
    display: grid;
    grid-template-columns: repeat(var(--child-switch-count), minmax(0, 1fr));
    width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .child-switch-chip {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .child-switch-chip img { flex: 0 0 auto; }
}

@media (min-width: 1500px) {
  .task-card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .parent-task-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .parent-task-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .task-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .parent-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .workspace-task-card { padding: 9px; border-radius: 18px !important; }
  .workspace-task-card .task-card-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: minmax(40px, 1fr) auto auto;
    gap: 5px;
  }
  .workspace-task-card .task-card-main > * { grid-area: auto !important; }
  .workspace-task-card .task-card-title { font-size: clamp(13px, 3.8vw, 15px); }
  .workspace-task-card .task-card-icon { width: clamp(46px, 35%, 60px); }
  .workspace-task-card .task-card-points { min-height: 27px; }
  .parent-task-card .parent-task-controls { gap: 4px; }
  .parent-task-card .parent-task-controls .v-btn { min-height: 0; padding: 7px; }
  .task-filter-row { padding-bottom: 0; margin-bottom: 14px; }
  .task-template-card .task-template-points .v-input.num { min-height: 34px; height: 34px; }
  .child-task-card .child-task-submit .v-btn { width: 100%; min-height: 42px; }
  .child-task-card .task-card-main {
    gap: 12px;
    justify-content: space-evenly;
  }
}

/* Inline icon content must retain one shared baseline in every layout mode. */
.workspace-inline-icon {
  display: inline-flex;
  align-items: center;
  gap: .28em;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.2;
}
.workspace-inline-icon .workspace-image-icon { vertical-align: middle; }
.workspace-inline-icon--compact { gap: .18em; }

/* JS enables this only while the task cards occupy no more than two rows. */
@media (min-width: 821px) {
  .task-planner-layout.task-planner-balanced .task-calendar-card {
    min-height: var(--task-panel-balanced-height, auto);
    box-sizing: border-box;
  }
}

/* Parent pet cards fit in the first screen without changing child card layout. */
.pet-grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(190px, 250px));
  justify-content: start;
}
.pet-grid-3 > .pd-card-slot { max-width: 250px; }
.pet-grid-3 .pd-card { aspect-ratio: 9 / 16; }

/* Keep icon labels in settings and game rewards on one visual line at every size. */
body[data-family-role="parent"][data-workspace-page="pets"] .v-card > .v-row.pet-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 72px;
  align-items: center;
  gap: 10px;
}

.pet-settings-row > .v-title, .pet-settings-unit, .game-reward-heading > span, .child-game-heading > span, .game-reward-unit { display: inline-flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.25; }
.pet-settings-row > .v-title, .pet-settings-unit, .game-reward-unit { white-space: nowrap; }
.pet-settings-row > .v-title .workspace-image-icon, .pet-settings-unit .workspace-image-icon, .game-reward-unit .workspace-image-icon, .game-reward-heading .workspace-image-icon, .child-game-heading .workspace-image-icon { width: 18px; height: 18px; }
.game-reward-grid .v-row.game-reward-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 128px) auto; align-items: center; gap: 10px; }

/* Custom task controls stay compact and keep a deterministic grid position. */
.task-template-reward-native { display: none !important; }
.task-template-create-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.task-template-create-head .v-card-title { margin: 0; }
.task-template-create-head p { margin: 0; color: var(--text-light); font-size: 13px; font-weight: 700; }
.task-template-create-fields { grid-template-columns: 96px 108px minmax(240px, 380px) minmax(190px, 222px) 88px 184px; align-items: center; }
.task-template-create .task-template-create-fields > * { height: 44px; min-height: 44px; }
.task-template-create-fields > .task-template-icon { grid-column: 1; grid-row: 1; }
.task-template-create-fields > #stCat { grid-column: 2; grid-row: 1; }
.task-template-create-fields > .task-template-name { grid-column: 3; grid-row: 1; }
.task-template-create-fields > #stRewardDropdown { grid-column: 4; grid-row: 1; }
.task-template-create-fields > .v-input.num { grid-column: 5; grid-row: 1; }
.task-template-create-fields > .v-btn { grid-column: 6; grid-row: 1; }
.task-template-reward-dropdown { position: relative; min-width: 0; z-index: 12; }
.task-template-reward-dropdown-trigger {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
}
.task-template-reward-dropdown-label,
.task-template-reward-dropdown-option { display: flex; align-items: center; gap: 7px; min-width: 0; }
.task-template-reward-dropdown-label .workspace-image-icon,
.task-template-reward-dropdown-option .workspace-image-icon { width: 22px; height: 22px; }
.task-template-reward-dropdown-arrow {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--workspace-state);
}
.task-template-reward-dropdown.open .task-template-reward-dropdown-arrow { transform: translateY(2px) rotate(225deg); }
.task-template-reward-dropdown-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 40;
  visibility: hidden;
  opacity: 0;
  padding: 6px;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(45, 33, 56, .16);
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--workspace-state), transform var(--workspace-state), visibility var(--workspace-state);
}
.task-template-reward-dropdown.open .task-template-reward-dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.task-template-reward-dropdown-option {
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  color: var(--text-mid);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}
.task-template-reward-dropdown-option:hover,
.task-template-reward-dropdown-option.active { color: var(--pink-dark); background: var(--pink-pale); }

@media (min-width: 821px) and (max-width: 1200px) {
  .task-template-create-fields { grid-template-columns: 96px 108px minmax(0, 1fr); grid-template-rows: repeat(3, 44px); }
  .task-template-create-fields > .task-template-icon { grid-column: 1; grid-row: 1; }
  .task-template-create-fields > #stCat { grid-column: 2; grid-row: 1; }
  .task-template-create-fields > .task-template-name { grid-column: 3; grid-row: 1; }
  .task-template-create-fields > #stRewardDropdown { grid-column: 1 / 3; grid-row: 2; }
  .task-template-create-fields > .v-input.num { grid-column: 3; grid-row: 2; width: 100%; }
  .task-template-create-fields > .v-btn { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 820px) {
  .task-template-create-head { align-items: flex-start; gap: 6px; flex-direction: column; margin-bottom: 10px; }
  .task-template-create-head p { font-size: 12px; }
  .task-template-create-fields { grid-template-columns: 72px 72px minmax(0, 1fr); grid-template-rows: repeat(3, 44px); gap: 7px; }
  .task-template-create .task-template-create-fields > * { height: 44px; min-height: 44px; }
  .task-template-create-fields > #stIcon { grid-column: 1 !important; grid-row: 1; }
  .task-template-create-fields > #stCat { grid-column: 2 !important; grid-row: 1; }
  .task-template-create-fields > .task-template-name { grid-column: 3 !important; grid-row: 1; }
  .task-template-create-fields > #stRewardDropdown { grid-column: 1 / 3 !important; grid-row: 2; }
  .task-template-create-fields > .v-input.num { grid-column: 3 !important; grid-row: 2; }
  .task-template-create-fields > .v-btn { grid-column: 1 / -1 !important; grid-row: 3; }
}

/* Family members: each card keeps the day's decisions visible at a glance. */
.family-overview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.family-overview-head .v-card-title { margin: 0; }
.family-overview-head p { margin: 0; color: var(--text-light); font-size: 13px; font-weight: 700; }
.family-avatar-settings { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 10px 12px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--workspace-line); border-radius: 18px; background: var(--workspace-surface-soft); }
.family-avatar-preview { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(221, 190, 158, .44); }
.family-avatar-preview.default { color: var(--workspace-pink-deep); background: #fff0f6; }
.family-avatar-preview .workspace-image-icon { width: 39px; height: 39px; }
.family-avatar-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.family-avatar-copy { min-width: 0; display: grid; gap: 3px; }
.family-avatar-copy strong { color: var(--workspace-ink); font-size: 15px; }
.family-avatar-copy span { color: var(--text-mid); font-size: 12px; line-height: 1.4; }
.family-avatar-upload-control { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 11px; border: 1px solid var(--workspace-line); border-radius: 13px; color: var(--workspace-ink); background: var(--workspace-surface); font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.family-avatar-upload-control input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.family-avatar-upload-control .workspace-image-icon { width: 19px; height: 19px; }
.family-avatar-reset { min-height: 44px; white-space: nowrap; }
.family-inline-form { display: flex; align-items: end; gap: 12px; }
.family-name-field { flex: 0 1 300px; max-width: 300px; display: flex; flex-direction: column; gap: 6px; }
.family-inline-form > .v-btn { flex: 0 0 auto; min-height: 44px; }
.family-name-field > span { color: var(--text-mid); font-size: 12px; font-weight: 800; }
.family-members-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.family-members-head .v-card-title { margin: 0; }
.family-members-head .v-btn { flex: 0 0 auto; }
.family-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.family-member-card { position: relative; min-height: 272px; display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow: hidden; border: 1px solid #f1d7e2; border-radius: 20px; background: linear-gradient(160deg, #fff7fb, #fff1f6); box-shadow: 0 4px 0 rgba(232, 190, 208, .72); box-sizing: border-box; }
.family-member-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.9), transparent 26%), radial-gradient(circle at 86% 84%, rgba(225,218,255,.5), transparent 30%); }
.family-member-identity { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding-right: 76px; }
.family-member-identity > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.family-member-avatar { position: relative; z-index: 1; width: 70px; aspect-ratio: 1; flex: 0 0 auto; display: block; overflow: hidden; border: 4px solid rgba(255,255,255,.9); border-radius: 50%; background: #fff8ee; box-shadow: 0 5px 12px rgba(107, 67, 89, .13); }
.family-member-avatar.system { background-image: var(--avatar-sheet); background-size: 500% 200%; background-position: var(--avatar-x) var(--avatar-y); background-repeat: no-repeat; }
.family-member-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.family-member-name { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; color: var(--workspace-ink); font-size: 18px; line-height: 1.2; }
.family-member-pet { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-mid); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.family-member-pet .workspace-image-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.family-member-progress { position: relative; z-index: 1; display: grid; gap: 7px; }
.family-member-progress > div { display: flex; align-items: baseline; justify-content: space-between; color: var(--text-mid); font-size: 12px; font-weight: 800; }
.family-member-progress b { color: var(--workspace-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.family-member-progress-track { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(238, 190, 210, .42); }
.family-member-progress-track i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--workspace-pink); transition: width var(--workspace-state); }
.family-member-wallet { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; color: var(--text-mid); font-size: 12px; font-weight: 800; }
.family-member-wallet > span { display: inline-flex; align-items: center; gap: 4px; }
.family-member-wallet .workspace-image-icon { width: 20px; height: 20px; }
.family-member-wallet b { color: var(--workspace-ink); font-variant-numeric: tabular-nums; }
.family-member-growth { margin-left: auto; color: var(--text-mid); }
.family-member-growth b { color: var(--pink-dark); font-size: 14px; }
.family-member-primary-action { position: relative; z-index: 1; width: 100%; min-height: 44px; margin-top: auto; justify-content: center; }
.family-member-gender { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; font-size: 15px; line-height: 1; }
.family-member-gender.boy { background: #53a7ec; }
.family-member-gender.girl { background: #f47ca8; }
.family-member-card-actions { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; gap: 4px; }
.family-member-card-action { width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(233,190,209,.9); border-radius: 12px; background: rgba(255,255,255,.82); color: var(--text-light); cursor: pointer; }
.family-member-card-action.remove { color: #ce5574; }
.family-member-card-action .workspace-image-icon { width: 15px; height: 15px; }

/* Growth board: each child owns one calm, scannable progress card. */
.family-growth-board { padding: 0; overflow: hidden; border-color: #efd8bd; background: #fffdf8; }
.family-growth-board-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid #f3e3ce; background: linear-gradient(135deg, #fff6dc, #fffaf0 72%); }
.family-growth-board-title { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.family-growth-board-title > .workspace-image-icon { width: 30px; height: 30px; }
.family-growth-board-title h2 { margin: 0; color: var(--workspace-ink); font-size: 19px; line-height: 1.25; }
.family-growth-board-title p { margin: 3px 0 0; color: var(--text-light); font-size: 12px; font-weight: 700; }
.family-growth-board-heading time { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #f0d7b8; border-radius: 999px; color: #96612e; background: rgba(255,255,255,.74); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.family-growth-member-list { display: grid; gap: 12px; padding: 16px 22px; }
.family-growth-member-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head stats" "actions stats"; gap: 14px 18px; padding: 16px; border: 1px solid #f0dce4; border-radius: 18px; background: linear-gradient(135deg, #fffafb, #fff5f8); box-shadow: 0 3px 0 rgba(235, 206, 216, .56); }
.family-growth-member-head { grid-area: head; min-width: 0; display: flex; align-items: center; gap: 10px; }
.family-growth-member-head .family-member-avatar { width: 48px; border-width: 3px; box-shadow: 0 3px 8px rgba(107,67,89,.1); }
.family-growth-member-copy { min-width: 0; }
.family-growth-member-copy h3 { margin: 0; color: var(--workspace-ink); font-size: 17px; line-height: 1.25; }
.family-growth-member-copy p { margin: 3px 0 0; color: var(--text-mid); font-size: 12px; font-weight: 700; }
.family-growth-member-copy p b { display: inline-flex; align-items: center; gap: 3px; color: #bf6d15; font-variant-numeric: tabular-nums; }
.family-growth-member-copy .workspace-image-icon { width: 17px; height: 17px; }
.family-growth-total { margin-left: auto; color: var(--text-light); font-size: 11px; font-weight: 800; white-space: nowrap; }
.family-growth-total b { color: var(--pink-dark); font-size: 15px; font-variant-numeric: tabular-nums; }
.family-growth-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); align-self: stretch; overflow: hidden; border: 1px solid #f0dfe5; border-radius: 14px; background: #fff; }
.family-growth-stats > span { min-width: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 8px 7px; border-left: 1px solid #f4e6ea; }
.family-growth-stats > span:first-child { border-left: 0; }
.family-growth-stats b { font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.family-growth-stats small { color: var(--text-light); font-size: 11px; font-weight: 800; white-space: nowrap; }
.family-growth-stats .confirmed b { color: #2e9a72; }
.family-growth-stats .waiting b { color: #c07a1c; }
.family-growth-stats .pending b { color: var(--workspace-purple); }
.family-growth-actions { grid-area: actions; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-light); font-size: 12px; font-weight: 700; }
.family-growth-point-actions { display: flex; gap: 8px; }
.family-growth-point-actions .v-btn { min-height: 40px; white-space: nowrap; }
.family-growth-point-actions .v-btn:first-child { color: var(--pink-dark); border-color: #edc3d3; background: #fff5f9; }
.family-growth-board-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px 18px; border-top: 1px solid #f3e5d7; background: #fffaf3; }
.family-growth-board-footer p { margin: 0; color: var(--text-light); font-size: 12px; font-weight: 700; }
.family-growth-undo { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.family-growth-undo .workspace-image-icon { width: 17px; height: 17px; }

.family-member-modal-overlay { position: fixed; z-index: 910; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(45, 33, 56, .46); backdrop-filter: blur(5px); }
.family-member-modal { width: min(680px, 100%); max-height: min(760px, calc(100dvh - 40px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.88); border-radius: 25px; background: var(--workspace-surface); box-shadow: var(--workspace-shadow-float); }
.family-member-modal header, .family-member-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; }
.family-member-modal header { border-bottom: 1px solid var(--workspace-line); }
.family-member-modal header h2 { margin: 1px 0 0; font-size: 21px; }
.family-member-modal-close { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--workspace-line); border-radius: 13px; background: #fff; color: var(--text-mid); cursor: pointer; }
.family-member-modal-close .workspace-image-icon { width: 18px; height: 18px; }
.family-member-modal-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px 20px; padding: 18px 20px; overflow: auto; }
.family-member-avatar-preview { display: grid; place-items: center; align-self: start; padding: 12px; border-radius: 19px; background: #fff4f8; }
.family-member-avatar.preview { width: 96px; }
.family-member-gender-picker { display: flex; gap: 8px; }
.family-member-gender-picker button { min-height: 40px; flex: 1; border: 1px solid var(--workspace-line); border-radius: 12px; background: #fff; color: var(--text-mid); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.family-member-gender-picker button.active { border-color: var(--pink-main); color: var(--pink-dark); background: var(--pink-pale); }
.family-avatar-libraries { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.family-avatar-libraries h3 { margin: 0 0 8px; color: var(--text-mid); font-size: 13px; }
.family-avatar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.family-avatar-option { aspect-ratio: 1; display: grid; place-items: center; padding: 3px; border: 2px solid transparent; border-radius: 13px; background: #fff7fa; cursor: pointer; }
.family-avatar-option.selected { border-color: var(--pink-main); background: #fff0f6; box-shadow: 0 0 0 3px rgba(230,50,120,.12); }
.family-avatar-option .family-member-avatar { width: 100%; border-width: 1px; box-shadow: none; }
.family-avatar-upload { grid-column: 1 / -1; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #d9a5bb; border-radius: 13px; color: var(--pink-dark); background: #fff9fb; font-size: 13px; font-weight: 800; cursor: pointer; }
.family-avatar-upload .workspace-image-icon { width: 18px; height: 18px; }
.family-avatar-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.family-member-modal .workspace-field { grid-column: 1 / -1; }
.family-member-modal footer { border-top: 1px solid var(--workspace-line); justify-content: flex-end; }

/* First-run family setup mirrors the workspace's existing modal hierarchy. */
.family-empty-guide { width: min(640px, 100%); min-height: 390px; display: grid; place-items: center; align-content: center; gap: 14px; margin: clamp(28px, 9vh, 96px) auto; padding: clamp(42px, 7vw, 64px); text-align: center; }
.family-empty-guide .family-empty-icon { display: grid; place-items: center; width: 106px; height: 106px; border-radius: 32px; background: linear-gradient(145deg, #fff1f7, #ffe2ed); box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(217, 91, 139, .16); }
.family-empty-guide h1 { margin: 4px 0 0; color: var(--workspace-ink); font-size: clamp(24px, 3vw, 31px); line-height: 1.2; }
.family-empty-guide p { max-width: 410px; margin: 0 0 8px; color: var(--text-light); font-size: 14px; font-weight: 700; line-height: 1.65; }
.family-empty-guide .v-btn { min-height: 48px; padding-inline: 19px; }
.family-create-overlay { position: fixed; z-index: 920; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(45, 33, 56, .46); backdrop-filter: blur(5px); }
.family-create-modal { width: min(520px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 25px; background: var(--workspace-surface-raised); box-shadow: var(--workspace-shadow-float); }
.family-create-modal header { display: grid; grid-template-columns: 48px minmax(0, 1fr) 38px; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--workspace-line); background: var(--workspace-glass-surface); }
.family-create-modal-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: #fff0f6; color: var(--pink-dark); }
.family-create-modal-mark .workspace-image-icon { width: 26px; height: 26px; }
.family-create-modal header p { margin: 0 0 2px; color: var(--pink-dark); font-size: 12px; font-weight: 800; }
.family-create-modal header h2 { margin: 0; color: var(--workspace-ink); font-size: 21px; line-height: 1.25; }
.family-create-modal-body { display: grid; gap: 8px; padding: 22px 20px 18px; }
.family-create-modal-body .workspace-field { display: grid; gap: 7px; }
.family-create-modal-help { margin: 0; color: var(--text-light); font-size: 12px; font-weight: 700; }
.family-create-modal footer { display: flex; justify-content: flex-end; gap: 10px; margin: 14px -20px -18px; padding: 14px 20px; border-top: 1px solid var(--workspace-line); background: var(--workspace-glass-surface); }

@media (max-width: 520px) {
  body[data-family-role="parent"][data-workspace-page="pets"] .pet-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-family-role="parent"][data-workspace-page="pets"] .pet-grid-3 > .pd-card-slot { max-width: none; }
  body[data-family-role="parent"][data-workspace-page="pets"] .pet-grid-3 .pd-card { width: 100%; aspect-ratio: 9 / 16; }
  .family-member-grid { grid-template-columns: 1fr; gap: 12px; }
  .family-member-card { min-height: 264px; border-radius: 17px; padding: 15px 15px 14px; gap: 12px; }
  .family-member-name { font-size: 15px; }
  .family-members-head .v-btn span { display: none; }
  .family-members-head .v-btn { width: 42px; min-width: 42px; padding: 0; }
  .family-member-modal-overlay { padding: 0; align-items: end; }
  .family-member-modal { max-height: 92dvh; border-radius: 25px 25px 0 0; }
  .family-empty-guide { min-height: min(450px, calc(100dvh - 160px)); margin: 18px auto; padding: 36px 24px; }
  .family-empty-guide .family-empty-icon { width: 92px; height: 92px; border-radius: 28px; }
  .family-empty-guide h1 { font-size: 25px; }
  /* mobile-family-create-centered: keep this first-run dialog clear of the persistent bottom navigation. */
  .family-create-overlay {
    align-items: center;
    padding: max(18px, env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom));
  }
  .family-create-modal {
    max-height: calc(100dvh - 138px);
    overflow-y: auto;
    border-radius: 25px;
  }
  .family-create-modal header { padding: 16px; }
  .family-create-modal-body { padding: 18px 16px 14px; }
  .family-create-modal footer { margin: 12px -16px -14px; padding: 12px 16px; }
  .family-member-modal-body { grid-template-columns: 1fr; gap: 13px; }
  .family-member-avatar-preview { display: none; }
  .family-avatar-libraries { grid-template-columns: 1fr; gap: 12px; }
  .family-growth-board-heading { gap: 10px; padding: 16px; }
  .family-growth-board-title > .workspace-image-icon { width: 26px; height: 26px; }
  .family-growth-board-title h2 { font-size: 17px; }
  .family-growth-board-title p { font-size: 11px; line-height: 1.4; }
  .family-growth-board-heading time { padding: 4px 7px; font-size: 11px; }
  .family-growth-member-list { gap: 12px; padding: 12px 16px; }
  .family-growth-member-card { grid-template-columns: 1fr; grid-template-areas: "head" "stats" "actions"; gap: 13px; padding: 14px; border-radius: 16px; }
  .family-growth-member-head .family-member-avatar { width: 46px; }
  .family-growth-member-copy h3 { font-size: 16px; }
  .family-growth-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .family-growth-stats > span { padding: 9px 4px; }
  .family-growth-stats b { font-size: 17px; }
  .family-growth-stats small { font-size: 10px; }
  .family-growth-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .family-growth-point-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-growth-point-actions .v-btn { width: 100%; min-width: 0; padding-inline: 6px; font-size: 12px; }
  .family-growth-board-footer { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px 16px 16px; }
  .family-growth-board-footer p { font-size: 11px; }
  .family-growth-undo { width: 100%; justify-content: center; }
}

/* Parent family rewards: keep the explanatory title predictable and mobile cards two-up. */
body[data-family-role="parent"][data-workspace-page="shop"] .family-rewards-title {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px 9px;
}
body[data-family-role="parent"][data-workspace-page="shop"] .family-rewards-title-main,
body[data-family-role="parent"][data-workspace-page="shop"] .family-rewards-title-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  line-height: 1.3;
  white-space: nowrap;
}
body[data-family-role="parent"][data-workspace-page="shop"] .family-rewards-title > .family-rewards-title-note {
  margin-left: 0;
  color: var(--text-mid);
  font-size: inherit;
  font-weight: inherit;
}
body[data-family-role="parent"][data-workspace-page="shop"] .family-rewards-title-note .workspace-image-icon {
  width: 23px;
  height: 23px;
}

@media (max-width: 820px) {
  body[data-family-role="parent"][data-workspace-page="shop"] .parent-family-rewards .reward-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  body[data-family-role="parent"][data-workspace-page="shop"] .parent-family-rewards .reward-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 3 / 4;
    box-sizing: border-box;
  }
  body[data-family-role="parent"][data-workspace-page="shop"] .family-rewards-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 5px;
  }
  body[data-family-role="parent"][data-workspace-page="shop"] .family-rewards-title > .family-rewards-title-note {
    font-size: 12px;
    font-weight: 700;
  }
  body[data-family-role="parent"][data-workspace-page="shop"] .family-rewards-title-note .workspace-image-icon {
    width: 20px;
    height: 20px;
  }
}

/* Cosmetic pedestals and pet cutouts share a visible but gentle bobbing motion. */
@media (prefers-reduced-motion: no-preference) {
  .pd-card .pd-pet-img { animation: workspace-pet-bob 3.4s ease-in-out infinite !important; animation-play-state: running; }
  .pd-card .pd-cosmetic-pedestal { animation: workspace-pedestal-bob 3.4s ease-in-out infinite !important; animation-play-state: running; }
  .pd-card-slot:nth-child(even) .pd-pet-img, .pd-card-slot:nth-child(even) .pd-cosmetic-pedestal { animation-delay: -.8s !important; }
}
@keyframes workspace-pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes workspace-pedestal-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Family member composer: three concise rows with progressive avatar selection. */
.family-member-avatar {
  width: min(68%, 116px);
  background: linear-gradient(145deg, #fff9ee, #f7f2ff);
}
.family-member-avatar.system { background-image: none; }
.family-member-avatar img { object-fit: contain; object-position: center; }
.family-member-modal { width: min(580px, 100%); max-height: min(720px, calc(100dvh - 32px)); }
.family-member-modal header { min-height: 42px; padding-block: 14px; }
.family-member-modal header h2 { margin: 0; }
.family-member-modal-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.family-member-avatar-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.family-member-avatar-preview { width: 104px; height: 104px; padding: 6px; box-sizing: border-box; }
.family-member-avatar.preview { width: 100%; }
.family-avatar-pick-button,
.family-avatar-upload {
  grid-column: auto;
  box-sizing: border-box;
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: #fff;
  color: var(--text-mid);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.family-avatar-pick-button:hover,
.family-avatar-upload:hover { border-color: var(--pink-main); color: var(--pink-dark); background: var(--pink-pale); }
.family-avatar-pick-button:focus-visible,
.family-avatar-upload:focus-within { outline: 3px solid rgba(230, 50, 120, .2); outline-offset: 2px; }
.family-avatar-pick-button .workspace-image-icon,
.family-avatar-upload .workspace-image-icon { width: 20px; height: 20px; }
.family-avatar-libraries {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--workspace-line);
  border-radius: 17px;
  background: #fff9fb;
}
.family-avatar-libraries.open { display: grid; }
.family-avatar-grid { gap: 7px; }
.family-avatar-option { min-width: 44px; min-height: 44px; padding: 2px; border-radius: 12px; }
.family-avatar-option .family-member-avatar { width: 100%; border-width: 1px; background: #fff; }
.family-member-details-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
.family-member-details-row .workspace-field { display: flex; flex-direction: column; gap: 6px; }
.family-member-details-row .workspace-field > span { color: var(--text-mid); font-size: 13px; font-weight: 800; }
.family-member-details-row .v-input,
.family-member-details-row .v-select { width: 100%; min-height: 48px; box-sizing: border-box; }
.family-member-modal-actions { justify-content: flex-end; }
.family-member-modal-actions .v-btn { min-width: 112px; }

.family-avatar-crop-overlay { position: fixed; z-index: 930; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(35, 25, 45, .58); }
.family-avatar-crop-modal { width: min(430px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.85); border-radius: 24px; background: var(--workspace-surface); box-shadow: var(--workspace-shadow-float); }
.family-avatar-crop-modal header,
.family-avatar-crop-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.family-avatar-crop-modal header { border-bottom: 1px solid var(--workspace-line); }
.family-avatar-crop-modal header h2 { margin: 0; font-size: 20px; }
.family-avatar-crop-modal footer { justify-content: flex-end; border-top: 1px solid var(--workspace-line); }
.family-avatar-crop-body { padding: 18px; text-align: center; }
.family-avatar-crop-stage { position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 18px; background: #e7e4e9; cursor: grab; touch-action: none; user-select: none; }
.family-avatar-crop-stage:active { cursor: grabbing; }
.family-avatar-crop-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translate(var(--crop-x, 0), var(--crop-y, 0)) scale(var(--crop-zoom, 1)); transform-origin: center; pointer-events: none; }
.family-avatar-crop-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 80px rgba(26, 20, 31, .62); border: 3px solid #fff; pointer-events: none; }
.family-avatar-crop-zoom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 16px; color: var(--text-mid); font-size: 13px; font-weight: 800; }
.family-avatar-crop-zoom input { width: 100%; accent-color: var(--pink-main); }
.family-avatar-crop-body p { margin: 9px 0 0; color: var(--text-light); font-size: 12px; }

@media (max-width: 520px) {
  .family-member-modal { max-height: 88dvh; }
  .family-member-modal-body { padding: 15px; gap: 12px; }
  .family-member-avatar-row { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .family-member-avatar-preview { display: grid; width: 76px; height: 76px; padding: 4px; }
  .family-avatar-pick-button,
  .family-avatar-upload { min-height: 46px; padding-inline: 6px; font-size: 12px; }
  .family-avatar-libraries.open { grid-template-columns: 1fr; max-height: 264px; overflow: auto; }
  .family-member-details-row { grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
  .family-member-modal-actions { display: grid; grid-template-columns: 1fr 1fr; padding: 13px 15px max(13px, env(safe-area-inset-bottom)); }
  .family-member-modal-actions .v-btn { width: 100%; min-width: 0; }
  .family-avatar-crop-overlay { align-items: end; padding: 0; }
  .family-avatar-crop-modal { border-radius: 24px 24px 0 0; }
}

/* Task composer: template-driven assignment with a desktop dialog and mobile sheet. */
.task-composer-header { flex: 0 0 auto; min-height: 84px; padding: 17px 22px 14px; background: var(--workspace-surface); }
.task-composer-header h2 { font-size: 23px; line-height: 1.25; }
.task-composer-body { min-height: 0; gap: 0; padding: 18px 22px 22px; overscroll-behavior: contain; }
.task-composer-main { min-width: 0; }
.task-composer-section { min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.task-composer-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-composer-section-head h3 { margin: 0; color: var(--workspace-ink); font-size: 17px; line-height: 1.35; }
.task-composer-section-head p { margin: 2px 0 0; color: var(--text-light); font-size: 11px; }
.task-composer-expand { display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; gap: 4px; padding: 6px 9px; border: 1px solid #d8cff8; border-radius: 13px; color: var(--workspace-purple-deep); background: var(--purple-light); font-size: 12px; font-weight: 900; cursor: pointer; }
.task-composer-expand .workspace-image-icon { width: 20px; height: 20px; }
.task-composer-expand[aria-expanded="true"] .workspace-image-icon { transform: rotate(180deg); }
.task-composer-category-tabs { display: flex; align-items: center; gap: 8px; }
.task-composer-template-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 12px; }
.task-composer-template-card { position: relative; appearance: none; min-width: 0; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(44px, 1fr) auto auto !important; align-items: center; justify-items: center; gap: 6px; padding: 10px; font: inherit; text-align: center; cursor: pointer; }
.task-composer-template-card[hidden] { display: none !important; }
.task-composer-template-card:hover { transform: translateY(-3px); }
.task-composer-template-card:active { transform: translateY(1px); }
.task-composer-template-card.selected { border-color: var(--pink-main) !important; box-shadow: 0 0 0 3px rgba(230, 50, 120, .2), 0 13px 24px rgba(45, 33, 56, .08) !important; }
.task-composer-selected-mark { position: absolute; top: 7px; right: 7px; z-index: 1; width: 24px; height: 24px; display: none; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--pink-main); box-shadow: 0 3px 8px rgba(181, 30, 91, .24); }
.task-composer-selected-mark .workspace-image-icon { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.task-composer-template-card.selected .task-composer-selected-mark { display: inline-flex; }
.task-composer-template-card .task-composer-template-icon { width: clamp(48px, 38%, 68px); height: auto; }
.task-composer-template-card .task-card-title { -webkit-line-clamp: 2; }
.task-composer-template-card .task-card-points { width: 100%; }
.task-composer-template-empty, .task-composer-child-empty { padding: 12px; border: 1px dashed var(--workspace-line); border-radius: 14px; color: var(--text-light); background: #fffaf7; font-size: 12px; }
.task-composer-assignment { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.task-composer-child-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.task-composer-child-chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border: 1px solid var(--workspace-line); border-radius: 14px; color: var(--text-mid); background: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
.task-composer-child-chip.active { border-color: var(--workspace-purple); color: var(--workspace-purple-deep); background: var(--purple-light); box-shadow: 0 3px 0 #d2c8f2; }
.task-composer .week-plan-disclosure { margin-top: 0; border-top: 1px solid var(--workspace-line); }
.task-composer .week-plan-disclosure > summary { min-height: 60px; }
.task-composer .week-plan-disclosure > div { padding: 0 0 4px; }
.task-composer-repeat-option { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--workspace-line); border-radius: 15px; background: #fff; cursor: pointer; }
.task-composer-repeat-option > span { display: flex; flex-direction: column; min-width: 0; }
.task-composer-repeat-option strong { color: var(--workspace-ink); font-size: 13px; }
.task-composer-repeat-option small { color: var(--text-light); font-size: 11px; }
.task-composer-repeat-option input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--pink-main); }
.task-composer-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--workspace-line); background: color-mix(in srgb, var(--workspace-surface) 94%, transparent); box-shadow: 0 -10px 24px rgba(77, 49, 66, .06); }
.task-composer-selection-summary { flex: 0 0 auto; white-space: nowrap; color: var(--text-mid); font-size: 14px; font-weight: 800; }
.task-composer-selection-summary b { color: var(--pink-deep); font-size: 18px; }
.task-composer-footer .task-composer-submit { flex: 0 1 320px; width: min(320px, 100%); min-height: 52px; margin: 0; }
.task-composer-footer .task-composer-submit:disabled { opacity: .48; box-shadow: none; cursor: not-allowed; }

/* First-round task planning hierarchy: make the selected day and required action easy to scan. */
.task-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -2px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--workspace-line);
}
.task-day-heading > div { min-width: 0; }
.task-day-heading > div > span {
  display: block;
  color: var(--text-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.task-day-heading h2 {
  margin: 3px 0 0;
  color: var(--workspace-ink);
  font-size: 21px;
  line-height: 1.25;
}
.task-confirm-all { flex: 0 0 auto; min-height: 44px; }
.parent-task-card.status-done .parent-task-confirm:not(:disabled) {
  color: #fff;
  border-color: #e63278;
  background: var(--pink-main);
  box-shadow: 0 3px 0 #bd1d5b;
}
.parent-task-card .parent-task-return { color: #715d88; }
.parent-task-card .parent-task-delete { color: #b93a55; border-color: #f0c8d0; background: #fff6f7; }

.task-composer-assignment-heading { display: flex; flex-direction: column; gap: 3px; }
.task-composer-assignment-heading > span { color: var(--workspace-ink); font-size: 16px; font-weight: 900; }
.task-composer-assignment-heading p { margin: 0; color: var(--text-light); font-size: 12px; line-height: 1.45; }

@media (min-width: 821px) {
  .task-composer-overlay { display: grid; place-items: center; padding: 24px; }
  .task-composer { position: relative; top: auto; right: auto; width: min(1120px, calc(100vw - 48px)); height: auto; max-height: min(84dvh, 760px); overflow: hidden; border: 1px solid var(--workspace-line); border-radius: 28px; box-shadow: 0 28px 80px rgba(45, 33, 56, .26); opacity: 0; transform: translateY(14px) scale(.97); }
  .task-composer-overlay.show .task-composer { opacity: 1; transform: translateY(0) scale(1); }
  .task-composer-main { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
  .task-composer-assignment { position: sticky; top: 0; padding: 16px; border: 1px solid var(--workspace-line); border-radius: 18px; background: #fffaf5; }
  .task-composer-assignment-heading { padding-bottom: 12px; border-bottom: 1px solid var(--workspace-line); }
  .task-composer-template-card > :is(.task-card-icon, .task-card-title, .task-card-points) { transform: none; }
}

@media (max-width: 820px) {
  .task-composer { position: absolute; top: auto; right: 0; bottom: 0; width: 100%; height: min(92dvh, 820px); border-radius: 26px 26px 0 0; transform: translateY(102%); }
  .task-composer-overlay.show .task-composer { transform: translateY(0); }
  .task-composer-header { min-height: 74px; padding: 13px 16px 11px; }
  .task-composer-header h2 { font-size: 21px; }
  .task-composer-close { width: 44px; height: 44px; }
  .task-composer-body { padding: 14px 16px 18px; }
  .task-composer-main { display: flex; flex-direction: column; gap: 18px; }
  .task-composer-section-head h3 { font-size: 16px; }
  .task-composer-expand { display: inline-flex; }
  .task-composer-category-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .task-composer-category-tabs .task-template-category-tab { width: 100%; min-width: 0; padding-inline: 5px; }
  .task-composer-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .task-composer-template-card { min-height: 0; aspect-ratio: 1 / 1.12; grid-template-rows: minmax(34px, 1fr) auto auto !important; gap: 3px; padding: 7px 6px; border-radius: 15px !important; }
  .task-composer-template-card .task-composer-template-icon { width: 38px; border-radius: 12px; }
  .task-composer-template-card .task-card-title { max-height: calc(1.25em * 2); font-size: 11px; line-height: 1.25; -webkit-line-clamp: 2; }
  .task-composer-template-card .task-card-points { min-height: 20px; gap: 2px; font-size: 11px; }
  .task-composer-template-card .task-card-points .workspace-image-icon { width: 18px; height: 18px; }
  .task-composer-template-library:not([data-expanded="true"]) .task-composer-template-card[data-mobile-overflow="true"] { display: none !important; }
  .task-composer-assignment { padding-top: 2px; }
  .task-composer-assignment-heading { padding: 2px 0 1px; }
  .task-composer-footer { gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .task-composer-selection-summary { font-size: 12px; }
  .task-composer-selection-summary b { font-size: 16px; }
  .task-composer-footer .task-composer-submit { flex: 1 1 auto; width: auto; min-width: 0; padding-inline: 12px; }
  .task-day-heading { align-items: flex-start; gap: 10px; margin-bottom: 13px; padding-bottom: 12px; }
  .task-day-heading h2 { font-size: 18px; }
  .task-confirm-all { min-height: 42px; padding-inline: 10px; font-size: 12px; }
}

@media (max-width: 370px) {
  .task-composer-template-grid { gap: 6px; }
  .task-composer-template-card { padding-inline: 5px; }
  .task-composer-template-card .task-composer-template-icon { width: 34px; }
  .task-composer-template-card .task-card-title { font-size: 10px; }
  .task-composer-footer { padding-inline: 10px; }
  .task-composer-footer .task-composer-submit { font-size: 12px; }
}

/* Visual system: warm, tactile surfaces; glass is reserved for floating chrome. */
:root {
  --workspace-surface-raised: #fffefa;
  --workspace-surface-soft: #fff9f1;
  --workspace-glass-surface: rgba(255, 254, 250, .94);
  --workspace-glass-border: rgba(255, 255, 255, .9);
  --workspace-border-soft: color-mix(in srgb, var(--workspace-line) 76%, white);
  --workspace-shadow-soft: 0 10px 28px rgba(89, 61, 79, .08);
  --workspace-shadow-interactive: 0 5px 0 rgba(221, 190, 158, .52), 0 14px 28px rgba(65, 43, 59, .09);
  --workspace-highlight: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.workspace-visual-system {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reading and form surfaces remain deliberately opaque for contrast and scanability. */
.workspace-visual-system :is(.v-card, .v-input, .v-select) {
  background: var(--workspace-surface-raised);
  border-color: var(--workspace-border-soft);
  box-shadow: var(--workspace-highlight), var(--workspace-shadow-soft);
}

/* The same hierarchy carries through family, pet, reward, and boss panels. */
.workspace-visual-system :is(.pet-panel, .game-card, .cos-cell, .wallet-cell, .f-card, .p-boss-row, .pet-card) {
  border-color: var(--workspace-border-soft);
  box-shadow: var(--workspace-highlight), var(--workspace-shadow-soft);
}

.workspace-visual-system :is(.v-input, .v-select):focus-within {
  border-color: color-mix(in srgb, var(--pink-main) 58%, white);
  box-shadow: var(--workspace-highlight), 0 0 0 4px color-mix(in srgb, var(--pink-main) 12%, transparent), var(--workspace-shadow-soft);
}

/* Candidate cards keep their category colour instead of becoming glass. */
.workspace-visual-system .workspace-task-card {
  box-shadow: var(--workspace-shadow-interactive);
}

.workspace-visual-system .workspace-task-card:hover {
  box-shadow: 0 7px 0 rgba(221, 190, 158, .48), 0 18px 32px rgba(65, 43, 59, .12);
}

/* Primary actions retain the existing game-like depth, with a calmer ambient shadow. */
.workspace-visual-system .v-btn {
  box-shadow: 0 5px 0 var(--pink-dark), 0 11px 22px color-mix(in srgb, var(--pink-main) 18%, transparent);
}

.workspace-visual-system .v-btn:is(.ghost, .secondary, .outline) {
  background: var(--workspace-surface-raised);
  border-color: var(--workspace-border-soft);
  box-shadow: var(--workspace-highlight), 0 4px 0 var(--workspace-line), 0 10px 20px rgba(65, 43, 59, .06);
}

.workspace-visual-system :is(.v-btn, .workspace-segment, .workspace-task-card) {
  transition: transform var(--workspace-press) var(--workspace-ease), opacity var(--workspace-state) ease, box-shadow var(--workspace-state) ease, background var(--workspace-state) ease, border-color var(--workspace-state) ease;
}

.workspace-visual-system :is(.v-btn, .workspace-segment, .workspace-task-card):hover { transform: translateY(-1px); }
.workspace-visual-system :is(.v-btn, .workspace-segment, .workspace-task-card):active { transform: translateY(2px); }

/* Navigation and modal shells are the only translucent layers in the workspace. */
.workspace-visual-system :is(.mobile-app-bar, .mobile-bottom-nav, .modal-box, .mobile-more-sheet) {
  background: var(--workspace-glass-surface);
  border-color: var(--workspace-glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
}

.workspace-visual-system .side-nav {
  background: var(--workspace-glass-surface);
  border-right-color: var(--workspace-glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

.workspace-visual-system :is(.task-composer-header, .task-composer-footer) {
  background: var(--workspace-glass-surface);
  border-color: var(--workspace-glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  backdrop-filter: blur(14px) saturate(1.06);
}

.workspace-visual-system :is(.workspace-segments, .task-template-category-tabs) {
  box-shadow: var(--workspace-highlight);
}

.workspace-visual-system .workspace-segments {
  background: var(--workspace-surface-soft);
  border-color: var(--workspace-border-soft);
}

/* Page identity changes by role, while controls and content stay familiar. */
body.workspace-visual-system[data-family-role="parent"] .workspace-page-header {
  border: 1px solid color-mix(in srgb, var(--workspace-pink) 16%, var(--workspace-line));
  background: linear-gradient(135deg, #fffefa 0%, #fff6ef 64%, #fff0f6 100%);
  box-shadow: var(--workspace-highlight), 0 14px 30px rgba(111, 76, 76, .08);
}

body.workspace-visual-system[data-family-role="parent"] .workspace-page-header::after {
  border-color: color-mix(in srgb, var(--workspace-pink) 16%, transparent);
}

body.workspace-visual-system[data-family-role="child"] .workspace-page-header {
  border: 1px solid color-mix(in srgb, var(--pink-main) 20%, white);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pink-pale) 62%, white) 0%, #fffefe 70%, color-mix(in srgb, var(--purple-light) 48%, white) 100%);
  box-shadow: var(--workspace-highlight), 0 14px 30px color-mix(in srgb, var(--pink-main) 12%, transparent);
}

body.workspace-visual-system[data-family-role="child"] .workspace-page-header::after {
  border-color: color-mix(in srgb, var(--pink-main) 16%, transparent);
}

body.workspace-visual-system .workspace-page-copy p {
  color: color-mix(in srgb, var(--text-mid) 92%, var(--workspace-ink));
}

/* State is conveyed with an outline, mark, and elevation—not colour alone. */
.workspace-visual-system :is(.v-btn, .workspace-segment, .task-composer-child-chip, .workspace-task-card):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pink-main) 48%, white);
  outline-offset: 3px;
}

.workspace-visual-system .task-composer-template-card.selected {
  border-color: var(--pink-main) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink-main) 22%, transparent), var(--workspace-shadow-interactive) !important;
}

.workspace-visual-system .parent-task-card.status-done {
  box-shadow: inset 0 0 0 2px #f1bc50, var(--workspace-shadow-interactive) !important;
}

.workspace-visual-system .parent-task-card.status-confirmed {
  box-shadow: inset 0 0 0 2px #74c9a9, var(--workspace-shadow-interactive) !important;
}

.workspace-visual-system :is(.v-btn, .task-composer-child-chip):disabled {
  opacity: .46;
  filter: saturate(.55);
  cursor: not-allowed;
}

/* Floating shells have a quiet chrome; their body remains the readable layer. */
.workspace-visual-system :is(.modal-header, .modal-footer, .family-member-modal header, .family-member-modal footer) {
  background: var(--workspace-glass-surface);
  border-color: var(--workspace-glass-border);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
  backdrop-filter: blur(12px) saturate(1.04);
}

.workspace-visual-system :is(.modal-close-btn, .modal-close-btn-white, .task-composer-close, .mobile-sheet-close, .family-member-modal-close) {
  color: var(--text-mid);
  background: var(--workspace-surface-raised);
  border-color: var(--workspace-border-soft);
  box-shadow: var(--workspace-highlight), 0 4px 10px rgba(65, 43, 59, .07);
}

.workspace-visual-system :is(.v-empty, .task-template-empty, .task-composer-template-empty) {
  border: 1px dashed var(--workspace-border-soft);
  color: var(--text-mid);
  background: var(--workspace-surface-soft);
  box-shadow: var(--workspace-highlight);
}

.workspace-visual-system .mobile-sheet-handle {
  background: color-mix(in srgb, var(--workspace-muted) 24%, white);
}

/* Dense information stays scan-friendly without erasing task category colours. */
.workspace-visual-system .task-list-row {
  border-color: var(--workspace-border-soft);
  box-shadow: var(--workspace-highlight);
}

.workspace-visual-system .game-reward-grid .v-row {
  border-color: var(--workspace-border-soft);
  background: var(--workspace-surface-soft);
  box-shadow: var(--workspace-highlight);
}

.workspace-visual-system .task-summary-strip span {
  border-color: var(--workspace-border-soft);
  background: var(--workspace-surface-soft);
  box-shadow: var(--workspace-highlight);
}

.workspace-visual-system .dmg-row {
  border-bottom-color: var(--workspace-border-soft);
}

.workspace-visual-system .modal-overlay,
.workspace-visual-system .task-composer-overlay {
  background: rgba(46, 35, 53, .34);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

@media (prefers-reduced-motion: reduce) {
  .workspace-visual-system *,
  .workspace-visual-system *::before,
  .workspace-visual-system *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Fourth-round shared interaction finish: semantic actions, feedback, and safe floating chrome. */
.workspace-visual-system .v-btn:not(.ghost):not(.secondary):not(.outline):not(.danger) {
  background: var(--workspace-action-primary);
}

.workspace-visual-system .v-btn.danger {
  background: var(--workspace-action-danger);
  border-color: color-mix(in srgb, var(--workspace-action-danger) 72%, white);
  box-shadow: 0 5px 0 var(--workspace-action-danger-deep), 0 10px 20px color-mix(in srgb, var(--workspace-action-danger) 18%, transparent);
}

.workspace-visual-system .v-btn.danger:active {
  box-shadow: 0 2px 0 var(--workspace-action-danger-deep);
}

.workspace-visual-system :is(.v-btn, button):disabled {
  color: color-mix(in srgb, var(--text-mid) 74%, white);
  cursor: not-allowed;
  pointer-events: none;
}

.workspace-visual-system :is(.modal-footer, .family-member-modal-actions, .task-composer-footer) {
  position: relative;
  z-index: 1;
}

.workspace-visual-system :is(.v-empty, .task-empty-state, .task-template-empty, .task-composer-template-empty) {
  border: 1px dashed var(--workspace-border-soft);
  border-radius: var(--workspace-radius-md);
  background: var(--workspace-surface-soft);
  box-shadow: var(--workspace-highlight);
}

.workspace-visual-system .toast-container {
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 1400;
}

.workspace-visual-system .toast {
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 6px 0 rgba(45, 33, 56, .16), 0 16px 30px rgba(45, 33, 56, .16);
  line-height: 1.45;
}

.workspace-visual-system .toast[role="alert"] {
  border-color: rgba(255, 255, 255, .95);
}

.workspace-visual-system .toast-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .workspace-visual-system .toast-container {
    top: max(76px, calc(env(safe-area-inset-top) + 12px));
    right: 12px;
    left: 12px;
    align-items: stretch;
  }

  .workspace-visual-system .toast {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 12px 14px;
  }
}

/* Desktop page titles are part of the content flow, not standalone cards. */
@media (min-width: 821px) {
  body.workspace-visual-system[data-family-role="parent"] .workspace-page-header,
  body.workspace-visual-system[data-family-role="child"] .workspace-page-header {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
}

/* Care actions are secondary utilities, never generic primary CTA gradients. */
body.workspace-visual-system .pet-detail-layout .pd-care-action.feed {
  color: var(--care-action-feed-ink) !important;
  border-color: var(--care-action-feed-border) !important;
  background: var(--care-action-feed-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74) !important;
}
body.workspace-visual-system .pet-detail-layout .pd-care-action.bath {
  color: var(--care-action-bath-ink) !important;
  border-color: var(--care-action-bath-border) !important;
  background: var(--care-action-bath-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74) !important;
}
body.workspace-visual-system .pet-detail-layout .pd-care-action.play {
  color: var(--care-action-play-ink) !important;
  border-color: var(--care-action-play-border) !important;
  background: var(--care-action-play-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74) !important;
}

/* Mobile reward card layout: each piece owns a fixed band so dense cards never overlap. */
@media (max-width: 520px) {
  /* mobile-reward-card-layout */
  body[data-family-role="child"][data-workspace-page="shop"] .reward-card {
    display: grid;
    grid-template-rows: minmax(50px, 1fr) 32px 28px 36px;
    align-items: stretch;
    align-content: stretch;
    gap: 5px;
    min-height: 220px;
    padding: 10px;
    overflow: hidden;
  }

  body[data-family-role="child"][data-workspace-page="shop"] .reward-card .rc-icon {
    min-height: 0;
    height: auto;
  }

  body[data-family-role="child"][data-workspace-page="shop"] .reward-card .rc-icon .workspace-image-icon {
    width: min(64px, 76%);
    height: min(64px, 76%);
  }

  body[data-family-role="child"][data-workspace-page="shop"] .reward-card .rc-title {
    min-height: 0;
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body[data-family-role="child"][data-workspace-page="shop"] .reward-card .rc-cost {
    min-height: 0;
    height: 28px;
    margin: 0;
    padding-inline: 7px;
    font-size: 12px;
  }

  body[data-family-role="child"][data-workspace-page="shop"] .reward-card .rc-buy {
    min-height: 0;
    height: 36px;
    margin: 0;
    padding: 0 8px;
    font-size: 12px;
  }

  /* mobile-family-actions-row */
  body[data-family-role="parent"][data-workspace-page="family"] .family-member-card-actions {
    top: 14px;
    right: 15px;
    display: grid;
    grid-template-columns: repeat(2, 42px);
    gap: 6px;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  body[data-family-role="parent"][data-workspace-page="family"] .family-member-card-action {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  body[data-family-role="parent"][data-workspace-page="family"] .family-member-identity {
    padding-right: 96px;
  }

  /* mobile-pet-settings-columns */
  body[data-family-role="parent"][data-workspace-page="pets"] .v-card > .v-row.pet-settings-row {
    grid-template-columns: minmax(0, 1fr) 84px 60px;
    gap: 8px;
  }

  body[data-family-role="parent"][data-workspace-page="pets"] .pet-settings-row > .v-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-family-role="parent"][data-workspace-page="pets"] .pet-settings-row > .v-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-inline: 8px;
    text-align: center;
  }
}

/* landscape-tablet-desktop-shell: large tablets retain the desktop workspace even at a 800px CSS width. */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 820px) and (min-height: 600px) {
  body { overflow: hidden; }
  .app-shell { display: flex; height: 100vh; }
  .side-nav { display: flex; flex: 0 0 196px; }
  .mobile-app-bar,
  .mobile-bottom-nav,
  .mobile-more-overlay { display: none !important; }
  .app-main { height: 100vh; padding: 0; overflow-y: auto; }
  #viewRoot { max-width: 1320px; padding: 22px 24px 60px; }
  .workspace-page-header {
    min-height: 74px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 18px;
    padding: 0;
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .workspace-page-header::after { display: none; }
  .workspace-page-copy h1 { font-size: clamp(27px, 3vw, 38px); }
  .workspace-page-copy p { display: block; }
  body.workspace-visual-system[data-family-role="parent"] .workspace-page-header,
  body.workspace-visual-system[data-family-role="child"] .workspace-page-header {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
}

/* Home and challenge shell — extends the existing warm workspace system. */
:root {
  --mobile-app-bar-height: 56px;
  --mobile-bottom-nav-height: 64px;
  --mobile-page-gutter: clamp(12px, 3.8vw, 24px);
}

.workspace-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.workspace-icon-label > .workspace-image-icon {
  width: 22px;
  height: 22px;
}

.home-page,
.challenge-page,
.challenge-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.home-page {
  display: grid;
  gap: 26px;
  padding-bottom: 8px;
}

.home-identity-card,
.home-student-hero,
.home-wallet-card,
.home-summary-card,
.home-child-card,
.home-pending-item,
.home-overview-cell,
.home-quick-action {
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  color: var(--workspace-ink);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-shadow-card);
}

.home-daily-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 20px;
  min-width: 0;
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 200, 74, .27), transparent 26%),
    linear-gradient(135deg, #fffefa, #fff1f6);
  box-shadow: var(--workspace-shadow-card);
}

.home-daily-quote-copy { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.home-daily-quote blockquote {
  margin: 7px 0 5px;
  color: var(--workspace-ink);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.32;
  overflow-wrap: normal;
  word-break: keep-all;
}
.home-daily-quote cite { display: block; color: var(--text-mid); font-size: 14px; font-style: normal; font-weight: 800; text-align: right; }
.home-quote-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.home-quote-date { color: var(--text-light); font-size: 12px; font-weight: 700; }
.home-weather-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 132px;
  padding-left: 18px;
  border-left: 1px solid rgba(230, 181, 139, .55);
  color: var(--workspace-ink);
  text-align: center;
}
.home-weather-icon { font-size: 40px; line-height: 1; }
.home-weather-city { color: var(--workspace-ink); font-size: 14px; font-weight: 800; }
.home-weather-temp { color: var(--workspace-ink); font-size: 30px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.home-weather-detail { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; color: var(--text-light); font-size: 11px; }
.home-weather-detail > span:empty { display: none; }
.home-weather-status { font-weight: 700; }
.home-weather-range { font-weight: 700; }
.home-weather-air { font-weight: 700; }

.home-identity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 200, 74, .28), transparent 28%),
    linear-gradient(135deg, #fffefa, #fff1f6);
}

.home-identity-card.child {
  background:
    radial-gradient(circle at 92% 12%, rgba(112, 87, 217, .18), transparent 28%),
    linear-gradient(135deg, #fffefa, var(--pink-pale));
}

.home-identity-copy,
.home-identity-actions,
.home-section-heading,
.home-child-card-copy,
.home-pending-copy,
.home-summary-card > div,
.home-student-hero > div {
  min-width: 0;
}

.home-eyebrow {
  display: block;
  color: var(--workspace-pink-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.25;
}

.home-identity-copy h1,
.home-section-heading h2,
.home-student-hero h2 {
  margin: 5px 0 0;
  color: var(--workspace-ink);
  overflow-wrap: anywhere;
}

.home-identity-copy h1 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.18; }

.home-identity-copy p,
.home-pet-status,
.home-overview-cell > span,
.home-child-name,
.home-child-metrics span,
.home-summary-card,
.home-wallet-card > div,
.home-student-hero .v-btn,
.home-quick-action,
.challenge-tabs .workspace-segment {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.home-identity-copy p { margin: 13px 0 0; color: var(--text-mid); font-weight: 800; }
.home-identity-copy p .workspace-image-icon { width: 24px; height: 24px; }

.home-identity-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.home-identity-actions .v-btn,
.home-identity-card > .v-btn { min-height: 44px; white-space: nowrap; }

.home-section {
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-lg);
  background: var(--workspace-surface);
  box-shadow: 0 5px 0 rgba(221, 190, 158, .46), 0 14px 28px rgba(75, 48, 67, .05);
}
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.home-section-heading h2 { font-size: 23px; line-height: 1.22; }

.home-text-action {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  color: var(--workspace-pink-deep);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.home-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.home-overview-cell {
  min-width: 0;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(75, 48, 67, .06);
}

.home-overview-cell > span { width: 100%; justify-content: center; color: var(--text-mid); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.home-overview-cell > span .workspace-image-icon { width: 22px; height: 22px; }
.home-overview-cell strong { display: block; margin-top: 15px; color: var(--workspace-ink); font-size: clamp(28px, 3vw, 38px); line-height: 1; }
.home-overview-cell strong small { color: var(--text-light); font-size: .52em; }

.home-pending-list,
.home-child-grid { display: grid; gap: 12px; min-width: 0; }

.home-pending-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.home-pending-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #fff0f6; }
.home-pending-icon .workspace-image-icon { width: 26px; height: 26px; }
.home-pending-item[data-tone="orange"] .home-pending-icon { background: #fff0e9; }
.home-pending-item[data-tone="purple"] .home-pending-icon { background: #f0ecff; }
.home-pending-copy { display: grid; gap: 3px; }
.home-pending-copy strong { font-size: 16px; overflow-wrap: anywhere; }
.home-pending-copy span { color: var(--text-mid); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.home-pending-action .v-btn { min-height: 44px; white-space: nowrap; }

.home-empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px dashed var(--workspace-line);
  border-radius: var(--workspace-radius-md);
  background: var(--workspace-surface-soft);
}
.home-empty-state .workspace-image-icon { width: 32px; height: 32px; }
.home-empty-state > div { min-width: 0; display: grid; gap: 3px; }
.home-empty-state span { color: var(--text-mid); font-size: 14px; overflow-wrap: anywhere; }

.home-child-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.home-child-card {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
}
.home-child-card-copy { display: grid; gap: 14px; }
.home-child-name { color: var(--workspace-ink); font-size: 17px; overflow-wrap: anywhere; }
.home-child-name .workspace-image-icon { width: 25px; height: 25px; }
.home-child-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.home-child-metrics span { min-height: 32px; padding: 5px 9px; border-radius: 10px; color: var(--text-mid); background: var(--workspace-surface-soft); font-size: 12px; }
.home-child-metrics .workspace-image-icon { width: 18px; height: 18px; }
.home-child-metrics b { color: var(--workspace-ink); }
.home-child-metrics small { font-size: inherit; }
.home-pet-status { margin: 0; color: var(--workspace-green-deep); font-size: 13px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.home-pet-status.warning { color: #9a6100; }
.home-pet-status.danger { color: var(--workspace-action-danger); }
.home-pet-status.muted { color: var(--text-mid); }
.home-pet-status .workspace-image-icon { width: 21px; height: 21px; }
.home-score-btn { min-width: 44px; min-height: 44px; white-space: nowrap; }

.home-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.home-quick-action {
  min-width: 0;
  min-height: 88px;
  justify-content: center;
  padding: 14px;
  color: var(--workspace-ink);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  overflow-wrap: anywhere;
}
.home-quick-action .workspace-image-icon { width: 27px; height: 27px; }
.home-quick-action.primary { border-color: var(--workspace-pink); color: #fff; background: var(--workspace-action-primary); box-shadow: 0 6px 0 var(--workspace-pink-deep), 0 18px 28px rgba(230, 50, 120, .16); }

/* A home section is the raised group; its supporting cards remain deliberately flat.
   The overview cell is the exception — it carries its own soft shadow to feel like a chip. */
.home-section .home-pending-item,
.home-section .home-child-card,
.home-section .home-quick-action:not(.primary) {
  box-shadow: none;
}

/* The raised section is the card; its pending row is content, not a second card shell. */
.home-section .home-pending-item {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-student-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  background: linear-gradient(135deg, #f0ecff, #fffefa 68%);
}
.home-student-hero p { margin: 9px 0 0; color: var(--text-mid); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.home-student-hero .v-btn { min-height: 44px; white-space: nowrap; }
.home-student-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.home-summary-card { min-width: 0; min-height: 110px; padding: 17px; text-align: left; cursor: pointer; }
.home-summary-card > span { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 14px; background: var(--pink-pale); }
.home-summary-card > span .workspace-image-icon { width: 27px; height: 27px; }
.home-summary-card > div { display: grid; gap: 3px; }
.home-summary-card small,
.home-summary-card em { color: var(--text-mid); font-size: 12px; font-style: normal; overflow-wrap: anywhere; }
.home-summary-card strong { color: var(--workspace-ink); font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.home-wallet-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; padding: 0; }
.home-wallet-card > div { min-width: 0; display: grid; gap: 5px; padding: 18px; background: var(--workspace-surface); }
.home-wallet-card > div + div { border-left: 1px solid var(--workspace-line); }
.home-wallet-card span { color: var(--text-mid); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.home-wallet-card span .workspace-image-icon { width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; }
.home-wallet-card strong { font-size: 31px; line-height: 1; }

.challenge-tabs { margin-bottom: 18px; }
.challenge-tabs .workspace-segment { min-height: 44px; }
.challenge-tabs .workspace-image-icon { width: 23px; height: 23px; }

@media (max-width: 820px) {
  .mobile-app-bar {
    height: calc(var(--mobile-app-bar-height) + env(safe-area-inset-top));
    min-height: calc(var(--mobile-app-bar-height) + env(safe-area-inset-top));
    align-items: flex-end;
    padding: max(4px, env(safe-area-inset-top)) var(--mobile-page-gutter) 4px;
    transition: transform 180ms var(--workspace-ease);
    will-change: transform;
  }
  body.mobile-app-bar-hidden .mobile-app-bar { transform: translateY(calc(-1 * (var(--mobile-app-bar-height) + env(safe-area-inset-top)))); }
  .mobile-brand { height: 44px; gap: 8px; }
  .mobile-brand-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .mobile-brand-icon .workspace-image-icon { width: 40px; height: 40px; }
  .mobile-brand-copy { min-width: 0; }
  .mobile-brand-copy strong,
  .mobile-brand-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-main {
    padding-top: calc(var(--mobile-app-bar-height) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--mobile-bottom-nav-height) + 28px + env(safe-area-inset-bottom)) !important;
  }
  #viewRoot { padding: 16px var(--mobile-page-gutter) 32px; }
  .mobile-bottom-nav {
    left: 8px;
    right: 8px;
    height: var(--mobile-bottom-nav-height);
    padding: 4px;
    border-radius: 20px;
  }
  .mobile-nav-item { min-height: 52px; padding: 3px 1px; font-size: 10px; }
  .mobile-nav-icon { width: 27px; height: 27px; }
  .mobile-nav-icon.generated .workspace-image-icon { width: 27px; height: 27px; }

  .home-page { gap: 22px; }
  .home-identity-card,
  .home-student-hero { align-items: flex-start; flex-direction: column; gap: 16px; padding: 18px; }
  .home-identity-actions { width: 100%; justify-content: stretch; }
  .home-identity-actions .v-btn,
  .home-identity-card > .v-btn,
  .home-student-hero .v-btn { width: 100%; justify-content: center; }
  .home-identity-actions .v-btn { flex: 1 1 0; }
  .home-identity-copy h1 { font-size: 27px; }
  .home-section-heading { align-items: center; margin-bottom: 11px; }
  .home-section-heading h2 { font-size: 21px; }
  .home-overview-grid { gap: 8px; }
  .home-overview-cell { min-height: 96px; padding: 8px 6px; }
  .home-overview-cell > span { gap: 3px; font-size: 10px; line-height: 1.2; }
  .home-overview-cell > span .workspace-image-icon { width: 16px; height: 16px; }
  .home-overview-cell strong { margin-top: 6px; font-size: 22px; }
  .home-pending-item { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .home-pending-icon { width: 38px; height: 38px; border-radius: 12px; }
  .home-pending-icon .workspace-image-icon { width: 23px; height: 23px; }
  .home-pending-action { grid-column: 2; }
  .home-pending-action .v-btn { width: 100%; }
  .home-child-grid { grid-template-columns: minmax(0, 1fr); }
  .home-child-card { align-items: flex-start; flex-direction: column; padding: 16px; }
  .home-score-btn { width: 100%; justify-content: center; }
  .home-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-quick-action { min-height: 82px; flex-direction: column; gap: 5px; padding: 11px 8px; font-size: 14px; }
  .home-student-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .home-summary-card { min-height: 96px; padding: 15px; }
  .home-wallet-card > div { padding: 15px; }
  .home-wallet-card strong { font-size: 28px; }
  .challenge-tabs { margin-bottom: 14px; }
  .challenge-tabs .workspace-segment { min-width: 0; padding-inline: 8px; font-size: 14px; }
}

@media (max-width: 370px) {
  .home-overview-cell { padding-inline: 7px; }
  .home-overview-cell > span { font-size: 10px; }
  .home-overview-cell strong { font-size: 24px; }
  .home-identity-actions { gap: 8px; }
  .home-identity-actions .v-btn { padding-inline: 8px; font-size: 13px; }
}

@media (orientation: landscape) and (max-width: 820px) and (max-height: 540px) {
  :root { --mobile-app-bar-height: 52px; --mobile-bottom-nav-height: 58px; }
  .mobile-brand-copy small { display: none; }
  .home-page { gap: 18px; }
  .home-identity-card,
  .home-student-hero { padding: 16px; }
}

/* The child is selected once at the parent-to-student boundary, never inside student pages. */
.workspace-child-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(45, 33, 56, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.workspace-child-picker {
  width: min(500px, 100%);
  max-width: 100%;
  max-height: min(680px, calc(100dvh - 36px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: var(--workspace-radius-xl);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-shadow-float);
}

.workspace-child-picker header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.workspace-child-picker-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--pink-pale); }
.workspace-child-picker-mark .workspace-image-icon { width: 30px; height: 30px; }
.workspace-child-picker header > div { min-width: 0; }
.workspace-child-picker header p { margin: 0 0 3px; color: var(--workspace-pink-deep); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.workspace-child-picker header h2 { margin: 0; color: var(--workspace-ink); font-size: clamp(20px, 5vw, 26px); line-height: 1.25; overflow-wrap: anywhere; }
.workspace-child-picker-close { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--workspace-line); border-radius: 14px; background: #fff; }
.workspace-child-picker-close .workspace-image-icon { width: 22px; height: 22px; }
.workspace-child-picker-help { margin: -3px 0 0; color: var(--text-mid); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.workspace-child-picker-list { display: grid; gap: 10px; min-width: 0; }
.workspace-child-picker-option {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius-md);
  color: var(--workspace-ink);
  background: var(--workspace-surface-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.workspace-child-picker-option > span:first-child { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--pink-pale); }
.workspace-child-picker-option > span:first-child .workspace-image-icon { width: 27px; height: 27px; }
.workspace-child-picker-option > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.workspace-child-picker-option strong { font-size: 17px; overflow-wrap: anywhere; }
.workspace-child-picker-option small { color: var(--text-mid); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.workspace-child-picker-option > .workspace-image-icon { width: 22px; height: 22px; }
.workspace-child-picker-option:hover,
.workspace-child-picker-option:focus-visible { border-color: var(--pink-light); background: var(--pink-pale); outline: none; }
.workspace-child-picker-option:active { transform: translateY(1px); }
.workspace-child-picker-cancel { width: 100%; min-height: 44px; justify-content: center; }
body.workspace-child-picker-open .app-main { overflow: hidden; }

@media (max-width: 820px) {
  .workspace-child-picker-overlay { place-items: end center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .workspace-child-picker { width: 100%; max-height: min(75dvh, 640px); border-radius: 26px 26px 20px 20px; }

  /* Every page keeps the same full-height top bar; the content changes with the page. */
  body[data-workspace-page]:not([data-workspace-page="home"]) .mobile-app-bar {
    display: flex !important;
  }
  .mobile-app-bar { gap: 8px; }
  .mobile-brand { min-width: 0; flex: 1 1 auto; }
  .mobile-user-pill,
  .mobile-role-switch {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid var(--workspace-line);
    border-radius: 14px;
    color: var(--workspace-ink);
    background: var(--workspace-surface);
    box-shadow: 0 3px 0 rgba(221, 190, 158, .44);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }
  .mobile-user-pill .workspace-image-icon { width: 22px; height: 22px; }
  .mobile-role-switch:active { transform: translateY(1px); }
  .mobile-role-switch-icon { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; }
  .mobile-role-switch-icon .workspace-image-icon { width: 22px; height: 22px; }
  .mobile-user-pill span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .mobile-login-btn {
    flex: 0 0 auto;
    min-width: 56px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--workspace-line);
    border-radius: 999px;
    color: var(--workspace-ink);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
  }
  .mobile-login-btn:hover { background: rgba(255, 241, 246, .55); }
  .mobile-login-btn:active { transform: translateY(1px); }
  .mobile-login-btn[hidden] { display: none !important; }
  @media (max-width: 370px) {
    .mobile-user-pill { padding-inline: 7px; }
    .mobile-user-pill span { max-width: 56px; }
    .mobile-role-switch { padding-inline: 7px; }
    .mobile-login-btn { min-width: 48px; padding: 0 10px; font-size: 12px; }
  }
}

@media (max-width: 820px) {
  .home-daily-quote { gap: 12px; padding: 17px; }
  .home-daily-quote blockquote { margin-top: 5px; font-size: 20px; }
  .home-weather-card { min-width: 108px; padding-left: 12px; }
}

@media (max-width: 370px) {
  .home-daily-quote { grid-template-columns: minmax(0, 1fr) 100px; gap: 8px; padding: 15px; }
  .home-weather-card { min-width: 0; padding-left: 8px; }
  .home-weather-card .home-weather-temp { font-size: 26px; }
  .home-weather-card .home-weather-icon { font-size: 32px; }
  .mobile-brand-copy strong { max-width: min(27vw, 112px); }
  .mobile-brand-copy small { max-width: min(27vw, 112px); }
}

/* Compact family controls: the family entry stays readable, while account and role switch are icon-only. */
@media (max-width: 820px) {
  .mobile-brand { min-width: 0; flex: 1 1 auto; gap: 8px; }
  .mobile-brand-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    overflow: hidden;
    border: 1px solid var(--workspace-line);
    border-radius: 50%;
    background: var(--workspace-surface);
    box-shadow: 0 3px 0 rgba(221, 190, 158, .44);
  }
  .mobile-brand-icon .workspace-image-icon { width: 34px; height: 34px; }
  .mobile-brand-copy {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }
  .mobile-brand-copy strong {
    max-width: none;
    overflow: visible;
    color: var(--mobile-nav-ink);
    text-overflow: clip;
    white-space: nowrap;
  }
  .mobile-brand-copy strong.family-name-medium { font-size: 13px; letter-spacing: -.025em; }
  .mobile-brand-copy strong.family-name-compact { font-size: 11px; letter-spacing: -.045em; }
  .mobile-user-pill,
  .mobile-role-switch {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border-radius: 50%;
  }
  .mobile-user-pill { overflow: hidden; }
  .mobile-user-pill > img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .mobile-user-pill .workspace-image-icon { width: 27px; height: 27px; }
}

/* 手机端首页板块去掉底部阴影，保持简洁扁平（与「任务安排」卡片一致） */
@media (max-width: 640px) {
  .home-section,
  .home-daily-quote {
    box-shadow: none;
  }
}
.account-layer { position: fixed; inset: 0; z-index: 10000; max-width: 100%; overflow-x: clip; pointer-events: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.account-visible, .account-panel-open { width: 100%; max-width: 100%; overflow-x: hidden; pointer-events: auto; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(22,18,36,.58); backdrop-filter: blur(8px); }
.account-auth-card, .account-panel { width: min(420px, calc(100vw - 24px)); max-width: calc(100vw - 24px); min-width: 0; max-height: calc(100dvh - 40px); overflow: auto; padding: 28px; border-radius: 28px; background: #fffdf9; box-shadow: 0 22px 70px rgba(34,22,50,.25); }
.account-logo { font-size: 42px; text-align: center; }.account-auth-card h1 { margin: 6px 0; font-size: 26px; text-align: center; }.account-auth-card > p { color: #786f80; text-align: center; }
.account-auth-card form, .account-panel { display: grid; min-width: 0; gap: 14px; }.account-auth-card label, .account-panel label { display: grid; min-width: 0; gap: 6px; color: #4f4658; font-weight: 700; }.account-auth-card input, .account-panel input { width: 100%; min-width: 0; min-height: 46px; border: 1px solid #e9d9d2; border-radius: 12px; padding: 0 12px; font: inherit; }
.account-message { min-height: 1.2em; margin: 0; color: #c8356f; }.account-links { display: flex; justify-content: center; gap: 18px; }.account-links button, .account-secondary { border: 0; background: transparent; color: #ba1760; font: inherit; cursor: pointer; }.account-secondary { padding: 10px; text-align: left; }.account-secondary.danger { color: #b63232; }.account-close { justify-self: end; border: 0; background: transparent; font-size: 32px; line-height: 1; cursor: pointer; }

/* 账户面板：头像 + 状态 + 升级区 + 操作区 */
.account-profile { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; }
.account-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffd6e7, #c9e7ff); color: #4f3a55; font-size: 22px; font-weight: 900; box-shadow: 0 4px 14px rgba(80, 60, 100, .12); }
.account-profile-info { min-width: 0; display: grid; gap: 6px; }
.account-email { font-size: 15px; color: #2f2638; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.account-plan-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.account-plan-tag.premium { background: linear-gradient(135deg, #ffd56b, #ff9a5b); color: #5a2a00; }
.account-plan-tag.trial { background: linear-gradient(135deg, #c8f7d8, #95e6ff); color: #184a45; }
.account-plan-tag.free { background: #efe9e3; color: #786f80; }
.account-status { padding: 14px; border: 1px solid #f0e3da; border-radius: 16px; background: #fff7f1; display: grid; gap: 10px; }
.account-status-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.account-status-head span { color: #786f80; }
.account-status-head strong { font-size: 14px; color: #2f2638; }
.account-progress { height: 8px; border-radius: 999px; background: #f3e7df; overflow: hidden; }
.account-progress > span { display: block; height: 100%; background: linear-gradient(90deg, #ff7ab0, #c66dff); transition: width .25s ease; }
.account-section { display: grid; gap: 10px; }
.account-section h3 { margin: 0; font-size: 14px; color: #4f4658; }
.account-hint { margin: 0; font-size: 12px; color: #786f80; line-height: 1.5; }
.account-field { display: grid; gap: 6px; }
.account-field input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; }
.account-activate-btn { width: 100%; }
.account-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px dashed #ece2d8; }
.account-actions .account-secondary { padding: 8px 6px; }
@media (max-width: 480px) { .account-visible, .account-panel-open { align-items: start; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }.account-auth-card, .account-panel { width: min(420px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 36px); border-radius: 22px; padding: clamp(18px, 5vw, 22px); }.account-auth-card h1, .account-panel h2 { font-size: clamp(24px, 7vw, 28px); overflow-wrap: anywhere; }.account-auth-card > p, .account-panel > p, .account-panel strong { overflow-wrap: anywhere; }.account-links { flex-wrap: wrap; gap: 8px 18px; } }
.account-settings-page { display: grid; gap: 18px; max-width: 760px; }
.account-settings-profile { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px; }
.account-settings-avatar { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--workspace-line); border-radius: 20px; background: linear-gradient(145deg, #fff0f6, #e9fff4); }
.account-settings-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.account-settings-avatar .workspace-image-icon { width: 38px; height: 38px; }
.account-settings-profile-copy { min-width: 0; display: grid; gap: 2px; }
.account-settings-profile-copy > span { color: var(--text-light); font-size: 12px; font-weight: 800; }
.account-settings-profile-copy h2 { margin: 0; color: var(--workspace-ink); font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.account-settings-profile-copy p { margin: 0; overflow: hidden; color: var(--text-mid); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-settings-plan { justify-self: end; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.account-settings-plan.premium { color: #755000; background: #fff1bd; }.account-settings-plan.trial { color: #1c6b55; background: #e4faed; }.account-settings-plan.free { color: var(--text-mid); background: #f2ece6; }
.account-settings-card { min-width: 0; overflow: hidden; padding: 0; display: grid; grid-template-rows: auto 1fr; }
.account-settings-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 14px 18px 10px; border-bottom: 1px solid var(--workspace-line); }
.account-settings-card-head h2 { margin: 0; color: var(--workspace-ink); font-size: 15px; font-weight: 800; }
.account-settings-card-head p { margin: 0; color: var(--text-light); font-size: 12px; text-align: right; }
.account-settings-card-rows { min-width: 0; display: grid; }
.account-settings-row { width: 100%; min-width: 0; min-height: 56px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--workspace-line); color: var(--workspace-ink); background: transparent; cursor: pointer; font: inherit; text-align: left; transition: background var(--workspace-state), transform var(--workspace-press); }
.account-settings-row:last-child { border-bottom: 0; }.account-settings-row:hover { background: #fff8fb; }.account-settings-row:active { transform: translateY(1px); }.account-settings-row.primary { background: linear-gradient(100deg, #fff0f6, #fffdf8); }.account-settings-row.danger { color: var(--workspace-action-danger); }
.account-settings-row-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--pink-pale); }.account-settings-row-icon .workspace-image-icon { width: 24px; height: 24px; }.account-settings-row.danger .account-settings-row-icon { background: #fff0f2; }
.account-settings-row-copy { min-width: 0; display: grid; gap: 2px; }.account-settings-row-copy strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.35; }.account-settings-row-copy small { color: var(--text-mid); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }.account-settings-row.danger .account-settings-row-copy small { color: #a56a73; }.account-settings-row-arrow { color: var(--text-light); font-size: 24px; line-height: 1; }
.account-settings-benefits { display: grid; gap: 12px; padding: 18px; }.account-settings-benefits > div { display: grid; gap: 4px; }.account-settings-benefits strong { color: var(--workspace-ink); font-size: 17px; }.account-settings-benefits p { margin: 0; color: var(--text-mid); font-size: 13px; }.account-settings-benefits .v-btn { width: 100%; justify-content: center; }
@media (max-width: 820px) { .account-settings-page { gap: 16px; }.account-settings-profile { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px; }.account-settings-avatar { width: 52px; height: 52px; border-radius: 18px; }.account-settings-plan { grid-column: 2; justify-self: start; margin-top: -4px; }.account-settings-card-head { align-items: flex-start; flex-direction: column; gap: 2px; padding: 12px 16px 10px; }.account-settings-card-head p { text-align: left; }.account-settings-row { grid-template-columns: 38px minmax(0, 1fr) 20px; min-height: 62px; padding-inline: 14px; } }