/* Social Tycoon — tokens widgets and screens (web/main/tokens). Built on the shared --st-*
   variables every theme sets, so lock cards, chips, the composer part and the wallet take
   each network's look. Themes may restyle any tk-* class. */
:root { --tk-gold: #f5b301; --tk-gold-2: #ffcf4d; --tk-ink: #3b2a00; }

.tk-ic { width: 16px; height: 16px; flex-shrink: 0; }
.tk-ic-lg { width: 22px; height: 22px; }
.tk-glyph { display: inline-flex; color: var(--tk-gold); }
.tk-inline { display: inline-flex; margin: 0; }
.tk-link { color: var(--st-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tk-link:hover { text-decoration: underline; }
.tk-small { font-size: 12px; color: var(--st-muted); margin: 6px 0 0; }
.tk-btn { display: inline-flex; align-items: center; gap: 6px; }
.tk-btn .tk-glyph { color: inherit; }
.st-btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* ---- the lock card ------------------------------------------------------- */
.tk-lock { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center;
  margin: 10px 12px 12px; padding: 14px 16px; border-radius: var(--st-radius-lg); font-family: var(--st-font);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tk-gold) 14%, var(--st-surface)), var(--st-surface-2));
  border: 1px solid color-mix(in srgb, var(--tk-gold) 40%, var(--st-border)); color: var(--st-text); }
.tk-lock-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--tk-gold-2), var(--tk-gold)); color: var(--tk-ink); box-shadow: 0 2px 8px rgba(245,179,1,.35); }
.tk-lock-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-lock-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.tk-lock-sub { font-size: 13px; color: var(--st-muted); line-height: 1.35; }
.tk-lock-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tk-lock-foot { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--st-muted); }
.tk-lock-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--st-muted); font-style: italic; }
.tk-lock-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 380px); margin: 0; z-index: 6;
  background: rgba(20, 20, 24, .78); color: #fff; border-color: rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tk-lock-overlay .tk-lock-sub, .tk-lock-overlay .tk-lock-foot, .tk-lock-overlay .tk-lock-note { color: rgba(255,255,255,.78); }
/* A locked post's placeholder media: blurred and slightly dimmed, whatever theme draws it. */
img[src*="/uploads/tokens/"] { filter: blur(14px) saturate(1.2); transform: scale(1.08); }
*:has(> img[src*="/uploads/tokens/"]) { overflow: hidden; }

/* ---- chips and hints ----------------------------------------------------- */
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 12px; }
.tk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--st-pill); font: 600 12px/1.4 var(--st-font);
  background: var(--st-surface-2); color: var(--st-muted); text-decoration: none; border: 1px solid var(--st-border); }
a.tk-chip:hover { color: var(--st-text); }
.tk-chip-owner { color: color-mix(in srgb, var(--tk-gold) 60%, var(--st-text)); border-color: color-mix(in srgb, var(--tk-gold) 45%, var(--st-border)); }
.tk-chip-ok { color: var(--st-success); }
.tk-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0; font: 13px/1.35 var(--st-font); color: var(--st-muted); }
.tk-hint .tk-ic { color: var(--tk-gold); }
.tk-hint-reward { color: var(--st-text); font-weight: 600; }

/* ---- composer part --------------------------------------------------------- */
.tk-compose { margin: 10px 0; border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-surface); font-family: var(--st-font); color: var(--st-text); }
.tk-compose > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 600; font-size: 14px; }
.tk-compose > summary::-webkit-details-marker { display: none; }
.tk-compose > summary small { margin-left: auto; color: var(--st-muted); font-weight: 500; }
.tk-compose[open] .tk-chev { transform: rotate(180deg); }
.tk-compose-body { padding: 0 12px 12px; }
.li-compose-preview ~ .tk-compose { margin: 10px 24px; } /* LinkedIn's composer has no inner padding; line up with the text */
.tk-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.tk-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--st-border); border-radius: var(--st-radius); cursor: pointer; }
.tk-opt:has(input:checked) { border-color: var(--st-primary); box-shadow: 0 0 0 1px var(--st-primary) inset; }
.tk-opt span { display: flex; flex-direction: column; gap: 2px; }
.tk-opt strong { font-size: 14px; }
.tk-opt small { font-size: 12px; color: var(--st-muted); }
.tk-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; }
.tk-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--st-muted); min-width: 150px; }
.tk-field-wide { flex: 1 1 100%; }
.tk-amount { display: flex; align-items: center; gap: 6px; }
.tk-amount input { max-width: 130px; }
.tk-amount em { font-style: normal; color: var(--st-muted); font-size: 13px; }

/* ---- profile / group boxes ------------------------------------------------- */
.tk-profile { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; font-family: var(--st-font); }
.li-card > .tk-profile { margin: 0; } /* LinkedIn gives the box its own card, which already has padding */
.tk-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: var(--st-radius-lg);
  background: var(--st-surface); color: var(--st-text); flex-wrap: wrap; font-family: var(--st-font); }
