#pets-section { padding:24px; background:var(--bg-primary,#fff); color:var(--text-primary,#172033); border-radius:16px; margin-bottom:24px; }
#pets-section h2 { font-size:24px; font-weight:750; }
#pets-section p { margin:10px 0 18px; line-height:1.7; }
#pets-section :is(button,input,select), .pet-nav { min-height:46px; border:1px solid #94a3b8; border-radius:10px; padding:10px 14px; font-size:16px; max-width:100%; }
#pets-section :is(button,select), .pet-nav { cursor:pointer; }
#pets-section :is(input,select) { background:#fff; color:#172033; }
#pets-section :is(button,input,select):focus-visible { outline:3px solid #6366f1; outline-offset:3px; }
#pets-section button:disabled { opacity:.45; cursor:default; }
.pet-nav { background:#eef2ff; color:#3730a3; font-weight:700; }
.pet-tools { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; align-items:center; }
.pet-milestones { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.pet-milestones span { padding:6px 12px; border:1px solid #cbd5e1; border-radius:20px; background:#f1f5f9; color:#475569; }
.pet-milestones .is-earned { background:#dcfce7; color:#166534; border-color:#86efac; }
.pet-profile-form { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.pet-profile-form label { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.pet-profile-form input { box-sizing:border-box; width:100%; min-height:46px; padding:10px; border:1px solid #94a3b8; border-radius:8px; background:transparent; color:inherit; font:inherit; }
.pet-profile p { overflow-wrap:anywhere; }
.pet-collection-celebration { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px; border:1px solid #86efac; border-radius:14px; background:#dcfce7; color:#166534; }
.dark .pet-collection-celebration { background:#164e3b; color:#bbf7d0; }
.dark .pet-milestones span { background:#243247; color:#e2e8f0; }
.dark .pet-milestones .is-earned { background:#164e3b; color:#bbf7d0; }
.pet-tools label { display:flex; align-items:center; gap:8px; }
.pet-tools input[type=number] { width:100px; }
.pet-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.pet-card { padding:16px; border:1px solid #cbd5e1; border-radius:16px; display:flex; flex-direction:column; gap:10px; min-width:0; overflow-wrap:anywhere; }
.pet-student { display:flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; }
#pets-section .pet-student input { width:24px; min-height:24px; height:24px; flex:none; }
.pet-avatar { font-size:64px; text-align:center; }
.pet-card progress { width:100%; accent-color:#4f46e5; }
.pet-card p { font-size:14px; }
.pet-award-bar { position:static; bottom:0; padding:16px; background:#eef2ff; color:#172033; border:1px solid #a5b4fc; border-radius:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; z-index:10; margin:16px 0; }
#pets-section .pet-primary { background:#4f46e5; color:white; border-color:#4f46e5; font-weight:700; }
#pets-section details { border-top:1px solid #cbd5e1; padding:16px 0; }
#pets-section summary { padding:12px 0; cursor:pointer; font-weight:700; }
.pet-rule,.pet-history { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid #cbd5e1; overflow-wrap:anywhere; }
.pet-rule span,.pet-history strong { flex:1; min-width:150px; }
.dark #pets-section { background:#172033; color:#e2e8f0; }
@media(max-width:600px) { #pets-section { padding:16px; } .pet-cards { grid-template-columns:1fr; } .pet-award-bar { padding:12px 12px max(12px,env(safe-area-inset-bottom)); } .pet-award-bar select { width:100%; } .pet-award-bar button { width:100%; } .pet-tools>input { width:100%; } }

.pet-confirm { width:min(440px,calc(100vw - 32px)); box-sizing:border-box; border:0; border-radius:16px; padding:24px; color:#172033; background:white; box-shadow:0 20px 60px #0004; }
.pet-confirm::backdrop { background:#0f172a88; }
.pet-confirm h3 { font-size:20px; font-weight:700; }
.pet-confirm p { white-space:pre-line; line-height:1.8; overflow-wrap:anywhere; }
.pet-confirm button { min-height:46px; padding:10px 24px; border:1px solid #94a3b8; border-radius:10px; font-size:16px; cursor:pointer; }
.pet-confirm .pet-primary { color:white; background:#4f46e5; }

/* 成長造型與精簡名單：SVG 使用固定 viewBox，跨平台保持相同外觀。 */
.pet-avatar { display:flex; justify-content:center; }
.pet-portrait { width:144px; height:144px; flex:none; max-width:100%; }
.pet-view-tools { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
#pets-section .pet-view-tools button[aria-pressed=true] { background:#e0eeea; border-color:#28796d; color:#16554a; font-weight:700; }
#pets-section .pet-guide { margin-top:8px; padding:0; border:0; font-size:14px; }
#pets-section .pet-card-options { margin:0; padding:0; border:0; font-size:14px; }
#pets-section .pet-card-options summary { padding:8px 0; min-height:44px; box-sizing:border-box; }
.pet-card-options select { width:100%; }
.pet-compact { grid-template-columns:1fr; gap:8px; }
.pet-compact .pet-card { display:grid; grid-template-columns:72px minmax(0,1fr); gap:4px 12px; padding:12px; }
.pet-compact .pet-avatar { grid-column:1; grid-row:1 / 5; align-items:center; }
.pet-compact .pet-portrait { width:72px; height:80px; }
.pet-compact .pet-student, .pet-compact .pet-stage-label, .pet-compact progress, .pet-compact .pet-card>p { grid-column:2; }
#pets-section .pet-compact .pet-student { min-height:44px; }
#pets-section .pet-compact .pet-card>p { margin:2px 0; font-size:13px; }
.pet-compact .pet-stage-label { font-size:14px; }
.pet-compact .pet-card-options { grid-column:1 / -1; }
#pets-section .pet-compact .pet-card-options summary { padding:8px 0 8px 84px; font-weight:400; }
.pet-growth-feedback { position:fixed; top:16px; left:50%; transform:translateX(-50%); width:min(540px,calc(100% - 24px)); box-sizing:border-box; z-index:10020; display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #8ab9a9; border-radius:18px; background:#f1fcf7; color:#173d32; box-shadow:0 10px 30px #173d3230; }
.pet-growth-feedback .pet-portrait { width:80px; height:80px; animation:pet-grow-pop .55s ease-out; }
.pet-growth-feedback>div { flex:1; min-width:0; overflow-wrap:anywhere; }
.pet-growth-feedback strong { font-size:18px; }
.pet-growth-feedback p { margin:4px 0 0; font-size:14px; line-height:1.6; }
.pet-growth-feedback button { align-self:flex-start; min-width:46px; min-height:46px; padding:8px; border:1px solid #8ab9a9; border-radius:10px; background:transparent; color:inherit; cursor:pointer; }
@keyframes pet-grow-pop { 0% { transform:scale(.75) rotate(-6deg); } 65% { transform:scale(1.08) rotate(3deg); } 100% { transform:scale(1) rotate(0); } }
.dark .pet-growth-feedback { background:#173d32; color:#edf9f3; }
@media(max-width:600px) {
  #pets-section { padding:12px; }
  .pet-cards:not(.pet-compact) { grid-template-columns:1fr; }
  .pet-growth-feedback { gap:8px; padding:10px; }
  .pet-growth-feedback .pet-portrait { width:54px; height:64px; }
  .pet-growth-feedback strong { font-size:16px; }
  .pet-award-bar { gap:8px; }
  #pets-section .pet-award-bar button { width:auto; flex:1; }
  #pets-section .pet-award-bar select { order:3; }
}
@media(prefers-reduced-motion:reduce) { .pet-growth-feedback .pet-portrait { animation:none; } }

#pets-section .pet-student { min-height:44px; }
.pet-wallet-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 16px; margin:12px 0; border:1px solid #dbbe79; border-radius:12px; background:#fffaf0; color:#664913; }
#pets-section .pet-wallet-status details { flex-basis:100%; border:0; padding:0; }
#pets-section .pet-wallet-status summary { font-size:14px; padding:4px 0; min-height:44px; }
.pet-coin-balance { align-self:flex-start; font-weight:700; color:#735011; background:#fff5d8; border-radius:8px; padding:4px 10px; font-size:14px; }
.pet-compact .pet-coin-balance { grid-column:2; justify-self:start; }
#pets-section button.pet-coin-balance { min-height:44px; padding:8px 12px; border:1px solid #c99939; color:#735011; background:#fff5d8; white-space:normal; }
#pets-section button.pet-coin-balance:hover { background:#ffedb5; }
.pet-shop-controls label { display:flex; flex-direction:column; gap:8px; min-width:0; font-weight:600; }
.pet-rule-editor { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; padding:16px; border:1px solid #cbd5e1; border-radius:12px; align-items:end; }
.pet-rule-editor>strong,.pet-rule-editor>.pet-rule-preview,.pet-rule-editor>.pet-tools { grid-column:1/-1; }
.pet-rule-preview { margin:0; padding:8px 12px; border-radius:8px; background:#eef2ff; color:#3730a3; font-weight:600; }
.dark .pet-rule-preview { background:#1e1b4b; color:#c7d2fe; }
.pet-rule-editor label { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pet-rule-editor input { width:100%; min-width:0; box-sizing:border-box; }
.pet-rule-editor .pet-tools { margin:0; }
.dark .pet-wallet-status { background:#3c321f; color:#ffe3a6; border-color:#967944; }
.dark .pet-coin-balance { background:#3c321f; color:#ffe3a6; }
@media(max-width:600px) { .pet-rule-editor { grid-template-columns:1fr; padding:12px; } .pet-rule-editor label { flex-direction:row; align-items:center; justify-content:space-between; } .pet-rule-editor label input { width:65%; } }

.pet-shop-controls,.pet-product-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid #cbd5e1; border-radius:12px; }
.pet-shop-controls select,.pet-product-editor input { width:100%; min-width:0; box-sizing:border-box; }
.pet-product-editor>strong { grid-column:1/-1; }
.pet-shop-sync { font-size:14px; overflow-wrap:anywhere; }
.pet-shop-wallet { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; background:#fff5d8; color:#735011; border-radius:12px; }
.pet-shop-wallet strong { font-size:24px; white-space:nowrap; }
.pet-shop-catalog,.pet-shop-checkout,.pet-shop-receipt { grid-column:1/-1; min-width:0; }
.pet-reward-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px; }
#pets-section .pet-reward-option { display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; padding:16px; border:2px solid #cbd5e1; border-radius:12px; background:#fff; color:#334155; white-space:normal; overflow-wrap:anywhere; }
#pets-section .pet-reward-option[aria-pressed="true"] { border-color:#2563eb; background:#eff6ff; color:#1e40af; }
.pet-reward-affordable { color:#047857; font-weight:600; }
.pet-shop-checkout { padding:16px; background:#f1f5f9; border-radius:12px; overflow-wrap:anywhere; }
#pets-section .pet-shop-checkout button { width:100%; min-height:48px; white-space:normal; }
.pet-shop-receipt { margin:0; padding:16px; background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7; border-radius:12px; }
.dark .pet-shop-wallet { background:#3c321f; color:#ffe3a6; }
.dark #pets-section .pet-reward-option,.dark .pet-shop-checkout { background:#1e293b; color:#e2e8f0; border-color:#64748b; }
.dark #pets-section .pet-reward-option[aria-pressed="true"] { background:#172554; color:#bfdbfe; border-color:#60a5fa; }
.dark .pet-reward-affordable { color:#6ee7b7; }
.dark .pet-shop-receipt { background:#064e3b; color:#d1fae5; }
.pet-preset-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin:12px 0; }
.pet-preset-card { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid #cbd5e1; border-radius:12px; background:#f8fafc; min-width:0; overflow-wrap:anywhere; }
.pet-preset-card button { margin-top:auto; min-height:44px; white-space:normal; }
.pet-shop-empty { padding:12px; border-radius:10px; background:#fff7df; color:#704b0c; }
.dark .pet-preset-card { background:#1e293b; border-color:#475569; color:#e2e8f0; }
.dark .pet-shop-empty { background:#3c321f; color:#ffe3a6; }
@media(max-width:600px) { .pet-shop-controls,.pet-product-editor { grid-template-columns:1fr; padding:12px; } }

.pet-award-bar.pet-award-active { position:sticky; }
.pet-product-editor label { display:flex; flex-direction:column; gap:6px; min-width:0; }

/* Blender-rendered WebP: same bounding box in cards, compact rows and feedback. */
.pet-rendered { object-fit:contain; }
.pet-cards:not(.pet-compact) .pet-avatar .pet-rendered:not(.pet-egg) { width:168px; height:189px; }
@media(max-width:600px) { .pet-cards:not(.pet-compact) .pet-avatar .pet-rendered:not(.pet-egg) { width:192px; height:216px; } }
.pet-fallback { display:grid; place-items:center; font-size:64px; }
.pet-avatar .pet-breathing { transform-origin:50% 85%; animation:pet-breathe var(--pet-breath-duration,4.6s) ease-in-out infinite; }
.pet-card:nth-child(3n+2) .pet-breathing { animation-delay:-1.4s; }
.pet-card:nth-child(3n) .pet-breathing { animation-delay:-2.8s; }
@keyframes pet-breathe { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-1px) scale(1.018,1.035); } }
@media(prefers-reduced-motion:reduce) { .pet-avatar .pet-breathing { animation:none; transform:none; } }

/* Larger common egg: transform-only motion, never changes growth or random result. */
.pet-avatar .pet-egg { width:168px; height:189px; transform-origin:50% 86%; animation:pet-egg-breathe var(--egg-duration,5.6s) ease-in-out infinite; }
.pet-compact .pet-card:has(.pet-egg) { grid-template-columns:88px minmax(0,1fr); }
.pet-compact .pet-avatar .pet-egg { width:88px; height:99px; }
@keyframes pet-egg-breathe { 0%,100% { transform:translateY(0) rotate(-1deg) scale(1); } 50% { transform:translateY(-2px) rotate(1deg) scale(1.025,1.035); } }
@media(prefers-reduced-motion:reduce) { .pet-avatar .pet-egg { animation:none; transform:none; } }

.pet-collection-entry { margin:12px 0; min-height:48px; font-weight:700; }
.pet-collection { width:min(900px,calc(100vw - 24px)); max-height:88dvh; padding:0; box-sizing:border-box; border:1px solid #bac9d4; border-radius:16px; background:#fff; color:#172033; overflow:auto; }
.pet-collection::backdrop { background:#17203399; }
.pet-collection header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; background:inherit; border-bottom:1px solid #dbe4ec; }
.pet-collection h2 { margin:0; font-size:1.25rem; font-weight:700; }
.pet-collection h3 { font-weight:700; margin:16px 0 8px; }
.pet-collection button { font:inherit; min-height:48px; border:1px solid #bac9d4; border-radius:10px; padding:10px; background:#f6fafc; color:inherit; cursor:pointer; }
.pet-collection button:focus-visible { outline:3px solid #6366f1; outline-offset:2px; }
.pet-collection-body { padding:16px; line-height:1.65; }
.pet-collection progress { width:100%; height:16px; accent-color:#0d9488; }
.pet-collection-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-top:16px; }
.pet-collection-unlocked,.pet-collection-locked { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:160px; padding:10px; border-radius:10px; }
.pet-collection-locked { border:1px dashed #bac9d4; background:#f1f5f9; color:#64748b; }
.pet-collection-locked span { font-size:48px; line-height:1.8; }
.pet-collection-stage-locked { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:160px; padding:10px; border:1px dashed #bac9d4; border-radius:10px; background:linear-gradient(145deg,#f8fafc,#e2e8f0); color:#64748b; }
.pet-collection-stage-mask { display:grid; place-items:center; width:100%; max-width:160px; aspect-ratio:8/9; border-radius:12px; background:radial-gradient(circle at 50% 35%,#fff 0 8%,#cbd5e1 9% 12%,#94a3b8 13% 100%); color:#fff; font-size:54px; font-weight:800; text-shadow:0 2px 4px #33415588; }
.pet-collection .pet-portrait { width:100%; max-width:160px; height:auto; aspect-ratio:8/9; object-fit:contain; }
.pet-collection-variants { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; text-align:center; }
.pet-collection figure { margin:0; min-width:0; }
.dark .pet-collection { background:#172033; color:#f1f5f9; }
.dark .pet-collection button,.dark .pet-collection-locked,.dark .pet-collection-stage-locked { background:#243247; color:#e2e8f0; }
@media(max-width:800px) { .pet-collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:500px) { .pet-collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pet-collection-variants { gap:6px; font-size:14px; } .pet-collection header { padding:12px; } .pet-collection header button { flex-shrink:0; } }

/* Animate the button wrapper, leaving the portrait's breathing transform independent. */
#pets-section button.pet-touch, .pet-collection button.pet-touch { position:relative; display:inline-flex; justify-content:center; align-items:center; flex:none; max-width:100%; min-width:46px; min-height:46px; padding:0; border:0; background:transparent; border-radius:12px; line-height:0; touch-action:manipulation; transform-origin:50% 85%; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pet-touch:focus-visible { outline:3px solid #6366f1; outline-offset:3px; }
.pet-cards:not(.pet-compact) .pet-avatar, .pet-profile .pet-touch, .pet-class-eggs .pet-touch { margin-top:24px; }
.pet-touch-reply { position:absolute; z-index:2; bottom:92%; left:50%; transform:translateX(-50%); width:max-content; max-width:min(180px,70vw); padding:9px 12px; border-radius:12px; background:#263c53; color:#fff; font:600 13px/1.65 system-ui; text-align:center; pointer-events:none; box-shadow:0 3px 10px #0002; }
.pet-touch-reply::after { content:''; position:absolute; top:100%; left:50%; margin-left:-5px; border:5px solid transparent; border-top-color:#263c53; }
.pet-touch[data-reacting] .pet-portrait { animation-play-state:paused; }
.pet-touch[data-reacting] { z-index:3; }
@media(prefers-reduced-motion:reduce) { .pet-touch .pet-portrait { animation:none !important; } }
.pet-touch-reply[hidden] { display:none; }
.pet-compact .pet-touch-reply { left:0; transform:none; max-width:140px; }
#pets-section .pet-touch-hint { font-size:14px; color:var(--text-secondary,#64748b); margin:8px 0; }

.points-pet-bridge { padding:16px; margin:0 0 20px; border:1px solid #b9d7ca; border-left:4px solid #399476; border-radius:12px; background:#f0faf6; color:#1e4035; line-height:1.65; }
.points-pet-bridge strong { font-size:17px; }
.points-pet-bridge p { margin:8px 0; font-size:14px; overflow-wrap:anywhere; }
.points-pet-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.points-pet-actions button { min-height:46px; padding:10px 14px; border:1px solid #6d9b8b; border-radius:10px; background:#fff; color:#205b48; font-family:inherit; font-size:14px; font-weight:600; line-height:1.5; cursor:pointer; }
.points-pet-actions button:focus-visible { outline:3px solid #6366f1; outline-offset:3px; }
.dark .points-pet-bridge { background:#18332c; color:#e2f5ed; border-color:#507c6c; }
.dark .points-pet-actions button { background:#23473b; color:#e2f5ed; }
@media(max-width:600px) { .points-pet-bridge { padding:12px; } .points-pet-actions { flex-direction:column; } .points-pet-actions button { width:100%; } }

/* Whole-class goals use existing pet controls and keep rewards separate from coins. */
.pet-quests { margin:20px 0; padding:18px; border:1px solid #b9cbdc; border-radius:16px; background:#f5fafc; }
.pet-quests > summary { cursor:pointer; font-weight:700; font-size:18px; padding:8px 0; }
.pet-quests p { line-height:1.7; overflow-wrap:anywhere; }
.pet-quest-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.pet-quest-form label { display:flex; flex-direction:column; gap:6px; }
.pet-quest-form input { min-width:0; width:100%; box-sizing:border-box; min-height:44px; padding:8px; border:1px solid #94a3b8; border-radius:8px; background:#fff; color:#172033; }
.pet-quest-list,.pet-class-eggs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px; margin:16px 0; }
.pet-quest-card { padding:16px; border:1px solid #cbd5e1; border-radius:12px; background:#fff; min-width:0; overflow-wrap:anywhere; }
.pet-quest-card h3 { font-size:18px; font-weight:700; margin:0; }
.pet-quest-card progress { width:100%; height:16px; accent-color:#0f766e; }
.pet-quest-card .pet-tools { margin:12px 0; }
.pet-quest-event { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #cbd5e1; }
.pet-class-eggs .pet-quest-card { display:flex; flex-direction:column; align-items:center; text-align:center; }
.pet-class-eggs .pet-portrait { width:160px; height:180px; object-fit:contain; }
.dark .pet-quests { background:#182b34; border-color:#526978; }
.dark .pet-quest-card,.dark .pet-quest-form input { background:#1e293b; color:#f1f5f9; border-color:#526978; }
@media(max-width:600px) { .pet-quests { padding:12px; } .pet-quest-form { grid-template-columns:1fr; } }
/* Growth profile: a readable companion sheet with persistent close control. */
.pet-profile { width:min(820px,calc(100vw - 24px)); }
.pet-profile .pet-collection-body { padding:24px; }
.pet-profile-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:center; }
.pet-profile-showcase { text-align:center; border-radius:24px; padding:18px 12px; background:radial-gradient(ellipse at center,#e1f4f0,transparent 72%); }
.pet-profile .pet-profile-showcase .pet-touch { display:block; width:min(100%,240px); margin:18px auto 0; }
.pet-profile-badge { display:inline-block; background:#dcfce7; color:#166534; padding:6px 14px; border-radius:30px; font-weight:700; }
.pet-profile-summary h3 { font-size:28px; margin:4px 0 20px; overflow-wrap:anywhere; }
.pet-profile-caption { color:#64748b; font-size:14px; margin:6px 0; }
.pet-profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 20px; }
.pet-profile-stats div { padding:12px; border:1px solid #dbe4ec; border-radius:14px; }
.pet-profile-stats dt { font-size:13px; color:#64748b; }
.pet-profile-stats dd { margin:4px 0 0; font-size:22px; font-weight:750; }
.pet-profile-progress-label { font-size:14px; font-weight:600; margin-bottom:8px; }
.pet-profile-summary progress { display:block; width:100%; height:10px; border:0; border-radius:10px; overflow:hidden; background:#e2e8f0; accent-color:#0f9488; }
.pet-profile-summary progress::-webkit-progress-bar { background:#e2e8f0; }
.pet-profile-summary progress::-webkit-progress-value { background:#0f9488; border-radius:10px; }
.pet-profile-summary progress::-moz-progress-bar { background:#0f9488; }
.pet-profile-next { border-left:3px solid #0f9488; padding:10px 12px; background:#f0fdfa; color:#115e59; font-size:14px; border-radius:0 8px 8px 0; }
.pet-profile-form { margin:24px 0; padding:18px; border:1px solid #dbe4ec; border-radius:16px; }
.pet-profile-form label { font-weight:600; font-size:14px; }
.pet-profile .pet-profile-save { background:#0f766e; color:white; border-color:#0f766e; min-height:46px; }
.pet-profile-feedback { flex-basis:100%; margin:0; font-size:14px; }
.pet-profile-feedback:empty { display:none; }
.pet-profile-section { padding:20px 0; border-top:1px solid #dbe4ec; }
.pet-profile-section h3 { margin:0; font-size:18px; }
.pet-profile-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.pet-profile-stage { display:flex; align-items:center; flex-direction:column; gap:6px; padding:14px 6px; border:1px dashed #94a3b8; border-radius:14px; color:#64748b; font-size:14px; }
.pet-profile-stage.is-unlocked { background:#f0fdfa; color:#115e59; border:1px solid #99d9ca; }
.pet-profile-stage-icon { font-size:23px; }
.pet-profile-history { list-style:none; padding:0; margin:12px 0 0; }
.pet-profile-history li { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid #e2e8f0; }
.pet-profile-history li div { min-width:0; }
.pet-profile-history li span { display:block; font-size:13px; color:#64748b; }
.pet-profile-history .is-positive { color:#0f766e; flex-shrink:0; }
.pet-profile-history .is-negative { color:#b45309; flex-shrink:0; }
.pet-profile-empty { padding:20px; background:#f1f5f9; border-radius:12px; font-size:14px; }
.dark .pet-profile-caption,.dark .pet-profile-stats dt,.dark .pet-profile-history li span { color:#cbd5e1; }
.dark .pet-profile-next,.dark .pet-profile-stage.is-unlocked,.dark .pet-profile-badge { background:#123f3a; color:#b8f4dd; }
.dark .pet-profile-empty { background:#263449; }
.dark .pet-profile-history .is-positive { color:#6ee7b7; }
.dark .pet-profile-history .is-negative { color:#fcd34d; }
@media(max-width:560px) { .pet-profile .pet-collection-body { padding:16px; } .pet-profile-hero { grid-template-columns:1fr; gap:12px; } .pet-profile .pet-profile-showcase .pet-touch { width:180px; } .pet-profile-summary h3 { font-size:24px; margin-bottom:14px; } .pet-profile-form { gap:12px; } .pet-profile-form label,.pet-profile-form button { flex-basis:100%; } }
.pet-profile[open] { display:flex; flex-direction:column; position:fixed; inset:0; margin:auto; height:min(880px,88dvh); overflow:hidden; }
.pet-profile > header { position:relative; flex-shrink:0; background:inherit; }
.pet-profile > .pet-collection-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.pet-profile .pet-profile-showcase .pet-touch { padding:0; border:0; background:transparent; }
.pet-profile .pet-profile-showcase .pet-portrait { width:100%; height:auto; max-width:none; }
/* Class collection atlas */
.pet-atlas[open] { display:flex; flex-direction:column; position:fixed; inset:0; margin:auto; height:min(920px,90dvh); width:min(980px,calc(100vw - 24px)); overflow:hidden; }
.pet-atlas > header { flex-shrink:0; position:relative; background:inherit; }
.pet-atlas > .pet-collection-body { overflow-y:auto; min-height:0; padding:24px; overscroll-behavior:contain; }
.pet-atlas-overview { padding:22px; border-radius:20px; background:#edf8f4; border:1px solid #c5e6db; }
.pet-atlas-eyebrow { margin:0; color:#0f766e; font-size:13px; font-weight:700; letter-spacing:.08em; }
.pet-atlas-overview h3 { margin:4px 0 12px; font-size:26px; }
.pet-atlas-overview p[role=status] { font-size:22px; font-weight:750; margin:10px 0; }
.pet-atlas-overview > p:not([role=status]):not(.pet-atlas-eyebrow) { font-size:14px; color:#475569; }
.pet-atlas .pet-milestones { margin-bottom:0; }
.pet-atlas-filters { display:flex; gap:8px; padding:20px 0 4px; flex-wrap:wrap; }
.pet-atlas-filters button[aria-pressed=true] { background:#0f766e; color:white; border-color:#0f766e; }
.pet-atlas .pet-collection-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.pet-atlas .pet-collection-grid > [hidden] { display:none; }
.pet-atlas .pet-collection-unlocked { background:#fff; border:1px solid #c3ded5; border-radius:18px; padding:14px 8px; transition:box-shadow .18s; }
.pet-atlas .pet-collection-unlocked:hover { box-shadow:0 5px 16px #0f766e20; }
.pet-atlas .pet-collection-locked { border-radius:18px; background:#f5f7fa; }
.pet-atlas .pet-collection-grid small { align-self:flex-start; font-size:12px; color:#64748b; }
.pet-atlas-card-hint { font-size:12px; color:#0f766e; margin-top:7px; }
.pet-atlas-detail > h3 { font-size:22px; margin-top:24px; }
.pet-atlas-detail > p { color:#64748b; font-size:14px; }
.pet-atlas-detail .pet-collection-variants { margin:20px 0 28px; }
.pet-atlas-detail figure { border:1px solid #dbe4ec; border-radius:16px; padding:12px; background:#f8fafc; }
.pet-atlas-detail figcaption { font-size:14px; font-weight:600; padding:8px 0; }
.pet-atlas-detail .pet-touch { background:transparent; border:0; padding:0; margin:12px auto 0; }
.pet-atlas .pet-collection-stage-mask { background:#e2e8f0; color:#64748b; text-shadow:none; max-width:160px; }
.pet-atlas-empty { padding:24px; text-align:center; }
.dark .pet-atlas-overview { background:#193d36; border-color:#355f53; }
.dark .pet-atlas-eyebrow,.dark .pet-atlas-card-hint { color:#6ee7b7; }
.dark .pet-atlas-overview > p:not([role=status]):not(.pet-atlas-eyebrow),.dark .pet-atlas-detail > p,.dark .pet-atlas .pet-collection-grid small { color:#cbd5e1; }
.dark .pet-atlas .pet-collection-unlocked,.dark .pet-atlas .pet-collection-locked,.dark .pet-atlas-detail figure { background:#243247; border-color:#475569; }
@media(max-width:720px) { .pet-atlas .pet-collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:480px) { .pet-atlas > .pet-collection-body { padding:14px; } .pet-atlas-overview { padding:16px; } .pet-atlas-overview h3 { font-size:22px; } .pet-atlas .pet-collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .pet-atlas-detail .pet-collection-variants { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#pets-section .pet-guide { margin:16px 0; border:1px solid #c8ddd8; border-radius:18px; background:#fff; overflow:hidden; }
#pets-section .pet-guide > summary { padding:18px 20px; cursor:pointer; color:#164e46; background:#f0f8f5; min-height:48px; box-sizing:border-box; }
.pet-guide-subtitle { display:block; margin:6px 0 0 18px; font-size:13px; color:#526b65; font-weight:400; }
.pet-guide-body { padding:20px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; line-height:1.7; }
.pet-guide-panel { min-width:0; }
.pet-guide-panel h3 { margin:0 0 10px; font-size:18px; }
.pet-guide-panel p { margin:8px 0; }
.pet-guide-path { list-style:none; padding:0; margin:20px 0 12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.pet-guide-path li { display:flex; flex-direction:column; gap:8px; padding:14px 10px; border:1px solid #c7e4da; border-radius:12px; background:#f1faf6; }
.pet-guide-path strong { color:#0f766e; font-size:17px; }
.pet-guide-path small,.pet-guide-note { color:#64748b; font-size:13px; }
.pet-guide-rules { margin-top:20px; }
.pet-guide-rules section { border-top:1px solid #e2e8f0; padding:12px 0; }
.pet-guide-rules h4 { margin:0; font-size:15px; }
.pet-guide-rules p { color:#475569; }
.pet-guide-sync { border-left:1px solid #e2e8f0; padding-left:26px; }
.pet-guide-sync-steps { padding-left:24px; margin:20px 0; }
.pet-guide-sync-steps li { padding:0 0 16px 8px; }
.pet-guide-sync-steps li::marker { color:#0f766e; font-weight:700; }
.pet-guide-sync-steps p { color:#475569; margin:4px 0; }
.pet-guide-sync-note { border-left:3px solid #d69c35; background:#fffbeb; color:#785520; padding:12px; border-radius:0 10px 10px 0; }
.pet-guide-extra { margin-top:12px; border-top:1px solid #dbe4ec; padding-top:12px; }
.pet-guide-extra summary { min-height:44px; cursor:pointer; font-weight:600; padding:8px 0; box-sizing:border-box; }
.pet-guide summary:focus-visible { outline:3px solid #6366f1; outline-offset:-3px; }
.dark #pets-section .pet-guide { background:#172033; border-color:#45605a; }
.dark #pets-section .pet-guide > summary,.dark .pet-guide-path li { background:#1b3934; color:#def7ed; }
.dark .pet-guide-subtitle,.dark .pet-guide-note,.dark .pet-guide-path small,.dark .pet-guide-rules p,.dark .pet-guide-sync-steps p { color:#cbd5e1; }
.dark .pet-guide-path strong { color:#6ee7b7; }
.dark .pet-guide-sync-note { background:#42351e; color:#fde4a7; }
@media(max-width:760px) { .pet-guide-body { grid-template-columns:1fr; gap:22px; padding:16px; } .pet-guide-sync { border-left:0; border-top:1px solid #dbe4ec; padding:20px 0 0; } }
@media(max-width:420px) { .pet-guide-path { grid-template-columns:1fr; } .pet-guide-path li { gap:3px; } }

/* Classroom rewards and projection */
.pet-ledger-dialog{width:min(680px,94vw);max-height:85dvh;padding:0;border:1px solid #cbd5e1;border-radius:20px;color:#172033;background:#fff}
.pet-ledger-header{position:sticky;top:0;background:inherit;display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px;border-bottom:1px solid #cbd5e1}
.pet-ledger-content{padding:20px}.pet-ledger-record{padding:14px 0;border-bottom:1px solid #cbd5e1;overflow-wrap:anywhere}.pet-ledger-record summary{cursor:pointer;min-height:44px}
.pet-ledger-dialog::backdrop{background:#17203399}.pet-ledger-dialog button{min-height:44px;padding:8px 14px;border:1px solid #94a3b8;border-radius:10px}
.pet-delivery-status,.pet-quest-next{display:block;color:#0f766e;font-weight:700;padding:8px 0}.pet-tools button[aria-pressed=true]{background:#1d4ed8;color:white}
.pet-quest-card[data-state=ready]{border:2px solid #0f766e;background:#f0fdfa}.pet-quest-next{font-size:18px}.pet-quest-card progress{height:24px}
.pet-projection-toggle{position:sticky;top:8px;z-index:3}
#pets-section.pet-projection>details,#pets-section.pet-projection>.pet-wallet-status{display:none}
.pet-projection .pet-cards{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}.pet-projection .pet-card{font-size:20px}.pet-projection .pet-avatar{min-height:220px}.pet-projection .pet-avatar img{width:220px;height:220px}
.pet-projection .pet-coin-balance{display:none}.pet-projection-feedback{max-width:min(760px,94vw);font-size:24px}.pet-batch-names{max-height:160px;overflow:auto;font-size:18px}
.dark .pet-ledger-dialog{background:#172033;color:#f1f5f9}.dark .pet-quest-card[data-state=ready]{background:#123d37}.dark .pet-quest-next,.dark .pet-delivery-status{color:#5eead4}

.pet-projection .pet-card>details,.pet-projection .pet-card>button:not(.pet-coin-balance){display:none}
@media(prefers-reduced-motion:no-preference){.pet-quest-card[data-state=ready] .pet-quest-next{animation:pet-goal-arrival .6s ease-out}@keyframes pet-goal-arrival{from{transform:translateY(6px);opacity:.3}to{transform:translateY(0);opacity:1}}}

/* Compact roster: keep profile actions out of the narrow portrait column. */
#pets-section:not(.pet-projection) .pet-compact .pet-card > button[data-pet-focus^="profile-"] { grid-column:1 / -1; width:100%; min-width:0; box-sizing:border-box; margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; padding:11px 14px; border-color:#c5dbd5; background:#edf5f1; color:#24594e; font-size:14px; font-weight:600; line-height:1.5; }
#pets-section:not(.pet-projection) .pet-compact .pet-card > button[data-pet-focus^="profile-"]::after { content:"→"; flex:none; font-size:18px; }
#pets-section:not(.pet-projection) .pet-compact .pet-card > button[data-pet-focus^="profile-"]:hover { background:#e0eeea; border-color:#6c9d90; }
.dark #pets-section:not(.pet-projection) .pet-compact .pet-card > button[data-pet-focus^="profile-"] { background:#1b3934; color:#def7ed; border-color:#45605a; }
@media(max-width:600px) {
  .pet-compact .pet-card { grid-template-columns:60px minmax(0,1fr); gap:5px 10px; }
  .pet-compact .pet-portrait { width:60px; height:70px; }
  #pets-section .pet-compact .pet-coin-balance { font-size:14px; padding:8px 10px; }
  #pets-section .pet-compact .pet-card-options summary { padding-left:0; }
  #pets-section .pet-tools > input { box-sizing:border-box; min-width:0; }
  #pets-section .pet-view-tools { gap:6px; }
  #pets-section .pet-view-tools button { flex:1; padding:9px 8px; font-size:14px; white-space:nowrap; }
}

.pet-touch.pet-outside .pet-portrait,.pet-touch.pet-page-hidden .pet-portrait{animation-play-state:paused!important}
.pet-touch.pet-motion-reduced .pet-portrait{animation:none!important;transform:none!important}
.pet-collection-next{display:block;margin-top:16px;color:#0f766e}.pet-recent-discoveries{margin-top:16px;padding:16px;border-radius:12px;background:#f0fdfa}.pet-recent-discoveries p{margin:8px 0}.dark .pet-recent-discoveries{background:#123d37}.dark .pet-collection-next{color:#5eead4}

/* 分享給學生：左邊是連結與分享動作，右邊是顯示設定；會讓連結失效的操作收在「連結管理」。
   顏色、圓角、陰影集中在這組變數，面板內其他規則只引用它們。 */
#pets-section .pet-share {
    --ps-brand:#1f7a66; --ps-brand-soft:#e3f3ec; --ps-ink:#17332c; --ps-muted:#5b7068; --ps-line:#c9dfd5; --ps-surface:#fff; --ps-danger:#b42318;
    --ps-r-sm:8px; --ps-r-md:12px; --ps-r-lg:16px; --ps-shadow:0 1px 2px #17332c14,0 1px 1px #17332c0a;
    margin:16px 0; padding:4px 16px; border:1px solid var(--ps-line); border-left:4px solid var(--ps-brand); border-radius:var(--ps-r-md); background:#f0faf6; color:var(--ps-ink);
}
#pets-section .pet-share > summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.pet-share-state { padding:2px 12px; border-radius:20px; background:#e2e8f0; color:#475569; font-size:13px; font-weight:700; }
.pet-share-state.is-on { background:#dcfce7; color:#166534; }
#pets-section .pet-share h3 { margin:0; font-size:17px; font-weight:750; line-height:1.4; }
#pets-section .pet-share p { margin:0; }
#pets-section .pet-share .pet-share-note { font-size:14px; color:var(--ps-muted); }
.pet-share-body { display:flex; flex-direction:column; gap:14px; padding-bottom:12px; }

/* 主要區：寬螢幕兩欄（連結較寬），窄螢幕自動上下排 */
.pet-share-main { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:14px; align-items:start; }
@media(min-width:1000px) { .pet-share-main { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); } }
.pet-share-card { display:flex; flex-direction:column; gap:12px; min-width:0; padding:16px; border:1px solid var(--ps-line); border-radius:var(--ps-r-lg); background:var(--ps-surface); box-shadow:var(--ps-shadow); }
.pet-share-linkcard { border-top:3px solid var(--ps-brand); }
.pet-share-cardhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; }
.pet-share-sync { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ps-muted); }
.pet-share-sync::before { content:''; width:9px; height:9px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 3px #22a06b33; flex:none; }
.pet-share-sync.is-offline::before { background:#94a3b8; box-shadow:0 0 0 3px #94a3b833; }
.pet-share-sync.is-failed { color:var(--ps-danger); }
.pet-share-sync.is-failed::before { background:var(--ps-danger); box-shadow:0 0 0 3px #b4231833; }
#pets-section .pet-share button.pet-share-refresh { min-height:32px; padding:4px 6px; border:0; background:none; color:inherit; font-size:inherit; text-decoration:underline; text-underline-offset:3px; }
.pet-share-link { display:flex; flex-wrap:wrap; gap:10px; }
#pets-section .pet-share-link input { flex:1 1 260px; min-width:0; background:#f6faf8; border-color:var(--ps-line); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:15px; }
#pets-section .pet-share-link .pet-primary { flex:0 0 auto; min-width:7.5em; }
.pet-share-actions { display:flex; flex-wrap:wrap; gap:10px; }
#pets-section .pet-share-actions button { background:var(--ps-surface); border-color:#9db5ac; color:var(--ps-ink); }
#pets-section .pet-share-actions button:hover:not(:disabled), #pets-section .pet-share-segment button:hover:not(:disabled) { background:var(--ps-brand-soft); }
#pets-section .pet-share-actions .pet-primary { background:#4f46e5; border-color:#4f46e5; color:#fff; }
#pets-section .pet-share-actions .pet-primary:hover:not(:disabled) { background:#4338ca; }
.pet-share-points { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.pet-share-points li { position:relative; padding-left:1.6em; line-height:1.6; }
.pet-share-points li::before { content:'✓'; position:absolute; left:0; font-weight:800; color:var(--ps-brand); }
#pets-section .pet-share-status { padding:10px 14px; border-radius:var(--ps-r-sm); background:var(--ps-brand-soft); color:var(--ps-ink); font-size:15px; }

/* 顯示設定：三選一按鈕＋開關 */
#pets-section .pet-share .pet-share-label { font-size:14px; font-weight:700; color:var(--ps-muted); }
.pet-share-segment { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid #9db5ac; border-radius:var(--ps-r-md); overflow:hidden; }
#pets-section .pet-share-segment button { border:0; border-radius:0; background:var(--ps-surface); color:var(--ps-ink); padding:10px 6px; white-space:normal; line-height:1.3; }
#pets-section .pet-share-segment button + button { border-left:1px solid #9db5ac; }
#pets-section .pet-share-segment button[aria-pressed=true] { background:var(--ps-brand); color:#fff; font-weight:700; }
#pets-section .pet-share-segment button:focus-visible { outline-offset:-3px; }
#pets-section .pet-share .pet-share-sample { padding:8px 12px; border-radius:var(--ps-r-sm); background:#f6faf8; border:1px dashed var(--ps-line); font-size:15px; }
.pet-share-switch { display:flex; align-items:center; gap:12px; padding-top:12px; border-top:1px solid var(--ps-line); cursor:pointer; }
.pet-share-switch span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pet-share-switch small { font-size:13px; color:var(--ps-muted); line-height:1.5; }
#pets-section .pet-share-switch input { appearance:none; -webkit-appearance:none; position:relative; flex:none; width:50px; height:30px; min-height:30px; padding:0; border:0; border-radius:99px; background:#b6c4be; cursor:pointer; transition:background .15s; }
#pets-section .pet-share-switch input::after { content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0004; transition:transform .15s; }
#pets-section .pet-share-switch input:checked { background:var(--ps-brand); }
#pets-section .pet-share-switch input:checked::after { transform:translateX(20px); }
#pets-section .pet-share-switch input:disabled { opacity:.5; cursor:default; }

/* 其他班級、說明與連結管理 */
.pet-share-others { display:flex; flex-direction:column; gap:8px; }
.pet-share-other { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:10px 14px; border:1px solid var(--ps-line); border-radius:var(--ps-r-md); background:var(--ps-surface); }
.pet-share-other strong { font-size:16px; overflow-wrap:anywhere; }
#pets-section .pet-share details { border-top:1px solid var(--ps-line); padding:4px 0 0; font-size:14px; }
#pets-section .pet-share details > summary { padding:10px 0; min-height:44px; box-sizing:border-box; }
#pets-section .pet-share details > p { margin:0 0 10px; line-height:1.7; }
.pet-share-manage-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:8px 0; }
.pet-share-manage-row p { flex:1 1 260px; color:var(--ps-muted); }
#pets-section .pet-share button.pet-share-danger { background:var(--ps-surface); border-color:#e4b4ae; color:var(--ps-danger); }
#pets-section .pet-share button.pet-share-danger:hover:not(:disabled) { background:#fdf0ee; }
@media(max-width:600px) {
    #pets-section .pet-share { padding:4px 12px; }
    .pet-share-card { padding:14px; }
    #pets-section .pet-share-link .pet-primary { flex:1 1 100%; }
    #pets-section .pet-share-actions button { flex:1 1 auto; }
}
@media(prefers-reduced-motion:reduce) { #pets-section .pet-share-switch input, #pets-section .pet-share-switch input::after { transition:none; } }

.dark #pets-section .pet-share { --ps-ink:#e2f5ed; --ps-muted:#a7c4b8; --ps-line:#3f6657; --ps-surface:#1b2b33; --ps-brand-soft:#23473b; --ps-danger:#fda29b; background:#18332c; }
.dark .pet-share-state { background:#243247; color:#e2e8f0; }
.dark .pet-share-state.is-on { background:#164e3b; color:#bbf7d0; }
.dark #pets-section .pet-share-link input, .dark #pets-section .pet-share .pet-share-sample { background:#14232a; color:var(--ps-ink); }
.dark #pets-section .pet-share-segment button[aria-pressed=true] { background:#2f8f7b; }
.dark #pets-section .pet-share button.pet-share-danger { border-color:#7a3b35; }
.dark #pets-section .pet-share button.pet-share-danger:hover:not(:disabled) { background:#3b2320; }

/* 分享 QR Code：卡片固定白底黑碼（深色模式也不反轉），放大投影時佔滿畫面 */
.pet-qr { width:min(540px,calc(100vw - 24px)); box-sizing:border-box; border:0; border-radius:20px; padding:0; color:#17332c; background:#fff; box-shadow:0 24px 64px -12px #0f172a73; overflow:hidden; }
.pet-qr::backdrop { background:#0f172a99; }
.pet-qr[open] { display:flex; flex-direction:column; }
.pet-qr header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 12px 20px; border-bottom:1px solid #e2ece7; }
.pet-qr h3 { margin:0; font-size:18px; font-weight:750; overflow-wrap:anywhere; }
.pet-qr canvas { display:block; width:auto; height:auto; max-width:min(380px,calc(100% - 40px)); max-height:calc(100dvh - 300px); margin:18px auto 0; border-radius:14px; box-shadow:0 1px 2px #17332c1f,0 8px 20px -10px #17332c40; }
.pet-qr .pet-tools { justify-content:center; margin:16px 0 0; padding:0 16px; }
.pet-qr button { min-height:46px; padding:10px 18px; border:1px solid #9db5ac; border-radius:10px; background:#fff; color:#17332c; font-size:16px; cursor:pointer; }
.pet-qr button:hover { background:#e3f3ec; }
.pet-qr button:focus-visible { outline:3px solid #6366f1; outline-offset:3px; }
.pet-qr .pet-primary { color:#fff; background:#4f46e5; border-color:#4f46e5; font-weight:700; }
.pet-qr .pet-primary:hover { background:#4338ca; }
.pet-qr .pet-qr-hint { margin:12px 20px 18px; font-size:14px; line-height:1.7; color:#5b7068; text-align:center; }
.pet-qr.is-projected { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; border-radius:0; }
.pet-qr.is-projected .pet-qr-hint { display:none; }
/* 放大投影：標題列與按鈕列固定高度，卡片吃掉其餘空間並等比例縮放（直式手機也不變形） */
.pet-qr.is-projected canvas { flex:1 1 0; min-height:0; width:calc(100% - 32px); max-width:none; max-height:none; margin:12px auto 0; object-fit:contain; border-radius:0; box-shadow:none; }
.pet-qr.is-projected .pet-tools { margin:12px 0 16px; }

/* 金幣兌換商店：三個分頁（兌換獎勵／獎勵設定／兌換紀錄）。獎勵直接在清單上修改。 */
#pets-section .pet-shop > summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.pet-shop-state { padding:2px 12px; border-radius:20px; background:#e2e8f0; color:#475569; font-size:13px; font-weight:700; }
.pet-shop-state.is-on { background:#fff1c7; color:#735011; }
.pet-shop-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:4px 0 16px; border:1px solid #94a3b8; border-radius:12px; overflow:hidden; }
#pets-section .pet-shop-tabs button { border:0; border-radius:0; background:#fff; color:#334155; padding:10px 6px; white-space:normal; line-height:1.3; }
#pets-section .pet-shop-tabs button + button { border-left:1px solid #94a3b8; }
#pets-section .pet-shop-tabs button[aria-selected=true] { background:#4f46e5; color:#fff; font-weight:700; }
#pets-section .pet-shop-tabs button:focus-visible { outline-offset:-3px; }
.pet-shop-panel { display:flex; flex-direction:column; gap:12px; padding-bottom:4px; }
#pets-section .pet-shop-panel p { margin:0; }
#pets-section .pet-shop-panel h3 { margin:8px 0 0; font-size:17px; font-weight:750; }
#pets-section .pet-shop-note { font-size:14px; color:var(--text-secondary,#64748b); }
#pets-section .pet-shop-empty { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px; }
.pet-shop-warn { padding:12px 16px; border:1px solid #fecaca; border-radius:12px; background:#fef2f2; color:#991b1b; }
.pet-shop-coin { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:14px 16px; border:1px solid #dbbe79; border-radius:12px; background:#fff9e8; color:#5c400e; }
.pet-shop-coin > div { display:flex; flex-direction:column; gap:2px; flex:1 1 260px; min-width:0; }
.pet-shop-coin span { font-size:14px; line-height:1.6; }
#pets-section .pet-shop-guide { border:0; padding:0; font-size:14px; }
#pets-section .pet-shop-guide summary { padding:6px 0; min-height:44px; box-sizing:border-box; font-weight:600; }
.pet-product-list { display:flex; flex-direction:column; gap:8px; }
.pet-product-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0; padding:10px 12px; border:1px solid #cbd5e1; border-radius:12px; background:#fff; }
#pets-section .pet-product-row > input { flex:1 1 220px; min-width:0; }
.pet-product-cost { display:flex; align-items:center; gap:6px; flex:0 0 auto; font-size:18px; }
#pets-section .pet-product-cost input { width:96px; }
.pet-product-row.is-off { background:#f1f5f9; }
#pets-section .pet-product-row.is-off input:not([type=checkbox]) { color:#64748b; }
.pet-product-new { border-style:dashed; background:#f8fafc; }
#pets-section button.pet-product-remove { border-color:#e4b4ae; background:#fff; color:#b42318; }
#pets-section button.pet-product-remove:hover { background:#fdf0ee; }
.pet-switch { display:inline-flex; align-items:center; gap:8px; min-height:46px; font-size:14px; white-space:nowrap; cursor:pointer; }
#pets-section .pet-switch input { appearance:none; -webkit-appearance:none; position:relative; flex:none; width:50px; height:30px; min-height:30px; padding:0; border:0; border-radius:99px; background:#b6c4be; cursor:pointer; transition:background .15s; }
#pets-section .pet-switch input::after { content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0004; transition:transform .15s; }
#pets-section .pet-switch input:checked { background:#1f7a66; }
#pets-section .pet-switch input:checked::after { transform:translateX(20px); }
.pet-preset-chips { display:flex; flex-wrap:wrap; gap:8px; }
#pets-section .pet-preset-chips button { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:99px; background:#fff; color:#172033; text-align:left; white-space:normal; }
#pets-section .pet-preset-chips button:hover:not(:disabled) { background:#fff9e8; border-color:#dbbe79; }
.pet-preset-chips small { padding:2px 8px; border-radius:99px; background:#fff5d8; color:#735011; font-size:13px; white-space:nowrap; }
#pets-section .pet-preset-chips button:disabled { opacity:1; background:#f1f5f9; color:#64748b; }
.pet-preset-chips button:disabled small { background:#e2e8f0; color:#64748b; }
@media(max-width:600px) {
    #pets-section .pet-product-row > input { flex-basis:100%; }
    .pet-product-row .pet-switch { margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) { #pets-section .pet-switch input, #pets-section .pet-switch input::after { transition:none; } }
.dark .pet-shop-state { background:#243247; color:#e2e8f0; }
.dark .pet-shop-state.is-on, .dark .pet-shop-coin { background:#3c321f; color:#ffe3a6; border-color:#967944; }
.dark #pets-section .pet-shop-tabs button { background:#1e293b; color:#e2e8f0; }
.dark #pets-section .pet-shop-tabs button[aria-selected=true] { background:#4f46e5; color:#fff; }
.dark .pet-product-row, .dark #pets-section .pet-preset-chips button { background:#1e293b; border-color:#475569; color:#e2e8f0; }
.dark .pet-product-row.is-off, .dark .pet-product-new, .dark #pets-section .pet-preset-chips button:disabled { background:#172033; color:#94a3b8; }
.dark .pet-preset-chips small { background:#3c321f; color:#ffe3a6; }
.dark .pet-shop-warn { background:#451a1a; color:#fecaca; border-color:#7f1d1d; }
.dark #pets-section button.pet-product-remove { background:#1e293b; border-color:#7a3b35; color:#fda29b; }
#pets-section .pet-shop-panel > button { align-self:flex-start; }