/* OpenVibe.Tips — page styles. Colours follow the shared theme variables (theme-loader.js). */
:root {
  --tips-bg: var(--bg-primary, #0a0f1c);
  --tips-card: var(--bg-secondary, #121a2b);
  --tips-text: var(--text-primary, #e6edf7);
  --tips-muted: var(--text-secondary, #9aa7bd);
  --tips-accent: var(--accent, #3b82f6);
  --tips-on-accent: var(--on-accent, #ffffff);
  --tips-border: var(--border, rgba(255, 255, 255, .1));
  --tips-bad: #f87171;
  --tips-good: #34d399;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--tips-bg); color: var(--tips-text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--tips-accent); }
.site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 20px; border-bottom: 1px solid var(--tips-border); }
.ov-has-navbar .site-head { display: none; }
.site-head .brand { font-weight: 700; color: inherit; text-decoration: none; }
.site-head nav { display: flex; gap: 14px; flex: 1; }
.site-head nav a { color: var(--tips-muted); text-decoration: none; }
.site-head nav a[aria-current] { color: var(--tips-text); }
.page { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.8rem; margin: .2em 0 .5em; }
.hero p { font-size: 1.1rem; color: var(--tips-muted); }
.card { background: var(--tips-card); border: 1px solid var(--tips-border); border-radius: 12px; padding: 18px 20px; margin: 18px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.grid .card { margin: 0; }
.btn { display: inline-block; background: var(--tips-accent); color: var(--tips-on-accent); border: 0; border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--tips-accent); border: 1px solid var(--tips-accent); }
form label { display: block; margin: 10px 0; }
form input[type=text], form input[type=number], form input[type=url], form textarea, form select, input.copy {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--tips-border);
  background: var(--tips-bg); color: var(--tips-text); font: inherit; }
form input[type=checkbox], form input[type=radio] { margin-right: 6px; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 4px 8px 12px 0; }
form.inline label { margin: 0; }
fieldset { border: 1px solid var(--tips-border); border-radius: 8px; margin: 12px 0; }
small, .fine, .meta { color: var(--tips-muted); }
.fine { font-size: .9rem; }
.notice { background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .4); border-radius: 8px; padding: 10px 14px; }
.notice.error { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .5); }
.creator-head { display: flex; gap: 18px; align-items: center; }
.creator-head .avatar { border-radius: 50%; object-fit: cover; }
.headline { color: var(--tips-muted); margin: 0; }
.goal { margin: 12px 0; }
.goal h3 { margin: 0 0 4px; font-size: 1.05rem; }
.bar { height: 12px; border-radius: 6px; background: var(--tips-border); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--tips-accent); }
.goal.reached .bar span { background: var(--tips-good); }
table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th, table.list td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--tips-border); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
tr.test td, tr.revoked td { color: var(--tips-muted); }
dl.receipt { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
dl.receipt dt { color: var(--tips-muted); }
dl.receipt dd { margin: 0; overflow-wrap: anywhere; }
.big { font-size: 1.8rem; font-weight: 700; margin: 0; }
.creators { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.creators a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: var(--tips-card); text-decoration: none; color: inherit; }
.creators img { border-radius: 50%; }
.steps li { margin: 8px 0; }
.js .tip-form .when-tts, .js .tip-form .when-media, .js .tip-form .when-sound { display: none; }
.js .tip-form[data-kind=tts] .when-tts, .js .tip-form[data-kind=media_request] .when-media, .js .tip-form[data-kind=sound] .when-sound { display: block; }
.sounds .sound-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sounds audio { height: 32px; max-width: 100%; }
.support-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.support-form { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.support-form button { justify-self: start; }
.js .tip-form:not([data-kind=tip]) .when-tip { display: none; }
ol.leaderboard { padding-left: 1.6em; }
ol.leaderboard li, ul.supporters li { margin: 4px 0; }
ul.supporters { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .92rem; }
ul.wall { list-style: none; padding: 0; }
ul.wall li { border-bottom: 1px solid var(--tips-border); padding: 8px 0; }
ul.wall p { margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { dl.receipt { grid-template-columns: 1fr; } .creator-head { flex-direction: column; align-items: flex-start; } table.list { font-size: .85rem; } }
.pill { display: inline-block; font-size: .8rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--tips-border); color: var(--tips-muted); margin-left: 6px; }
nav.tabs { display: flex; gap: 14px; margin: 12px 0; }
nav.tabs a[aria-current] { font-weight: 700; text-decoration: none; color: var(--tips-text); }
ul.mod-list, ul.plain { list-style: none; padding: 0; }
.mod-item { border-bottom: 1px solid var(--tips-border); padding: 10px 0; }
.mod-item.hidden .msg, .mod-item.test { color: var(--tips-muted); }
.mod-item.held { border-left: 3px solid var(--tips-bad); padding-left: 10px; }
.mod-item .msg { margin: 6px 0; overflow-wrap: anywhere; }

/* The home's kit sections (openvibe-shared/showcase) sit in this page's 880 px column, which already has its gutter. */
.page .sc-hero, .page .sc-sec { padding-left: 0; padding-right: 0; }
.page .sc-hero { padding-top: 8px; }
.page .sc-sec { margin-top: 44px; }
.page #creators .creators { margin-top: 12px; }
.page .sc-tiers { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (min-width: 640px) { .page .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page .sc-price { font-size: 24px; }
/* The front page (pages.home): 1080 px, live channels and creators as cards, service chips, questions. */
.page.page-wide { max-width: 1080px; }
.page.page-wide .sc-cta { padding-left: 0; padding-right: 0; }
@media (min-width: 900px) { .page.page-wide .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tp-sec { margin-top: 44px; }
.tp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.tp-head h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -.01em; }
.tp-more { font-weight: 600; font-size: .95rem; text-decoration: none; }
.tp-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp-lede { margin: 4px 0 14px; color: var(--tips-muted); }
.tp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.tp-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--tips-border); background: var(--tips-card); overflow-wrap: anywhere; }
.tp-card p { margin: 0; }
.tp-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-card-top img { border-radius: 50%; object-fit: cover; }
.tp-live { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--danger, #dc2626); color: var(--on-accent, #fff); }
.tp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--tips-border); background: var(--tips-card); font-size: .92rem; }
.tp-faq { display: grid; gap: 8px; }
.tp-faq details { border: 1px solid var(--tips-border); border-radius: 12px; background: var(--tips-card); padding: 0 16px; }
.tp-faq summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
.tp-faq p { margin: 0 0 14px; color: var(--tips-muted); }
@media (max-width: 600px) { .tp-cards > li:nth-child(n+5) { display: none; } }