.tk-box-on { border-color: color-mix(in srgb, var(--tk-gold) 50%, var(--st-border)); background: color-mix(in srgb, var(--tk-gold) 7%, var(--st-surface)); }
.tk-box-main { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 220px; min-width: 0; }
.tk-box-main > .tk-ic { color: var(--tk-gold); margin-top: 2px; }
.tk-box-main div { display: flex; flex-direction: column; gap: 2px; }
.tk-box-main strong { font-size: 14px; }
.tk-box-main small { font-size: 12.5px; color: var(--st-muted); }
.tk-box-side { display: flex; align-items: center; gap: 8px; }
.tk-group { margin: 12px 0; }
.tk-prices { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.tk-prices li { display: flex; gap: 6px; color: var(--st-muted); }
.tk-prices strong { color: var(--st-text); font-size: 13px; }
.tk-tip > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tk-tip > summary::-webkit-details-marker { display: none; }
.tk-tip-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-surface); }

/* ---- wallet screens ------------------------------------------------------------ */
.tk-page { max-width: 880px; margin: 0 auto; padding: 16px; font-family: var(--st-font); color: var(--st-text); }
.tk-page h1 { font-size: 24px; font-weight: 800; margin: 4px 0 12px; }
.tk-page h2 { font-size: 17px; font-weight: 700; margin: 22px 0 10px; }
.tk-nav { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 16px; padding-bottom: 2px; scrollbar-width: none; }
.tk-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--st-pill); background: var(--st-surface-2); color: var(--st-text);
  text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.tk-nav a.is-active { background: var(--st-primary); color: var(--st-on-primary); }
