/* =========================================================
 * system/cloud.css — Apple ID / 屏幕使用时间 / AI 实验室 / 数据存储
 * 类名命名空间 .cld-，不重定义任何通用类
 * ========================================================= */

.cld { padding-bottom: 30px; }

/* ---- 通用区块 ---- */
.cld-load {
  padding: 26px 16px; text-align: center; color: var(--text2); font-size: 14px;
}

.cld-off {
  background: #FFF8E6; border: 1px solid #FFE9A8;
}
.cld-off-t { font-size: 15px; font-weight: 600; color: #8A6D1F; margin-bottom: 6px; }
.cld-off-d { font-size: 13px; line-height: 1.5; color: #96792C; }
.cld-off-d b { font-weight: 600; }

/* ---- Apple ID 已登录卡片 ---- */
.cld-id { text-align: center; padding: 22px 16px 18px; }
.cld-id .ava { margin: 0 auto 10px; }
.cld-id-name { font-size: 20px; font-weight: 600; color: var(--text); }
.cld-id-mail { font-size: 14px; color: var(--text2); margin-top: 3px; }
.cld-id-tag {
  display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(52, 199, 89, .14); color: #248A3D; font-size: 12px; font-weight: 600;
}

/* ---- 未登录引导 ---- */
.cld-hero { text-align: center; padding: 28px 18px 22px; }
.cld-hero svg { opacity: .35; }
.cld-hero-t { font-size: 22px; font-weight: 700; margin-top: 10px; color: var(--text); }
.cld-hero-d { font-size: 13px; color: var(--text2); line-height: 1.55; margin-top: 6px; }

/* ---- 表单 ---- */
.cld-field { padding: 0 16px; background: var(--card); }
.cld-field + .cld-field { border-top: 1px solid var(--sep); }
.cld-input {
  width: 100%; height: 46px; border: none; outline: none; background: transparent;
  font-size: 17px; color: var(--text); font-family: inherit;
}
.cld-input::placeholder { color: var(--text3); }

.cld-2fa { margin-top: 14px; }
.cld-code {
  padding: 10px 16px 12px; font-size: 13px; color: var(--text2); line-height: 1.5;
}
.cld-code b {
  font-size: 17px; letter-spacing: 2px; color: var(--blue);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.cld-btns { padding: 18px 16px 4px; }
.cld-btns .btn { width: 100%; height: 48px; font-size: 17px; font-weight: 600; }

.cld-links {
  display: flex; justify-content: space-between; padding: 14px 22px 0;
  font-size: 14px; color: var(--blue);
}
.cld-links span { cursor: pointer; }
.cld-links span:active { opacity: .5; }

/* ---- AI 实验室状态条 ---- */
.cld-status {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
}
.cld-st-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
}
.cld-status.on .cld-st-dot {
  background: var(--green); box-shadow: 0 0 0 4px rgba(52, 199, 89, .18);
}
.cld-status.off .cld-st-dot {
  background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 149, 0, .18);
}
.cld-st-main { flex: 1; min-width: 0; }
.cld-st-t { font-size: 16px; font-weight: 600; color: var(--text); }
.cld-st-s { font-size: 12px; color: var(--text2); margin-top: 3px; line-height: 1.4; }

/* ---- 数据库信息 ---- */
.cld-total { font-size: 30px; font-weight: 700; color: var(--text); margin: 6px 0 8px; }
.cld-db { font-size: 12px; color: var(--text2); line-height: 1.7; word-break: break-all; }
.cld-db b { color: var(--text); font-weight: 600; }
.cld-db code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; background: var(--bg2); padding: 2px 5px; border-radius: 4px;
}
.cld-err { color: var(--red); }

.num { font-variant-numeric: tabular-nums; }

/* ---- 每日趋势 ---- */
.cld-trend { display: flex; gap: 6px; padding-top: 10px; }
.cld-trend-day {
  flex: 1; text-align: center; background: var(--bg2); border-radius: 8px; padding: 7px 2px 6px;
}
.cld-trend-day i { display: block; font-style: normal; font-size: 10px; color: var(--text2); }
.cld-trend-day em {
  display: block; font-style: normal; font-size: 13px; font-weight: 600;
  color: var(--text); margin-top: 3px;
}

/* ---- 深色模式 ---- */
html.dark .cld-off { background: rgba(255, 204, 0, .10); border-color: rgba(255, 204, 0, .25); }
html.dark .cld-off-t { color: var(--yellow); }
html.dark .cld-off-d { color: #C9B77A; }
html.dark .cld-id-tag { background: rgba(52, 199, 89, .20); color: #6EE787; }
html.dark .cld-input { color: var(--dark-text); }
html.dark .cld-input::placeholder { color: #636366; }
html.dark .cld-code b { color: #4DA3FF; }
html.dark .cld-db code { background: rgba(255, 255, 255, .08); }
html.dark .cld-trend-day { background: rgba(255, 255, 255, .07); }
html.dark .row-sub code { background: rgba(255, 255, 255, .08); }