/* Account / auth / pricing / admin — reuses tokens + .card/.field/.btn/.table. */

/* Auth (login / register) --------------------------------------------------- */
.auth-wrap { max-width: 26rem; margin: var(--space-8) auto; }
.auth-card { padding: var(--space-6); }
.auth-card h1 { font-size: 22px; font-weight: 700; margin: 0 0 var(--space-4); }
.auth-form .field { margin-bottom: var(--space-4); }
.auth-form .btn-block { width: 100%; justify-content: center; }
.auth-sep { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: 13px; margin: var(--space-4) 0; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-alt { text-align: center; margin-top: var(--space-5); font-size: 14px; color: var(--text-secondary); }
.btn-google { width: 100%; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); }
.btn-google:hover { background: var(--neutral-50); }

/* Account -------------------------------------------------------------------- */
.account-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.account-head h1 { font-size: 24px; font-weight: 700; margin: 0; flex: 1 1 auto; }
.plan-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; }
.plan-pill.is-pro { background: var(--blue-600); color: #fff; }
.plan-pill.is-free { background: var(--neutral-100); color: var(--text-secondary); }

/* Pricing -------------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin: var(--space-6) 0; }
.price-card { padding: var(--space-6); display: flex; flex-direction: column; }
.price-card.is-featured { border-color: var(--blue-600); box-shadow: var(--shadow-md); }
.price-card h2 { font-size: 18px; margin: 0 0 var(--space-2); }
.price-amount { font-size: 34px; font-weight: 800; line-height: 1; }
.price-amount small { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.price-features { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; }
.price-features li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; }
.price-features .icon { color: var(--blue-600); flex: none; margin-top: 2px; }
.price-features li.is-off { color: var(--text-muted); }
.price-features li.is-off .icon { color: var(--text-muted); }

/* PromptPay pay box */
.pay-box { max-width: 22rem; margin: var(--space-4) 0; }
.pay-qr { width: 240px; height: 240px; margin: 0 auto; display: block; }
.pay-qr-wrap { text-align: center; padding: var(--space-4); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Admin ---------------------------------------------------------------------- */
.admin-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.admin-nav a { padding: var(--space-3) var(--space-4); font-weight: 600; font-size: 14px; color: var(--text-secondary); border-bottom: 2px solid transparent; }
.admin-nav a.is-active { color: var(--blue-600); border-bottom-color: var(--blue-600); }
.admin-notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--green-50, #ecfdf5); color: var(--green-700, #047857); margin-bottom: var(--space-4); font-size: 14px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.admin-actions form { display: inline-flex; gap: 4px; align-items: center; }
.admin-slip-thumb { max-height: 60px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.setting-row { margin-bottom: var(--space-5); }
.setting-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: var(--space-2); }
.setting-row textarea { width: 100%; min-height: 70px; font-family: var(--font-mono, monospace); font-size: 13px; }
.setting-check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: 14px; }

/* Header account menu */
.acct-menu { position: relative; flex: none; }
.acct-menu-links { display: flex; gap: var(--space-1); align-items: center; }

/* Ad slots */
.ad-slot { margin: var(--space-4) 0; min-height: 0; text-align: center; overflow: hidden; }
.ad-slot:empty { display: none; }
/* CSP-safe demo ad placeholder (for previewing ad placement without a real network) */
.ad-demo {
  display: flex; align-items: center; justify-content: center;
  min-height: 90px; padding: var(--space-4);
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, var(--neutral-50), var(--neutral-50) 10px, var(--neutral-100) 10px, var(--neutral-100) 20px);
  color: var(--text-muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

/* Admin datatable (filters + sortable headers + pager) --------------------- */
.dt-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.dt-toolbar .input, .dt-toolbar .select { height: 38px; }
.dt-toolbar .dt-search { flex: 1 1 16rem; min-width: 12rem; }
.dt-th-sort { color: inherit; font-weight: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.dt-th-sort:hover { color: var(--blue-600); }
.dt-th-sort .dt-arrow { color: var(--blue-600); font-size: 10px; }
.pager-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.pager-count { font-size: 13px; color: var(--text-secondary); }
.pager { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pager-item, .pager-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--radius-md); font-size: 14px; }
.pager-item { border: 1px solid var(--border); color: var(--text-primary); }
.pager-item:hover { background: var(--neutral-50); }
.pager-item.is-active { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.pager-item.is-disabled { color: var(--text-muted); border-color: var(--border); opacity: .5; }
.pager-gap { color: var(--text-muted); }

/* Settings — grouped sections + toggle switches ---------------------------- */
.settings-section { margin-bottom: var(--space-6); }
.settings-section > h2 { font-size: 16px; font-weight: 700; margin: 0 0 var(--space-1); }
.settings-section > .settings-desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--space-4); }
.toggle-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.toggle-row:first-of-type { border-top: none; }
.toggle-row .toggle-text { flex: 1 1 auto; }
.toggle-row .toggle-text strong { display: block; font-size: 14px; }
.toggle-row .toggle-text span { font-size: 13px; color: var(--text-secondary); }
.switch { position: relative; flex: none; width: 44px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--neutral-300, #cbd5e1); border-radius: 999px; transition: background .15s ease; }
.switch .track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .track { background: var(--blue-600); }
.switch input:checked + .track::before { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* ---- Admin analytics (CSP-clean: all spacing via classes, no inline styles) ---- */
.an-range { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.an-range a {
  padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border);
  color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm-size); font-weight: 500;
}
.an-range a:hover { border-color: var(--blue-300); color: var(--blue-700); }
.an-range a.is-active { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.an-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); margin-top: var(--space-6);
}
.an-card > h2 { font-size: 16px; font-weight: 700; margin: 0 0 var(--space-4); }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 820px) { .an-grid { grid-template-columns: 1fr; } }
.an-feed { list-style: none; margin: 0; padding: 0; }
.an-feed li {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm-size);
}
.an-feed li:last-child { border-bottom: 0; }
.an-feed time { color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 92px; }
.an-who { font-weight: 600; color: var(--text-primary); }
.an-guest { color: var(--text-muted); font-style: italic; }
.an-tool { color: var(--text-secondary); }
.an-empty { color: var(--text-muted); padding: var(--space-4) 0; }
.an-userhead {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: baseline;
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4);
}
.an-userhead .an-name { font-size: 18px; font-weight: 800; }

/* Managed self-hosted ad banner */
.ad-managed { display: block; }
.ad-managed img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: var(--radius-md); }

/* Banner previews in the admin ad manager */
.ad-preview { display: block; max-width: 320px; width: 100%; height: auto; margin-top: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); }
.ad-thumb { width: 56px; height: 32px; object-fit: cover; flex: none; border-radius: var(--radius-sm); background: var(--surface-sunken); }

/* Multi-select (ad targeting: pick several categories/tools at once) */
.select-multi { height: auto; min-height: 240px; padding: var(--space-2); background-image: none; line-height: 1.8; }
.select-multi optgroup { font-weight: 700; color: var(--text-muted); }
.select-multi option { padding: 3px 6px; border-radius: var(--radius-xs); }