/* TGFlow 工具箱共用样式（浅色专业）。类名统一 tg- 前缀，与各页面旧样式互不影响。 */
:root{
  --tg-bg:#F5F7FA; --tg-surface:#FFFFFF; --tg-subtle:#F8FAFC; --tg-line:#E3E8EF; --tg-line-strong:#D0D7E2;
  --tg-ink:#0F172A; --tg-ink-2:#344054; --tg-muted:#475467; --tg-faint:#667085;
  --tg-primary:#1F5AE6; --tg-primary-hover:#1846B8; --tg-primary-tint:#EAF0FF; --tg-primary-ink:#1A4BC4;
  --tg-paid:#B45309; --tg-paid-tint:#FFF4E5; --tg-ok:#067647; --tg-ok-tint:#E7F6EC; --tg-err:#B42318; --tg-err-tint:#FEF3F2;
  --tg-font:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tg-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --tg-r-sm:8px; --tg-r:10px; --tg-r-lg:16px;
  color-scheme:light;
}
.tg-page{margin:0;overflow-x:clip;background:var(--tg-bg);color:var(--tg-ink);font:15px/1.6 var(--tg-font);-webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
.tg-page *,.tg-page *::before,.tg-page *::after{box-sizing:border-box}
.tg-wrap{max-width:720px;margin:0 auto;padding:0 16px}
.tg-mono{font-family:var(--tg-mono);font-variant-numeric:tabular-nums}
.tg-muted{color:var(--tg-muted)} .tg-faint{color:var(--tg-faint);font-size:13px}
.tg-h1{margin:0;font-size:26px;line-height:1.3;font-weight:700;letter-spacing:-.3px}
.tg-h2{margin:0;font-size:17px;line-height:1.4;font-weight:700}

/* 顶部导航 */
.tg-header{position:sticky;top:0;z-index:40;background:var(--tg-surface);border-bottom:1px solid var(--tg-line)}
.tg-header-in{max-width:720px;margin:0 auto;height:60px;padding:0 12px 0 16px;display:flex;align-items:center;gap:8px}
.tg-brand{display:flex;align-items:center;gap:10px;color:var(--tg-ink);text-decoration:none;font-weight:700;font-size:16px;margin-right:auto;min-width:0}
.tg-brand>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-logo{width:30px;height:30px;border-radius:8px;background:var(--tg-primary);color:#fff;display:flex;align-items:center;justify-content:center;
  font:600 13px/1 var(--tg-mono);flex-shrink:0}

/* 按钮 */
.tg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--tg-r);
  border:1px solid var(--tg-line-strong);background:var(--tg-surface);color:var(--tg-ink);font:500 15px/1.2 var(--tg-font);text-decoration:none;cursor:pointer}
.tg-btn:hover{background:var(--tg-subtle)}
.tg-btn.primary{background:var(--tg-primary);border-color:var(--tg-primary);color:#fff}
.tg-btn.primary:hover{background:var(--tg-primary-hover);border-color:var(--tg-primary-hover)}
.tg-btn.tint{background:var(--tg-primary-tint);border-color:var(--tg-primary-tint);color:var(--tg-primary-ink)}
.tg-btn.ghost{border-color:transparent;background:transparent;color:var(--tg-ink-2)}
.tg-btn.danger{color:var(--tg-err);border-color:#F4C7C3}
.tg-btn.block{display:flex;width:100%}
.tg-btn.lg{min-height:50px;font-size:16px;border-radius:12px}
.tg-btn.sm{min-height:36px;padding:0 12px;font-size:14px;border-radius:var(--tg-r-sm)}
.tg-btn:disabled{opacity:.45;cursor:not-allowed}

/* 表单 */
.tg-label{display:block;margin:14px 0 6px;font-size:13px;font-weight:500;color:var(--tg-ink-2)}
.tg-input{width:100%;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--tg-line-strong);border-radius:var(--tg-r);background:var(--tg-surface);
  color:var(--tg-ink);font:15px/1.4 var(--tg-font)}
textarea.tg-input{padding:12px 14px;min-height:96px}
.tg-input:focus{outline:none;border-color:var(--tg-primary);box-shadow:0 0 0 4px var(--tg-primary-tint)}

/* 卡片 / 列表 */
.tg-card{background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:var(--tg-r-lg);padding:16px}
.tg-card + .tg-card{margin-top:12px}
.tg-rows>*{padding:12px 0;border-bottom:1px solid #EEF2F6}
.tg-rows>*:last-child{border-bottom:0}

/* 标签 */
.tg-chip{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;background:#F2F4F7;color:var(--tg-ink-2);font-size:12px;white-space:nowrap}
.tg-chip.paid{background:var(--tg-paid-tint);color:var(--tg-paid)}
.tg-chip.ok{background:var(--tg-ok-tint);color:var(--tg-ok)}
.tg-chip.primary{background:var(--tg-primary-tint);color:var(--tg-primary-ink)}
.tg-price{color:var(--tg-paid);font:500 12px/1 var(--tg-mono);margin-left:6px;white-space:nowrap}

/* 提示文字 */
.tg-msg{min-height:1.4em;margin:8px 0 0;font-size:14px}
.tg-msg.ok{color:var(--tg-ok)} .tg-msg.err{color:var(--tg-err)}

/* 语言切换 */
.tg-lang{display:inline-flex;border:1px solid var(--tg-line-strong);border-radius:var(--tg-r-sm);overflow:hidden}
.tg-lang button{min-height:32px;min-width:40px;padding:0 8px;border:0;background:transparent;color:var(--tg-muted);font:500 13px/1 var(--tg-font);cursor:pointer}
.tg-lang button[aria-pressed="true"]{background:var(--tg-primary-tint);color:var(--tg-primary-ink)}

/* 可访问性 */
.tg-page a:focus-visible,.tg-page button:focus-visible,.tg-page select:focus-visible{outline:3px solid var(--tg-primary);outline-offset:2px}
.tg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tg-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}