/* A2: content hierarchy, readable states, and touch-sized controls. Scoped to Mine. */
.mine-page #view { padding: 0 20px calc(178px + env(safe-area-inset-bottom)); }
.qs-mine { --mine-green:#35644b; --mine-muted:#58685e; --mine-line:#e3e8df; --mine-blue:#3b6785; --mine-gold:#82612f; color:#253c30; font-size:16px; line-height:1.6; min-width:0; }
.qs-mine h1,.qs-mine h2,.qs-mine h3 { font-family:inherit; letter-spacing:0; }
.qs-mine button,.qs-mine a { touch-action:manipulation; }
.qs-mine button:not(:disabled):active { opacity:.72; }
.qs-mine .icon-button { min-width:44px; min-height:44px; }
.qs-mine .text-button { font-size:14px; min-height:44px; min-width:44px; padding:8px 0 8px 8px; }
.qs-mine .primary,.qs-mine .secondary { font-size:16px; min-height:48px; border-radius:14px; }
.qs-mine .notice { font-size:13px; line-height:1.8; color:#52634e; background:#ecf0e5; margin:20px 0; }
.qs-mine .notice.gold { color:#765322; background:#f6ecda; }
.qs-mine-hero { position:relative; isolation:isolate; margin:0 -20px; padding:calc(12px + env(safe-area-inset-top)) 20px 22px; background:linear-gradient(110deg,#f7f8f2 35%,#eff3ea); }
.qs-mine-landscape { position:absolute; width:62%; height:138px; right:0; bottom:0; opacity:.4; z-index:-1; pointer-events:none; mask-image:linear-gradient(to right,transparent,#000 38%); }
.qs-mine-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qs-mine-top h1 { font-size:30px; font-weight:700; }
.qs-mine-top .icon-button { background:#ffffffb3; border:1px solid #e2e8de; border-radius:50%; color:#395944; }
.qs-mine-profile { display:flex; align-items:center; gap:13px; margin-top:14px; }
.qs-mine-profile>div:last-child { min-width:0; }
.qs-mine-avatar { display:grid; place-items:center; width:50px; height:50px; flex-shrink:0; color:#487358; background:#e4ede0; border:2px solid #fff; border-radius:50%; }
.qs-mine-avatar .icon { width:29px; height:29px; stroke-width:1.4; }
.qs-mine-profile h2 { font-size:20px; font-weight:650; overflow-wrap:anywhere; }
.qs-mine-profile p { font-size:14px; color:var(--mine-muted); margin-top:3px; }
.qs-mine-card { background:#fffefa; border:1px solid #e5e9e0; border-radius:20px; padding:18px; margin:16px 0; }
.qs-mine-section-title { font-size:19px; font-weight:650; margin:8px 0 12px; }
.qs-mine-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qs-mine-section-head h2,.qs-mine-section-head h3 { font-size:18px; font-weight:650; }
.qs-mine-section-head>span { font-size:13px; color:var(--mine-muted); }
.qs-mine-caption { font-size:14px; color:var(--mine-muted); line-height:1.8; margin-top:6px; }
.qs-mine-progress { margin:0; }
.qs-mine-offline-card { margin:0 0 12px; padding:10px 18px 14px; }
.qs-mine-offline-overview { display:flex; align-items:center; gap:20px; padding:4px 0 10px; }
.qs-mine-offline-overview>div:last-child { flex:1; min-width:0; }
.qs-mine-offline-overview strong { display:block; font-size:20px; font-weight:600; }
.qs-mine-offline-overview p { font-size:14px; color:var(--mine-muted); margin-top:6px; }
.qs-mine-ring { position:relative; width:104px; height:104px; flex-shrink:0; margin:0; --ring:var(--mine-green); }
.qs-mine-ring svg { width:100%; height:100%; }
.qs-mine-ring path,.qs-mine-ring circle { fill:none; stroke-width:8; stroke-linecap:round; }
.qs-mine-ring-track,.qs-mine-five path { stroke:#dce6d9; }
.qs-mine-ring-fill,.qs-mine-five path.is-lit { stroke:var(--ring); }
.qs-mine-ring-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; pointer-events:none; }
.qs-mine-ring-center>strong { color:var(--mine-green); font-size:28px; font-variant-numeric:tabular-nums; font-weight:650; line-height:1.4; }
.qs-mine-ring-center small { font-size:16px; font-weight:400; color:var(--mine-muted); margin-left:2px; }
.qs-mine-ring-center>span { font-size:14px; color:var(--mine-muted); }
.qs-mine-ring.is-big { width:196px; height:196px; margin:0 auto; }
.qs-mine-ring.is-big .qs-mine-ring-center>strong { font-size:38px; }
.qs-mine-ring.is-big small { font-size:22px; }
.qs-mine-legend { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding-top:10px; border-top:1px solid var(--mine-line); }
.qs-mine-legend span { text-align:center; font-size:14px; color:var(--mine-muted); display:flex; flex-direction:column; align-items:center; gap:2px; }
.qs-mine-legend i { font-style:normal; font-size:15px; line-height:1.3; }
.qs-mine-legend .is-lit { color:var(--mine-green); font-weight:600; }
.qs-mine-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.qs-mine-stat-card { min-width:0; border:1px solid #e5e9e0; border-radius:18px; padding:16px; background:#fffefa; text-align:left; }
.qs-mine-stat-label { display:flex; align-items:center; justify-content:space-between; gap:4px; font-size:15px; }
.qs-mine-stat-label .icon { width:15px; height:15px; color:var(--mine-muted); }
.qs-mine-stat-card>strong { display:block; margin-top:10px; font-size:27px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1.3; color:var(--mine-blue); }
.qs-mine-stat-card strong small { font-size:14px; font-weight:400; color:var(--mine-muted); }
.qs-mine-stat-card.is-gold>strong { color:var(--mine-gold); }
.qs-mine-stat-track { display:block; height:5px; margin:24px 0 15px; background:#e4ebee; border-radius:4px; overflow:hidden; }
.qs-mine-stat-track i { display:block; height:100%; background:#58809a; }
.qs-mine-stat-note { display:block; font-size:13px; color:var(--mine-muted); }
.qs-mine-goal-note { margin:12px 0 0; font-size:13px; color:var(--mine-muted); }
.qs-mine-collection { display:flex; align-items:center; gap:12px; padding:18px; margin:24px 0; width:100%; text-align:left; border-radius:18px; border:1px solid #dce5d5; background:#edf2e7; }
.qs-mine-collection-icon { width:40px; height:40px; display:grid; place-items:center; flex-shrink:0; border-radius:11px; background:#dfe9d6; color:#43603a; }
.qs-mine-collection>span:nth-child(2) { flex:1; min-width:0; }
.qs-mine-collection strong { display:block; font-size:17px; font-weight:600; }
.qs-mine-collection small { display:block; font-size:14px; color:#57674f; }
.qs-mine-count { display:flex; align-items:center; gap:4px; color:#4e6545; font-size:14px; white-space:nowrap; }
.qs-mine-count .icon { width:15px; height:15px; }
.qs-mine-growth { margin:24px 0; }
.qs-mine-badge-preview,.qs-mine-badge-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.qs-mine-badge-preview { margin-top:10px; }
.qs-mine-badge-preview>button,.qs-mine-badge-grid>button { min-width:0; text-align:center; padding:8px 0; border-radius:14px; }
.qs-mine-medal { position:relative; display:grid; place-items:center; width:58px; height:66px; margin:0 auto 9px; clip-path:polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%); background:#cdd6c8; color:#626f5e; }
.qs-mine-medal:before { content:''; position:absolute; inset:3px; clip-path:inherit; background:#e9ede4; }
.qs-mine-medal.is-lit { background:#cbaa69; color:#416640; }
.qs-mine-medal.is-lit:before { background:linear-gradient(140deg,#fcf2d9,#eedaaa); }
.qs-mine-medal .icon { position:relative; width:27px; height:27px; stroke-width:1.5; }
.qs-mine-badge-preview strong,.qs-mine-badge-grid strong { display:block; font-size:14px; font-weight:550; overflow-wrap:anywhere; }
.qs-mine-badge-preview small,.qs-mine-badge-grid small { display:block; font-size:13px; color:var(--mine-muted); margin-top:3px; }
.qs-mine-services { padding:0 16px; }
.qs-mine .menu-row { font-size:16px; min-height:58px; gap:10px; border-color:var(--mine-line); }
.qs-mine .menu-row .label { min-width:0; }
.qs-mine .menu-row .value { font-size:13px; color:var(--mine-muted); }
.qs-mine .menu-row>.icon { color:#566d55; }
.qs-mine-foot { text-align:center; font-size:14px; color:var(--mine-muted); margin:24px 0 12px; }
.qs-mine-foot span { display:block; margin-top:6px; font-size:13px; }
.qs-mine-head { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:8px; padding:calc(12px + env(safe-area-inset-top)) 0 16px; }
.qs-mine-head h1 { text-align:center; font-size:18px; font-weight:650; }
.qs-mine-head .icon-button { margin-left:-8px; }
.qs-mine-head-space { width:44px; }
.qs-mine-title { font-size:26px; margin:8px 0; font-weight:650; }
.qs-mine-tabs { display:flex; gap:3px; margin:12px 0 20px; padding:4px; background:#e9eee3; border-radius:13px; }
.qs-mine-tabs>button { flex:1; font-size:14px; min-height:44px; border-radius:10px; padding:8px 4px; color:#526148; }
.qs-mine-tabs>button.active { background:#fffefa; color:#254b32; box-shadow:0 1px 4px #33492612; font-weight:600; }
.qs-mine-offline-summary { text-align:center; padding:4px 0 8px; }
.qs-mine-offline-summary h2 { font-size:20px; margin-top:10px; }
.qs-mine-offline-summary p { font-size:14px; color:var(--mine-muted); margin-top:6px; }
.qs-mine-offline-list { padding:0 16px; }
.qs-mine-offline-item { display:flex; align-items:center; gap:12px; padding:18px 0; border-bottom:1px solid var(--mine-line); }
.qs-mine-offline-item:last-child { border:0; }
.qs-mine-item-icon { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:12px; background:#edf0e7; color:#677160; }
.qs-mine-item-icon.is-lit { background:#e3edda; color:var(--mine-green); }
.qs-mine-offline-item>div { flex:1; min-width:0; }
.qs-mine-offline-item h3 { font-size:17px; }
.qs-mine-offline-item p { font-size:13px; color:var(--mine-muted); margin-top:4px; }
.qs-mine-status { font-size:14px; color:#5d6856; white-space:nowrap; }
.qs-mine-status.is-lit { color:var(--mine-green); }
.qs-mine-overview { text-align:center; padding:20px 0; color:var(--mine-blue); }
.qs-mine-overview>strong { font-size:40px; font-weight:650; font-variant-numeric:tabular-nums; }
.qs-mine-overview small { font-size:18px; font-weight:400; }
.qs-mine-overview p { font-size:14px; color:var(--mine-muted); margin-top:8px; }
.qs-mine-overview.is-gold { color:var(--mine-gold); }
.qs-mine-course { display:flex; align-items:center; gap:12px; padding:18px 0; border-bottom:1px solid var(--mine-line); min-height:80px; }
.qs-mine-course:first-child { padding-top:0; }
.qs-mine-course:last-child { border:0; padding-bottom:0; }
.qs-mine-course>div:nth-child(2) { flex:1; min-width:0; }
.qs-mine-course h3 { font-size:16px; }
.qs-mine-course p { font-size:13px; color:var(--mine-muted); margin:4px 0 8px; }
.qs-mine-course>.icon { width:15px; height:15px; }
.qs-mine-course progress { display:block; width:100%; height:5px; border:0; border-radius:5px; overflow:hidden; accent-color:var(--mine-blue); }
.qs-mine-course progress::-webkit-progress-bar { background:#e5ebdf; }
.qs-mine-course progress::-webkit-progress-value { background:#507b96; border-radius:5px; }
.qs-mine-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; text-align:center; margin-top:16px; }
.qs-mine-chart small,.qs-mine-chart span { font-size:13px; color:var(--mine-muted); white-space:nowrap; }
.qs-mine-bar-track { height:90px; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid #d8dfd1; margin:5px 0; }
.qs-mine-bar-track i { display:block; width:55%; background:#b29963; border-radius:4px 4px 0 0; }
.qs-mine-chart.is-compact { gap:5px; height:32px; margin:8px 0 4px; }
.qs-mine-chart.is-compact .qs-mine-bar-track { height:26px; margin:0; }
.qs-mine-chart.is-compact .qs-mine-bar-track i { width:100%; border-radius:2px 2px 0 0; }
.qs-mine-search { display:flex; align-items:center; gap:8px; padding:0 12px; background:#e9eee3; border:1px solid #dce4d5; border-radius:12px; margin:20px 0 12px; }
.qs-mine-search input { width:100%; min-width:0; border:0; outline:0; background:none; min-height:48px; font-size:16px; color:#263e31; }
.qs-mine-search input::placeholder { color:#5b6953; }
.qs-mine-search:focus-within { outline:2px solid #657e58; outline-offset:2px; }
.qs-mine-favorite-types { display:flex; gap:4px; flex-wrap:wrap; margin:8px 0 18px; }
.qs-mine-favorite-types button { flex:1; min-width:44px; min-height:44px; font-size:14px; padding:8px; border-radius:12px; color:#506046; }
.qs-mine-favorite-types button[aria-pressed=true] { background:#35644b; color:#fff; }
.qs-mine-favorite { display:flex; align-items:center; gap:8px; padding:14px 0; border-bottom:1px solid var(--mine-line); }
.qs-mine-favorite-open { display:flex; flex:1; align-items:center; gap:12px; min-width:0; padding:0; text-align:left; min-height:66px; }
.qs-mine-favorite-open>span:last-child { flex:1; min-width:0; }
.qs-mine-favorite strong { display:block; font-size:16px; font-weight:550; line-height:1.6; overflow-wrap:anywhere; }
.qs-mine-favorite small { display:block; font-size:13px; color:var(--mine-muted); margin-top:5px; }
.qs-mine-favorite>.icon-button { color:#526c48; }
.qs-mine-favorite>.icon-button .icon { fill:#e3ecda; }
.qs-mine-badge-grid { gap:24px 12px; margin:26px 0; }
.qs-mine-badge-grid .qs-mine-medal { width:74px; height:82px; }
.qs-mine-badge-grid .qs-mine-medal .icon { width:33px; height:33px; }
.qs-mine-settings-title { font-size:14px; color:var(--mine-muted); font-weight:500; margin:24px 2px 8px; }
.qs-mine-settings-title+.qs-mine-card { margin-top:0; }
.qs-mine-settings-group { padding:0 16px; }
.qs-mine .setting-row { font-size:16px; min-height:64px; gap:12px; padding:15px 0; border-color:var(--mine-line); }
.qs-mine .setting-row:last-child { border:0; }
.qs-mine .setting-row small { font-size:13px; color:var(--mine-muted); margin-top:3px; }
.qs-mine-inline-field { display:flex; align-items:center; gap:6px; flex-shrink:0; font-size:14px; }
.qs-mine-inline-field input { width:76px; height:44px; border:1px solid #c5d1bc; border-radius:10px; padding:6px; font-size:16px; background:#f7f9f2; color:#253c30; }
.qs-mine-time-input { width:120px!important; height:44px!important; border:1px solid #c5d1bc; border-radius:10px; background:#f7f9f2; padding:5px; font-size:16px; color:#253c30; }
.qs-mine .qs-mine-switch { appearance:none; position:relative; width:52px; height:44px; flex-shrink:0; cursor:pointer; margin:0; }
.qs-mine-switch:before { content:''; position:absolute; inset:7px 0; background:#99a590; border-radius:30px; }
.qs-mine-switch:after { content:''; position:absolute; top:10px; left:3px; width:24px; height:24px; background:white; border-radius:50%; box-shadow:0 1px 3px #1d332326; transition:transform .15s; }
.qs-mine-switch:checked:before { background:#376e4c; }
.qs-mine-switch:checked:after { transform:translateX(22px); }
.qs-mine-spaced { margin:20px 0; }
.qs-mine-badge-detail { text-align:center; padding:12px 0; }
.qs-mine-badge-detail .qs-mine-medal { width:94px; height:106px; margin:5px auto 20px; }
.qs-mine-badge-detail .qs-mine-medal .icon { width:38px; height:38px; }
.qs-mine-badge-detail h3 { font-size:20px; }
.qs-mine-badge-detail p { margin:12px 0; font-size:15px; }
.qs-mine-badge-detail .secondary { margin-top:18px; }
.qs-mine-guest h2 { font-size:20px; }
.qs-mine-guest p { font-size:15px; color:var(--mine-muted); margin:12px 0 20px; }
.qs-mine-empty { text-align:center; padding:40px 8px; }
.qs-mine-empty>.icon { width:36px; height:36px; margin:0 auto 14px; color:#6d855e; }
.qs-mine-empty h2 { font-size:19px; }
.qs-mine-empty p { font-size:14px; color:var(--mine-muted); margin:12px 0 20px; }
#sheet.qs-mine-popup { top:auto; bottom:0; transform:none; width:min(100%,var(--phone)); border-radius:24px 24px 0 0; max-height:86dvh; background:#fffdf5; }
#sheet.qs-mine-popup .sheet-inner { padding:12px 24px calc(24px + env(safe-area-inset-bottom)); }
#sheet.qs-mine-popup .sheet-header h2 { font-size:15px; color:#56634b; font-weight:400; }
.qs-mine-celebration { text-align:center; }
.qs-mine-confetti { color:#a58443; font-size:23px; letter-spacing:14px; animation:qs-mine-spark .6s ease-out; }
.qs-mine-celebration-medals { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:14px 0; }
.qs-mine-celebration-medals .qs-mine-medal { margin:0; }
.qs-mine-celebration h3 { font-size:23px; margin:16px 0 12px; }
.qs-mine-celebration p { font-size:17px; color:#456041; }
.qs-mine-celebration>small { display:block; font-size:14px; color:#5e694f; margin:12px 0 24px; }
.qs-mine-celebration .primary { font-size:16px; min-height:48px; }
.qs-mine-celebration .text-button { font-size:15px; min-height:44px; margin-top:8px; }
@keyframes qs-mine-spark { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.large-text .qs-mine { font-size:19px; }
.large-text .qs-mine .qs-mine-caption,.large-text .qs-mine .qs-mine-profile p,.large-text .qs-mine .qs-mine-foot,.large-text .qs-mine .qs-mine-goal-note { font-size:16px; }
.large-text .qs-mine .menu-row,.large-text .qs-mine .setting-row,.large-text .qs-mine-favorite strong,.large-text .qs-mine-course h3 { font-size:19px; }
.large-text .qs-mine .menu-row .value,.large-text .qs-mine .setting-row small,.large-text .qs-mine-favorite small,.large-text .qs-mine-course p,.large-text .qs-mine .notice { font-size:15px; }
.large-text .qs-mine .qs-mine-legend { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.large-text .qs-mine .qs-mine-legend span { font-size:18px; }
.large-text .qs-mine .qs-mine-metrics { grid-template-columns:1fr; }
.large-text .qs-mine .qs-mine-stat-label { font-size:19px; }
.large-text .qs-mine .qs-mine-stat-note,.large-text .qs-mine .qs-mine-stat-card small { font-size:16px; }
.large-text .qs-mine .qs-mine-badge-preview,.large-text .qs-mine .qs-mine-badge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.large-text .qs-mine .qs-mine-badge-preview strong,.large-text .qs-mine .qs-mine-badge-grid strong { font-size:17px; }
.large-text .qs-mine .qs-mine-badge-preview small,.large-text .qs-mine .qs-mine-badge-grid small { font-size:15px; }
.large-text .qs-mine .qs-mine-offline-overview p,.large-text .qs-mine .qs-mine-offline-item p { font-size:15px; }
.large-text .qs-mine .qs-mine-status { font-size:16px; }
@media (max-width:359px) {
  .mine-page #view { padding-left:16px; padding-right:16px; }
  .qs-mine-hero { margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  .qs-mine-card { padding:14px; }
  .qs-mine-offline-card { padding:8px 14px 14px; }
  .qs-mine-offline-overview { gap:12px; }
  .qs-mine-ring { width:94px; height:94px; }
  .qs-mine-offline-overview strong { font-size:19px; }
  .qs-mine-offline-overview p { font-size:13px; }
  .qs-mine-stat-card { padding:14px 12px; }
  .qs-mine-stat-card>strong small { display:block; margin-top:3px; }
  .qs-mine-collection { padding:16px 14px; gap:10px; }
  .qs-mine-offline-item { gap:8px; flex-wrap:wrap; }
  .qs-mine-offline-item>div { min-width:135px; }
  .qs-mine-status { margin-left:auto; }
  .qs-mine-chart { gap:2px; }
  .qs-mine-services,.qs-mine-settings-group { padding:0 14px; }
  .large-text .qs-mine .setting-row { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { .qs-mine-confetti { animation:none; } .qs-mine-switch:after { transition:none; } }
@media (prefers-contrast:more) { .qs-mine { --mine-muted:#334337; --mine-line:#8b9a81; } .qs-mine-card { border-color:#8b9a81; } }