/* 玄学工具 —— 手机优先，深浅两套，离线可用 */

:root{
  --bg:#f6f3ee; --surface:#fffdf9; --fg:#1d1a16; --muted:#6f685e;
  --line:#e2dbd0; --accent:#8a5a2b; --yang:#1d1a16; --yin:#1d1a16;
  --warn:#9a3412; --ok:#2f6a3f;
  --role-a:#b03a2e; --role-b:#2c5f7c; --role-c:#9a7b2f;
  --radius:16px; --pad:16px;
  --tabh:calc(58px + env(safe-area-inset-bottom));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15130f; --surface:#1e1b16; --fg:#ece7de; --muted:#9b9386;
    --line:#332e26; --accent:#c99a63; --yang:#ece7de; --yin:#ece7de;
    --warn:#f0a080; --ok:#8fd0a3;
  --role-a:#e07a62; --role-b:#6fa8c8; --role-c:#d4b06a;
    --role-a:#e07a62; --role-b:#6fa8c8; --role-c:#d4b06a;
  }
}
:root[data-theme="dark"]{
  --bg:#15130f; --surface:#1e1b16; --fg:#ece7de; --muted:#9b9386;
  --line:#332e26; --accent:#c99a63; --yang:#ece7de; --yin:#ece7de;
  --warn:#f0a080; --ok:#8fd0a3;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:var(--tabh);
  overscroll-behavior-y:contain;
}
h1{font-size:26px;line-height:1.25;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:17px;margin:0 0 10px}
h3{font-size:14px;margin:0 0 6px;color:var(--muted);font-weight:600}
p{margin:0 0 10px}
a{color:var(--accent)}
small{font-size:12.5px;color:var(--muted)}

#app{padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 24px;max-width:720px;margin:0 auto}
.muted{color:var(--muted)}
.warn{color:var(--warn)}
.ok{color:var(--ok)}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.grow{flex:1;min-width:0}
.mt{margin-top:16px} .mt-s{margin-top:8px} .mb{margin-bottom:14px}
.center{text-align:center}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 卡片 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 12px}
.card.tight{padding:10px 12px}

/* 按钮 */
button,.btn{
  font:inherit;color:var(--fg);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;
  min-height:44px;padding:0 18px;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;text-decoration:none;
}
button:active,.btn:active{opacity:.7}
button.primary{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}
button.block{width:100%}
button.ghost{background:transparent;border-color:transparent;color:var(--muted);min-height:36px;padding:0 8px}
button.danger{color:var(--warn);border-color:var(--warn)}
button:disabled{opacity:.45;cursor:default}
button.chip{min-height:36px;padding:0 13px;font-size:14px;border-radius:999px}
button.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* 表单 */
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px}
input,select,textarea{
  font:inherit;width:100%;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:12px;padding:11px 12px;min-height:44px;
}
textarea{min-height:110px;resize:vertical;line-height:1.7}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
select{appearance:none;background-image:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.errs{background:var(--surface);border:1px solid var(--warn);border-radius:12px;padding:10px 12px;margin:12px 0}
.errs li{margin:2px 0;font-size:14px;color:var(--warn)}
.errs ul{margin:0;padding-left:18px}

/* 列表 */
.list{list-style:none;margin:0;padding:0}
.list li{margin-bottom:8px}
.item{display:flex;gap:12px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  width:100%;text-align:left;min-height:62px;text-decoration:none;color:inherit}
.item .grow{min-width:0}
.item b{display:block;font-size:15.5px;font-weight:600}
.item small{display:block}
.chev{color:var(--muted);opacity:.5;flex:none}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);
  padding:24px 16px;text-align:center;color:var(--muted);font-size:14px}
.badge{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted);flex:none}
.badge.ok{border-color:var(--ok);color:var(--ok)}
.badge.warn{border-color:var(--warn);color:var(--warn)}

/* 卦盘 */
.gua-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.gua-sym{font-size:40px;line-height:1}
.pan{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.pan li{display:grid;grid-template-columns:34px 1fr 54px 46px 34px 30px;gap:8px;
  align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.pan li:last-child{border-bottom:none}
.pan .no{color:var(--muted);font-size:12px}
.pan .yao{display:flex;align-items:center;height:14px}
.bar{height:9px;border-radius:2px;background:var(--yang)}
.yao.y .bar{width:62px}
.yao.n{gap:7px}
.yao.n .bar{width:27.5px;background:var(--yin)}
.pan .mv{color:var(--warn);font-weight:700;font-size:13px}
.pan .sy{font-size:11.5px;color:var(--accent);font-weight:700}
.algo{font-size:12.5px;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:9px 11px;line-height:1.65}

/* 底部 tab */
.tabs{position:fixed;left:0;right:0;bottom:0;height:var(--tabh);
  display:flex;background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);z-index:20}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;text-decoration:none;color:var(--muted);font-size:11px;min-height:58px}
.tabs a[aria-current="page"]{color:var(--fg);font-weight:600}
.tabs .ic{font-size:19px;line-height:1}

/* 浮动返回 */
.back{background:transparent;border:none;color:var(--muted);min-height:34px;padding:0;margin-bottom:6px;font-size:14px}

/* 新版本提示条。贴在底部 tab 上方，不遮挡内容 */
.updbar{position:fixed;left:12px;right:12px;bottom:calc(var(--tabh) + 10px);
  z-index:30;min-height:42px;border-radius:999px;font-size:14px;font-weight:600;
  background:var(--accent);color:#fff;border:none;box-shadow:0 4px 18px rgba(0,0,0,.22)}