/* 拾己 Unlost · 品牌组件层 v0.1
   所有屏幕复用；与 dev 仓 RN 组件一一映射（.ul-btn → Button 等）。
   规矩：新组件先加进这里再用，不逐屏私造样式。颜色一律走 var(--ul-*)。 */

/* ---- 按钮 ---- */
.ul-btn { display: block; width: 100%; padding: 13px 16px; border: none; cursor: pointer;
  border-radius: var(--ul-radius-sm); font-family: var(--ul-font); font-size: 15px;
  background: var(--ul-primary-600); color: #F4F8F2; transition: transform .12s ease; }
.ul-btn:active { transform: scale(.97); }
.ul-btn-accent { background: var(--ul-accent-300); color: var(--ul-accent-600); }
.ul-btn-ghost { background: var(--ul-surface); color: var(--ul-text); border: 1px solid var(--ul-border); }
.ul-btn-sos { background: rgba(214,69,69,.08); color: var(--ul-sos); border: 1px solid rgba(214,69,69,.28); }

/* ---- 卡片与容器 ---- */
.ul-card { background: var(--ul-surface); border: 1px solid var(--ul-border);
  border-radius: var(--ul-radius-md); padding: 16px; color: var(--ul-text); font-size: 14px; }
.ul-card-title { font-size: 16px; font-weight: 500; margin: 0 0 6px; }

/* ---- 状态瓦片（状态选择器大格） ---- */
.ul-state { background: var(--ul-surface); border: 1px solid var(--ul-border); border-radius: var(--ul-radius-sm);
  color: var(--ul-text); font-size: 15px; text-align: center; padding: 18px 12px; cursor: pointer;
  transition: transform .12s ease; }
.ul-state:active { transform: scale(.97); }
.ul-state.on { background: var(--ul-primary-600); border-color: var(--ul-primary-600); color: #F4F8F2; }
.ul-state-desc { display: block; font-size: 11px; margin-top: 4px; opacity: .72; }

/* ---- 小标签 ---- */
.ul-tag { display: inline-block; font-size: 11px; color: var(--ul-primary-600);
  background: var(--ul-primary-50); border-radius: var(--ul-radius-pill); padding: 2px 10px; }

/* ---- 输入 ---- */
.ul-input { width: 100%; background: var(--ul-surface); border: 1px solid var(--ul-border);
  border-radius: var(--ul-radius-sm); padding: 12px 14px; font-family: var(--ul-font);
  font-size: 15px; color: var(--ul-text); box-sizing: border-box; }
.ul-input:focus { outline: none; border-color: var(--ul-primary-300); }

/* ---- 文字 ---- */
.ul-title { color: var(--ul-text); font-size: 28px; font-weight: 600; margin: 28px 0 6px; }
.ul-sub { color: var(--ul-text-muted); font-size: 14px; margin: 0 0 20px; }
.ul-caption { color: var(--ul-text-muted); font-size: 12px; }
.ul-logo { color: var(--ul-primary-600); font-weight: 600; font-size: 15px; letter-spacing: .5px; }

/* ---- 呼吸圆（练习进行页主角） ---- */
.ul-circle { width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--ul-primary-300) 0%, var(--ul-primary-500) 45%, var(--ul-primary-700) 100%);
  display: flex; align-items: center; justify-content: center;
  animation: ul-breathe 9s ease-in-out infinite; }
.ul-circle-label { font-size: 15px; color: #F4F8F2; letter-spacing: 2px; }
@keyframes ul-breathe { 0%,100% { transform: scale(.80); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ul-circle { animation: none; } }

/* ---- 分隔 ---- */
.ul-divider { border: none; border-top: 1px solid var(--ul-border); margin: 16px 0; }