/* ClawBot Theme — 暗色 + 玫红/琥珀渐变 + 毛玻璃 */
:root {
  --bg: #0a0610;
  --bg-elevated: #14101c;
  --surface: rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f5f1ec;
  --text-secondary: #a8a29e;
  --text-dim: #78716c;
  --accent-pink: #f472b6;
  --accent-amber: #fb923c;
  --accent-grad: linear-gradient(135deg,#f472b6 0%, #fb923c 100%);
  --accent-grad-soft: linear-gradient(135deg,rgba(244,114,182,0.15) 0%, rgba(251,146,60,0.15) 100%);
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --shadow-card: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 40px rgba(244,114,182,0.2);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  background-image:
    radial-gradient(at 20% 0%, rgba(244,114,182,0.08) 0%, transparent 50%),
    radial-gradient(at 80% 100%, rgba(251,146,60,0.06) 0%, transparent 50%);
}
img { max-width:100%; display:block; }

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ============ Buttons ============ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; border-radius:10px; border:none;
  font-size:14px; font-weight:500; cursor:pointer;
  transition:all .18s ease;
}
.btn-primary {
  background:var(--accent-grad);
  color:#fff;
  box-shadow:0 4px 16px rgba(244,114,182,0.3);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(244,114,182,0.45); }
.btn-secondary {
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { color:var(--text); background:var(--surface); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-block { width:100%; }

/* ============ Forms ============ */
.field { display:block; margin-bottom:18px; }
.field-label {
  display:block; font-size:12px; font-weight:500; color:var(--text-secondary);
  margin-bottom:6px; letter-spacing:0.3px;
}
.field-hint { font-size:11px; color:var(--text-dim); margin-top:4px; }
.input, .textarea, .select {
  width:100%;
  padding:11px 14px;
  /* iOS Safari 在 input < 16px 时会强制缩放页面，所以基础字号锁 16px */
  font-size:16px; color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  outline:none;
  transition:all .15s ease;
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
}
@media (min-width:768px) {
  .input, .textarea, .select { font-size:14px; }
}
.input:focus, .textarea:focus, .select:focus {
  border-color:var(--accent-pink);
  background:rgba(244,114,182,0.05);
}
.textarea { resize:vertical; min-height:80px; line-height:1.55; }

/* ============ Cards ============ */
.card {
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:var(--shadow-card);
}
.card-glass {
  background:rgba(20,16,28,0.6);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:16px;
}

/* ============ Pills / Badges ============ */
.pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:12px;
  font-size:11px; font-weight:500;
  background:var(--surface); color:var(--text-secondary);
  border:1px solid var(--border);
}
.pill-accent { background:var(--accent-grad-soft); color:#fff; border-color:rgba(244,114,182,0.3); }
.pill-success { background:rgba(52,211,153,0.12); color:var(--success); border-color:rgba(52,211,153,0.25); }
.pill-warning { background:rgba(251,191,36,0.12); color:var(--warning); border-color:rgba(251,191,36,0.25); }

/* ============ App Shell ============ */
.app-shell { min-height:100vh; display:flex; flex-direction:column; }
.app-header {
  height:60px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(15,10,22,0.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.app-brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; flex-shrink:0; }
.app-brand .logo {
  width:32px; height:32px; border-radius:10px;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(244,114,182,0.4);
  flex-shrink:0;
}
.app-brand .name {
  background:var(--accent-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.app-nav { display:flex; gap:4px; }
.app-nav a {
  padding:8px 14px; border-radius:8px;
  font-size:13px; color:var(--text-secondary);
  transition:all .15s ease; white-space:nowrap;
}
.app-nav a:hover { color:var(--text); background:var(--surface); }
.app-nav a.active { color:#fff; background:var(--accent-grad-soft); }
.app-userbar { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.app-userbar .pill { white-space:nowrap; }

.app-main {
  flex:1;
  padding:32px 24px 60px;
  max-width:1180px; margin:0 auto; width:100%;
}

/* ============ Mobile bottom tab bar ============ */
.mobile-tab {
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(15,10,22,0.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mobile-tab-row { display:flex; }
.mobile-tab a {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; border-radius:10px;
  font-size:10px; color:var(--text-dim);
  transition:color .15s ease;
}
.mobile-tab a i { font-size:18px; }
.mobile-tab a.active { color:var(--accent-pink); }
.mobile-tab a:hover { color:var(--text); }

/* ============ Mobile breakpoint ============ */
@media (max-width:768px) {
  .app-header { height:54px; padding:0 14px; }
  .app-brand { font-size:14px; }
  .app-brand .logo { width:28px; height:28px; }
  .app-nav { display:none; }            /* 顶部导航交给底部 tab */
  .app-userbar .pill { padding:3px 8px; font-size:10px; }
  .app-main { padding:18px 14px 96px; } /* 底部留 tab bar 空间 */
  .mobile-tab { display:block; }
  .page-title { font-size:20px; }
  .page-subtitle { font-size:13px; margin-bottom:18px; }
  .quota-strip { padding:12px 14px; gap:12px; }
  .quota-num { font-size:18px; }
}
@media (max-width:380px) {
  .app-userbar .pill { display:none; } /* 真小屏只留头像 */
}

/* ============ Avatar ============ */
.avatar {
  width:56px; height:56px; border-radius:50%;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; font-size:20px;
  flex-shrink:0;
}
.avatar-sm { width:32px; height:32px; font-size:13px; }
.avatar-lg { width:96px; height:96px; font-size:32px; }

/* ============ Page heading ============ */
.page-title {
  font-size:24px; font-weight:600; margin:0 0 6px;
}
.page-subtitle {
  color:var(--text-secondary); font-size:14px; margin:0 0 28px;
}

/* ============ Quota bar ============ */
.quota-strip {
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:14px 18px;
  background:var(--accent-grad-soft);
  border:1px solid rgba(244,114,182,0.2);
  border-radius:14px;
  margin-bottom:24px;
}
.quota-item { display:flex; align-items:baseline; gap:6px; }
.quota-num { font-size:22px; font-weight:600; color:#fff; }
.quota-label { font-size:12px; color:var(--text-secondary); }

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.2); }
::-webkit-scrollbar-track { background:transparent; }