/* 易行成事海外版 · 共享样式（Telegram Mini App）
   主题：青绿（--tg-accent #0F6E56），背景 --tg-bg #D5E8DE
   规则：所有方向用逻辑属性（margin-inline/start/end、text-align:start/end），
        混排文本容器加 unicode-bidi:plaintext；RTL 自动镜像，无需单独写。 */
:root {
  --tg-bg: #D5E8DE;
  --tg-card: #ffffff;
  --tg-text: #173404;
  --tg-hint: #5F7A6B;
  --tg-accent: #0F6E56;
  --tg-accent-2: #18B98F;
  --tg-accent-text: #ffffff;
  --tg-danger: #A32D2D;
  --tg-border: rgba(15,110,86,.3);
  --tg-radius: 12px;
  --topbar-h: 52px;
  --bottomnav-h: 56px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  background: var(--tg-bg); color: var(--tg-text);
  -webkit-text-size-adjust: 100%;
}
/* 让内容不被底部导航遮挡 */
.page-wrap { max-width: 560px; margin: 0 auto; padding: calc(var(--topbar-h) + 8px) 14px calc(var(--bottomnav-h) + 18px); min-height: 100vh; }

/* ── 顶部栏（语言切换）── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  max-width: 560px; margin: 0 auto; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--tg-bg); z-index: 20;
  border-bottom: 1px solid rgba(15,110,86,.15);
}
.topbar .brand { font-weight: 700; font-size: 15px; color: var(--tg-accent); }
.topbar .brand small { font-weight: 400; font-size: 11px; color: var(--tg-hint); display: block; line-height: 1.1; }
.lang-sel {
  margin-inline-start: auto; border: 1px solid var(--tg-accent); background: var(--tg-card);
  color: var(--tg-text); border-radius: 8px; padding: 6px 8px; font-size: 13px;
  max-width: 200px; min-width: 0;
}
/* ── 底部导航 ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottomnav-h);
  max-width: 560px; margin: 0 auto; display: flex;
  background: var(--tg-card); border-top: 1px solid rgba(15,110,86,.2);
  z-index: 20; padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--tg-hint); font-size: 11px;
  border: none; background: none; cursor: pointer; padding: 4px 2px;
}
.bottom-nav-item .ico { font-size: 19px; line-height: 1; }
.bottom-nav-item.active { color: var(--tg-accent); font-weight: 700; }
.bottom-nav-item span { unicode-bidi: plaintext; }

/* ── 卡片 / 通用块 ── */
.card {
  background: var(--tg-card); border: 1px solid var(--tg-border); border-radius: var(--tg-radius);
  padding: 14px; margin-bottom: 12px;
}
.card h3 { font-size: 15px; margin-bottom: 8px; }
.card p { font-size: 13px; color: var(--tg-hint); line-height: 1.55; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--tg-hint); font-size: 12px; }
.empty { text-align: center; color: var(--tg-hint); padding: 28px 12px; font-size: 14px; }

/* ── 按钮 ── */
.btn {
  border: 1px solid var(--tg-accent); background: var(--tg-card); color: var(--tg-accent);
  border-radius: 10px; padding: 10px 14px; font-size: 14px; cursor: pointer; text-align: center;
  text-decoration: none; display: inline-block; unicode-bidi: plaintext;
}
.btn.primary { background: var(--tg-accent); color: var(--tg-accent-text); }
.btn.block { display: block; width: 100%; }
.btn.danger { border-color: var(--tg-danger); color: var(--tg-danger); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ── 表单 ── */
.field { width: 100%; border: 1px solid var(--tg-border); border-radius: 10px; padding: 10px 12px;
  font-size: 14px; background: var(--tg-card); color: var(--tg-text); text-align: start; unicode-bidi: plaintext; }
textarea.field { min-height: 64px; resize: vertical; }
label.lbl { display: block; font-size: 12px; color: var(--tg-hint); margin: 10px 0 4px; }

/* ── 列表（目标/任务）── */
.list { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: var(--tg-card); border: 1px solid var(--tg-border); border-radius: var(--tg-radius);
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.item .title { font-size: 15px; font-weight: 600; }
.item .meta { font-size: 12px; color: var(--tg-hint); }
.item .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--tg-accent);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  color: var(--tg-accent-text); font-size: 13px; background: var(--tg-card); }
.check.done { background: var(--tg-accent); border-color: var(--tg-accent); }

/* ── 道法术器 框架 ── */
.daofa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.daofa .cell { background: var(--tg-card); border: 1px solid var(--tg-border); border-radius: var(--tg-radius);
  padding: 12px; text-align: center; }
.daofa .cell .k { font-size: 18px; font-weight: 700; color: var(--tg-accent); }
.daofa .cell .v { font-size: 12px; color: var(--tg-hint); margin-top: 4px; }

/* ── 成事塔画布 ── */
.tower-canvas { width: 100%; height: 320px; display: block; background: var(--tg-bg); border-radius: var(--tg-radius); }
.tower-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--tg-hint); margin-top: 6px; }
.tower-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-inline-end: 4px; vertical-align: middle; }

/* ── 订阅档位 ── */
.plan { border: 2px solid var(--tg-border); border-radius: var(--tg-radius); padding: 14px; margin-bottom: 10px; cursor: pointer; background: var(--tg-card); }
.plan.active { border-color: var(--tg-accent); }
.plan .price { font-size: 20px; font-weight: 700; }
.plan .name { font-size: 14px; font-weight: 600; }
.plan .badge { font-size: 11px; background: var(--tg-accent-2); color: #fff; border-radius: 6px; padding: 2px 6px; margin-inline-start: 6px; }

/* ── Toast / 提示 ── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottomnav-h) + 14px);
  background: rgba(23,52,4,.92); color: #fff; padding: 9px 14px; border-radius: 10px; font-size: 13px;
  z-index: 50; max-width: 90%; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ── 加载/错误 ── */
.loading { color: var(--tg-hint); font-size: 13px; padding: 18px 0; text-align: center; }
.err { color: var(--tg-danger); font-size: 13px; padding: 10px 0; }
[dir="rtl"] .row { flex-direction: row; }