.tk-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px; color: #1d1600;
  background: radial-gradient(120% 140% at 100% 0%, #fff3c4 0%, var(--tk-gold-2) 35%, var(--tk-gold) 100%); box-shadow: 0 6px 24px rgba(245,179,1,.25); }
.tk-hero small { font-size: 13px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .04em; }
.tk-hero .tk-big { display: flex; align-items: baseline; gap: 10px; font-size: 40px; font-weight: 800; line-height: 1.1; margin: 4px 0; }
.tk-hero .tk-big span { font-size: 16px; font-weight: 700; opacity: .75; }
.tk-hero .tk-big .tk-glyph { color: #1d1600; opacity: .8; }
.tk-hero .tk-big .tk-glyph .tk-ic { width: 30px; height: 30px; }
.tk-hero-row { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: 13.5px; font-weight: 600; }
.tk-hero-row b { font-weight: 800; }
.tk-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tk-hero-actions .st-btn { background: rgba(255,255,255,.85); color: #1d1600; border-color: transparent; }
.tk-hero-actions .st-btn-primary { background: #1d1600; color: #fff; }
.tk-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tk-card { border: 1px solid var(--st-border); border-radius: var(--st-radius-lg); background: var(--st-surface); padding: 14px 16px; }
.tk-card h3 { margin: 0 0 6px; font-size: 15px; }
.tk-card p { margin: 0; font-size: 13.5px; color: var(--st-muted); }
.tk-fees { margin-top: 8px; font-size: 13px; }
.tk-fees summary { cursor: pointer; color: var(--st-accent, #1877f2); }
.tk-fees dl { margin: 6px 0 0; display: grid; gap: 2px; }
.tk-fees dl div { display: flex; justify-content: space-between; gap: 12px; }
.tk-fees dt { color: var(--st-muted); }
.tk-fees dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-stat { font-size: 22px; font-weight: 800; margin: 2px 0; }
.tk-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--st-border); border-radius: var(--st-radius-lg); background: var(--st-surface); overflow: hidden; }
.tk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--st-border); }
.tk-row:first-child { border-top: 0; }
.tk-row-ic { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--st-surface-2); color: var(--st-muted); flex-shrink: 0; }
.tk-row-in .tk-row-ic { color: var(--st-success); }
.tk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-row-main strong { font-size: 14px; }
.tk-row-main small { font-size: 12.5px; color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row-amt { font-weight: 800; font-size: 15px; white-space: nowrap; }
.tk-row-in .tk-row-amt { color: var(--st-success); }
.tk-empty { padding: 28px 16px; text-align: center; color: var(--st-muted); font-size: 14px; }
.tk-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tk-pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border: 1px solid var(--st-border); border-radius: var(--st-radius-lg);
  background: var(--st-surface); cursor: pointer; font: inherit; color: var(--st-text); }
.tk-pack:hover { border-color: var(--st-primary); }
.tk-pack b { font-size: 24px; display: flex; align-items: center; gap: 6px; }
.tk-pack span { font-size: 13px; color: var(--st-muted); }
.tk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--st-border); margin: 0 0 14px; }
.tk-tabs button { border: 0; background: none; padding: 10px 14px; font: 600 14px var(--st-font); color: var(--st-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.tk-tabs button.is-active { color: var(--st-text); border-bottom-color: var(--st-primary); }
.tk-deposit { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.tk-qr { width: 100%; height: auto; border-radius: 12px; background: #fff; border: 1px solid var(--st-border); }
.tk-addr { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px; }
.tk-addr code { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--st-radius); background: var(--st-surface-2); font: 600 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all; color: var(--st-text); }
.tk-steps { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--st-muted); }
.tk-steps li { margin: 3px 0; }
.tk-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--st-pill); font-size: 12px; font-weight: 700; background: var(--st-surface-2); color: var(--st-muted); }
.tk-pill-ok { background: color-mix(in srgb, var(--st-success) 16%, transparent); color: var(--st-success); }
.tk-pill-wait { background: color-mix(in srgb, var(--tk-gold) 20%, transparent); color: color-mix(in srgb, var(--tk-gold) 70%, var(--st-text)); }
.tk-pill-bad { background: color-mix(in srgb, var(--st-danger) 14%, transparent); color: var(--st-danger); }
.tk-form { display: flex; flex-direction: column; gap: 12px; }
.tk-form .tk-field { min-width: 0; }
.tk-switch { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: var(--st-radius); cursor: pointer; }
.tk-switch input { margin-top: 3px; }
.tk-switch span { display: flex; flex-direction: column; gap: 2px; }
.tk-switch small { color: var(--st-muted); font-size: 12.5px; }
.tk-switch .tk-amount { margin-top: 6px; }
.tk-offer { display: flex; gap: 12px; align-items: flex-start; }
.tk-offer-reward { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tk-offer-reward b { font-size: 18px; color: color-mix(in srgb, var(--tk-gold) 65%, var(--st-text)); white-space: nowrap; }
.tk-crit { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tk-crit span { font-size: 11.5px; padding: 2px 8px; border-radius: var(--st-pill); background: var(--st-surface-2); color: var(--st-muted); }
.tk-notice { padding: 12px 14px; border-radius: var(--st-radius); background: var(--st-surface-2); color: var(--st-muted); font-size: 14px; margin: 0 0 14px; display: flex; gap: 8px; align-items: flex-start; }
@media (max-width: 640px) {
  .tk-deposit { grid-template-columns: 1fr; }
  .tk-deposit .tk-qr { max-width: 260px; margin: 0 auto; display: block; }
  .tk-hero .tk-big { font-size: 34px; }
  .tk-lock { margin: 10px 8px; }
}

/* ---- dialogs: membership levels (Join), Super Thanks ---------------------- */
.tk-dialog { border: 0; padding: 0; border-radius: var(--st-radius-lg); background: var(--st-surface); color: var(--st-text);
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); font-family: var(--st-font); }
.tk-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.tk-dialog-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px; }
.tk-dialog-title { flex: 1; margin: 0; font-size: 18px; font-weight: 700; }
.tk-dialog-x { border: 0; background: transparent; color: var(--st-muted); cursor: pointer; padding: 6px; border-radius: 999px; display: inline-flex; }
.tk-dialog-x:hover { background: var(--st-hover, rgba(0, 0, 0, .06)); color: var(--st-text); }
.tk-dialog-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.tk-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tk-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tk-level { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--st-border); border-radius: var(--st-radius); }
.tk-level.is-mine { border-color: color-mix(in srgb, var(--tk-gold) 55%, var(--st-border)); background: color-mix(in srgb, var(--tk-gold) 7%, var(--st-surface)); }
.tk-level-badge { width: 28px; height: 28px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  color: var(--tk-gold); background: color-mix(in srgb, var(--tk-gold) 14%, transparent); object-fit: cover; }
.tk-level-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-level-price { font-size: 13px; color: var(--st-muted); }
.tk-level-perks { font-size: 12.5px; color: var(--st-muted); }
.tk-level-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tk-join-wrap, .tk-thanks-wrap { display: inline-flex; }
.tk-danger { color: var(--st-danger, #c62828); }
.tk-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tk-tier { position: relative; cursor: pointer; }
.tk-tier input { position: absolute; opacity: 0; inset: 0; }
.tk-tier span { display: block; text-align: center; padding: 10px 4px; border-radius: var(--st-radius); font-weight: 700; font-size: 13px;
  border: 2px solid transparent; background: var(--tk-tier, #1e88e5); color: #fff; }
.tk-tier input:checked + span { border-color: var(--st-text); box-shadow: 0 0 0 2px var(--st-surface) inset; }
.tk-tier input:focus-visible + span { outline: 2px solid var(--st-primary); outline-offset: 2px; }
.tk-tier-0 { --tk-tier: #1565c0; } .tk-tier-1 { --tk-tier: #00897b; } .tk-tier-2 { --tk-tier: #f9a825; } .tk-tier-3 { --tk-tier: #e65100; }
.tk-tier-2 span { color: #1b1b1b; }
.tk-member-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: 4px; color: var(--tk-gold); }
.tk-member-badge img { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; }