.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); }
.card-soft { background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.btn { min-height: 48px; border: 0; border-radius: 14px; padding: 0 var(--space-4); font-weight: 700; transition: transform .12s, background .12s; }
.btn:active { transform: scale(.98); }
.btn-primary { color: #fff; background: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { color: var(--color-text); background: #fff; border: 1px solid var(--color-border); }
.btn-ghost { color: var(--color-primary); background: transparent; }
.btn-danger { color: #fff; background: var(--color-danger); }
.btn-small { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: .85rem; }
.field { display: grid; gap: 7px; }
.field label { font-size: .83rem; font-weight: 700; color: #4c535c; }
.input, .select, .textarea { width: 100%; border: 1px solid #d9dde2; border-radius: 13px; background: #fff; color: var(--color-text); padding: 13px 14px; outline: none; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.textarea { min-height: 88px; resize: vertical; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #ebedf0; border-radius: 13px; padding: 4px; }
.segmented button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; color: var(--color-text-muted); }
.segmented button.active { background: #fff; color: var(--color-text); box-shadow: var(--shadow-sm); }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.badge-primary { color: var(--color-primary-dark); background: var(--color-primary-soft); }
.badge-success { color: var(--color-success); background: var(--color-success-soft); }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: inherit; }
.loading { display: inline-flex; align-items: center; gap: 9px; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast-root { position: fixed; left: 50%; bottom: 94px; z-index: 1000; transform: translateX(-50%); width: min(92vw, 420px); pointer-events: none; }
.toast { color: #fff; background: rgba(27,29,33,.94); border-radius: 13px; padding: 13px 15px; box-shadow: var(--shadow-md); animation: toast-in .18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 900; display: grid; place-items: end center; background: rgba(0,0,0,.48); padding: 20px; }
.modal { width: min(100%, 520px); max-height: 88vh; overflow: auto; background: #fff; border-radius: 24px; padding: 20px; box-shadow: var(--shadow-md); }
.sheet-handle{width:42px;height:5px;margin:-7px auto 12px;border-radius:999px;background:#d7dbe0}.modal-backdrop{padding:0 12px max(12px,env(safe-area-inset-bottom))}.modal{border-radius:24px 24px 18px 18px;animation:sheet-up .2s ease-out}@keyframes sheet-up{from{transform:translateY(22px);opacity:.7}to{transform:translateY(0);opacity:1}}


/* v26: アプリ設定の単位切替 */
.unit-option{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}
.unit-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.segmented .unit-option{
  min-height:40px;
  border-radius:10px;
  font-weight:700;
  color:var(--color-text-muted);
}
.segmented .unit-option.active{
  background:#fff;
  color:var(--color-text);
  box-shadow:var(--shadow-sm);
}


/* v27 date / premium / selection */
.date-control{display:flex;align-items:center;gap:7px}.date-control .date-input{min-width:0}.today-button{white-space:nowrap}
.ranking-page-header{align-items:center}.ranking-overall-inline{display:flex;align-items:center;gap:8px;margin-left:auto}
.premium-lock{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff4e8;color:var(--color-primary);font-size:.72rem;font-weight:900}
.premium-icon{font-size:.95rem}.premium-locked-part .ranking-part-head{cursor:pointer}
.default-badge{background:#eef0f3;color:#747a84}
.unit-segment .unit-option.active,.plan-segment .unit-option.active{background:var(--color-primary);color:#fff;box-shadow:0 2px 8px rgba(255,90,31,.22)}
.unit-segment .unit-option,.plan-segment .unit-option{transition:background .15s,color .15s,box-shadow .15s}

/* v28 custom date picker */
.category-badge{display:inline-flex;align-items:center;border-radius:999px;background:var(--color-bg);padding:3px 7px;font-size:.68rem;color:var(--color-text-muted);white-space:nowrap}.exercise-meta{display:flex;align-items:center;gap:6px;min-width:0}.share-preview{border-radius:18px;overflow:hidden;border:1px solid var(--color-border);background:#111}.share-preview img{display:block;width:100%;height:auto}.category-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}