/* preem.meme styles. Olive-black ground, cream ink, one lime accent that reads on a phone.
   Design language from the curveside canvas (todo/, Sep 2026): pills, 28px cards,
   hairlines between rows, Bricolage Grotesque for display, Figtree for text. */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/figtree-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #0c0d08;
    --surface: #131409;
    --surface-2: #1a1b12;
    --panel: #0f1009;
    --text: #f9f4ed;
    --muted: rgba(249, 244, 237, 0.62);
    --dim: rgba(249, 244, 237, 0.45);
    --line: rgba(249, 244, 237, 0.1);
    --line-soft: rgba(249, 244, 237, 0.07);
    --line-strong: rgba(249, 244, 237, 0.18);
    --accent: #c6ff3d;
    --accent-soft: #d9ff7a;
    --accent-ink: #17200a;
    --accent-tint: #1d2610;
    --accent-tint-line: rgba(198, 255, 61, 0.3);
    --accent-text: #eaffc0;
    --clay: #ff9464;
    --clay-ink: #2a1206;
    --error: var(--clay);
    --success: var(--accent);
    --cream: #f5ead8;
    --cream-2: #ebddc5;
    --cream-ink: #201e1d;
    --cream-muted: #645c50;
    --cream-line: rgba(32, 30, 29, 0.14);
    --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --r-pill: 999px;
    --r-tile: 16px;
    --r-card: 28px;
    --r-sheet: 38px;
    --fs: 15px;
    --fs-s: 13px;
    --fs-label: 12px;
    --fs-h: 20px;
    --page: 1180px;
    --gutter: 16px;
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: var(--fs);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; flex-direction: column; /* short pages: the footer still sits at the bottom */
}
/* Depth: a faint lime glow from the bottom right, over a ground that darkens toward the top left,
   away from the light. A fixed layer, so the light stays put while the page scrolls (iOS ignores
   background-attachment: fixed). */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 55% at 85% 110%, rgba(198, 255, 61, 0.075), transparent 70%),
        linear-gradient(to bottom right, #080905 0%, var(--bg) 50%, #10110b 100%);
}
main.page { flex: 1 0 auto; width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; }
::selection { background: rgba(198, 255, 61, 0.3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }

/* Header */
.top {
    position: sticky; top: 0; z-index: 10;
    background: rgba(12, 13, 8, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
}
.top-inner {
    max-width: var(--page); margin: 0 auto; padding: 0.8rem var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.logo { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: block; }
.wordmark { white-space: nowrap; }
/* A sine wave of lime travelling through the letters: same cycle per letter, each a quarter
   second behind the one before, so the crest travels left to right; the delays stay negative so every
   letter is mid-cycle from the first frame. The dot keeps half brightness through opacity. */
.wordmark .l { display: inline-block; animation: wordwave 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: calc((var(--i) - 9) * 0.25s); }
.brand-dot { opacity: 0.5; }
@keyframes wordwave { 0%, 100% { color: var(--text); } 50% { color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .wordmark .l { animation: none; } .brand-dot { color: rgba(249, 244, 237, 0.5); opacity: 1; } }
.top-nav { display: flex; align-items: center; gap: 1.25rem; }
.top-link { color: var(--muted); font-size: 14px; font-weight: 600; }
.top-link:hover { color: var(--text); text-decoration: none; }
@media (max-width: 480px) { .top-link.optional { display: none; } .top-nav { gap: 0.9rem; } }

.page { max-width: var(--page); margin: 0 auto; padding: 1rem var(--gutter) 3rem; }
.page.narrow { max-width: 780px; }

/* Titles */
.page-title { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.01em; }
.page-subtitle { color: var(--muted); margin-top: 0.5rem; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.section-title { font-size: var(--fs-label); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; margin: 1.5rem 0 0.75rem; }
@media (min-width: 720px) { .page-title { font-size: 34px; } }

/* Hero */
.hero { padding: 2rem 0 1.5rem; }
.hero-title { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; max-width: 640px; text-wrap: pretty; }
.hero .btn { margin-top: 1.25rem; }
@media (min-width: 720px) { .hero { padding: 2.75rem 0 2rem; } .hero-title { font-size: 38px; } }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem; margin-bottom: 1rem; }
.card-title { font-size: var(--fs-h); font-weight: 700; margin-bottom: 0.5rem; }
.card-subtitle { color: var(--muted); margin-bottom: 1.25rem; }
@media (min-width: 720px) { .card { padding: 1.5rem; } }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.4rem; font: inherit; font-weight: 700; font-size: 14px; line-height: 1.2;
    border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-soft); }
.btn-primary:disabled { background: rgba(198, 255, 61, 0.35); color: rgba(23, 32, 10, 0.7); cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { background: rgba(249, 244, 237, 0.07); }
.btn-small { padding: 0.5rem 1rem; font-size: var(--fs-s); }
.btn-large { padding: 0.95rem 1.75rem; font-size: 15px; }
.btn-full { width: 100%; }

.spinner { width: 18px; height: 18px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Form */
.field { margin-bottom: 1.1rem; }
.label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.label .required { color: var(--accent); }
.help { font-size: var(--fs-s); color: var(--muted); margin-top: 0.4rem; }
.fine { font-size: var(--fs-s); color: var(--muted); margin-top: 1.25rem; }
.input, .textarea {
    width: 100%; padding: 0.8rem 1.1rem; font: inherit; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); outline: none;
    transition: border-color 0.15s;
}
.input:hover, .textarea:hover { border-color: rgba(249, 244, 237, 0.3); }
.input:focus, .textarea:focus { border-color: var(--accent); outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.input.is-invalid, .textarea.is-invalid { border-color: var(--clay); }
.textarea { min-height: 96px; resize: vertical; border-radius: var(--r-card); padding: 0.9rem 1.2rem; }
.row { display: flex; gap: 1rem; }
.row .field { flex: 1; }
@media (max-width: 480px) { .row { flex-direction: column; gap: 0; } }
.input-suffix { position: relative; }
.input-suffix span { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input-suffix .input { padding-right: 3.5rem; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Links on /create: one tab per network in the field label's style; the open one is in accent,
   a tab whose field holds a value stays in text colour */
.social-tabs { display: flex; gap: 0.25rem; margin: -1rem 0 -0.5rem -0.5rem; overflow-x: auto; scrollbar-width: none; }
.social-tabs::-webkit-scrollbar { display: none; }
/* 44px tap targets, text centred; the row starts half a tab's padding left so the first word lines up with the field */
.social-tab {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.5rem;
    background: none; border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted); white-space: nowrap; transition: color 0.15s;
}
.social-tab:hover { color: var(--text); }
.social-tab.filled { color: var(--text); }
.social-tab.active { color: var(--accent); }

/* Short link on /create: a checkbox, then the host as a fixed prefix inside the pill */
.check { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 600; }
.check input {
    appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
    border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface-2); transition: background 0.15s, border-color 0.15s;
}
.check input:hover { border-color: rgba(249, 244, 237, 0.3); }
.check input:checked {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%2317200a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.check-price { color: var(--muted); font-weight: 400; }
/* Curve picker on /create: one small card per launch tier, all in one row, the home blocks in
   miniature; the chosen card has the accent border, the radio behind it stays for the script */
.tiers .section-label { display: block; margin-bottom: 0.5rem; }
.tier-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; }
.tier {
    position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); transition: background 0.15s, border-color 0.15s;
}
.tier:hover { background: var(--surface-2); }
.tier.active { border-color: var(--accent); }
.tier:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tier input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.tier-name { font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.15; letter-spacing: -0.01em; }   /* "Short curve" on one line in a 114px phone card */
.tier-meta { font-size: var(--fs-s); color: var(--muted); }
@media (min-width: 720px) { .tier-cards { gap: 0.75rem; } .tier { padding: 1rem; } .tier-name { font-size: 17px; } }
.slug-box { margin-top: 0.75rem; }
.input-prefix {
    display: flex; align-items: center; padding: 0 1.1rem;
    background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); transition: border-color 0.15s;
}
.input-prefix:hover { border-color: rgba(249, 244, 237, 0.3); }
.input-prefix:focus-within { border-color: var(--accent); }
.input-prefix:has(.is-invalid) { border-color: var(--clay); }
.input-prefix span { color: var(--muted); white-space: nowrap; }
.input-prefix .input, .input-prefix .input:hover, .input-prefix .input:focus { flex: 1; min-width: 0; padding: 0.8rem 0; background: transparent; border: none; border-radius: 0; }
.input-prefix .slug-status { margin-left: 0.75rem; font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.input-prefix .slug-status:empty { display: none; }
.input-prefix .slug-status.ok { color: var(--accent); }
.input-prefix .slug-status.taken { color: var(--clay); }

/* Image picker: a square that becomes the preview */
.file-input { display: none; }
.image-drop {
    width: 168px; height: 168px; border-radius: var(--r-card); border: 1.5px dashed rgba(249, 244, 237, 0.22);
    background: repeating-linear-gradient(135deg, rgba(249, 244, 237, 0.06) 0 5px, transparent 5px 11px);
    color: var(--muted); font: inherit; font-size: var(--fs-s); cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; position: relative;
}
.image-drop:hover { border-color: var(--accent); }
.image-drop.has-image { border-style: solid; border-color: var(--line); background: var(--surface-2); }
.image-drop.has-image #imageHint { display: none; }
.image-drop.is-dragover { border-color: var(--accent); }
.image-drop > * { pointer-events: none; }  /* drag events stay on the box, no dragleave flicker over the preview */
.image-preview { display: none; width: 100%; height: 100%; object-fit: cover; }
.image-drop.has-image .image-preview { display: block; }
.image-drop small { display: block; font-size: 12px; margin-top: 0.25rem; color: var(--dim); }

/* Create page: form left, preview and cost right on desktop */
.create-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.create-form { padding: 0.5rem 0 0; }
.create-form .page-subtitle { margin-bottom: 1.75rem; }
.create-side { display: flex; flex-direction: column; gap: 1rem; }
.preview { display: none; }
.preview-head { display: flex; align-items: center; gap: 0.9rem; }
.preview-image { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: repeating-linear-gradient(135deg, rgba(249, 244, 237, 0.15) 0 4px, rgba(249, 244, 237, 0.05) 4px 9px); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--muted); }
.preview-name { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.1; }
.preview-line { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: var(--fs-s); color: var(--dim); }
.preview-desc { margin-top: 1rem; color: var(--muted); font-size: var(--fs-s); white-space: pre-wrap; word-break: break-word; min-height: 1.5em; }
.preview-curve { margin-top: 1.25rem; }
.cost .section-label { margin-bottom: 0.75rem; }
.cost-rows { display: flex; flex-direction: column; }
.cost-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-s); color: var(--muted); }
.cost-row span:last-child { color: var(--text); font-weight: 600; }
.cost-row.total { border-bottom: none; font-size: var(--fs); color: var(--text); font-weight: 700; padding-top: 0.9rem; }
.cost-row.total span:last-child { font-family: var(--display); font-weight: 800; font-size: 18px; }
.cost .fine { margin-top: 0.75rem; }
.cost .base { font-size: var(--fs-s); color: var(--muted); margin-top: 0.75rem; min-height: 1.2em; }
/* Wallet line (create, coin and admin pages): address and balance, a refresh icon, the connected
   wallet on the right; before a wallet connects, the page's own idle text and Connect button. The
   height is reserved so the buttons below do not move when a wallet connects. */
.wallet-line { display: flex; align-items: center; gap: 0.25rem; min-height: 34px; font-size: var(--fs-s); color: var(--muted); }
.wallet-idle { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wallet-idle .btn-small { padding: 0.35rem 0.8rem; }
.cost .wallet-line { min-height: 34px; }
.wallet-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .wallet-word { display: none; } }
.icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--text); background: rgba(249, 244, 237, 0.07); }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn.is-busy svg { animation: spin 0.8s linear infinite; }
.wallet-switch { flex: none; margin-left: auto; gap: 0.4rem; padding: 0.4rem 0.85rem; }
.wallet-switch:disabled { border-color: transparent; background: transparent; cursor: default; padding-right: 0; }
.wallet-glyph { display: inline-flex; width: 14px; height: 14px; }
.wallet-glyph svg { width: 100%; height: 100%; }
.cost .btn-large { width: 100%; margin-top: 1rem; }
@media (min-width: 960px) {
    .create-grid { grid-template-columns: 1.3fr 1fr; gap: 3rem; }
    .create-side { position: sticky; top: 5rem; }
    .preview { display: block; }
}

/* Status */
.status { margin-top: 1rem; padding: 0.8rem 1.1rem; border-radius: var(--r-tile); display: none; font-size: var(--fs-s); }
.status.is-visible { display: block; }
.status-info { background: var(--accent-tint); color: var(--accent-text); border: 1px solid var(--accent-tint-line); }
.status-error { background: rgba(255, 148, 100, 0.1); color: var(--clay); border: 1px solid rgba(255, 148, 100, 0.3); }
.progress-steps { display: flex; flex-direction: column; gap: 0.4rem; }
.progress-step { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); }
.progress-step.active { color: var(--accent); }
.progress-step.done { color: var(--accent-text); }
.step-icon { width: 20px; text-align: center; }
.progress-hint { display: none; margin-top: 0.5rem; padding-left: calc(20px + 0.75rem); font-size: var(--fs-s); color: var(--muted); }
.progress-hint.visible { display: block; }

/* Mobile banner on /create when no wallet is injected */
.banner { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner p { color: var(--muted); flex: 1 1 14rem; }

/* Wallet modal and tiles */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(12, 13, 8, 0.72); display: flex; align-items: flex-end; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sheet); padding: 1.5rem; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); }
@media (min-width: 600px) { .modal { align-items: center; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.modal-head h2 { font-family: var(--display); font-weight: 800; font-size: 22px; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; }
.connect-hint { color: var(--muted); margin-bottom: 1rem; }
.wallet-options { margin-top: 1rem; }
.wallet-options-title { color: var(--muted); margin-bottom: 0.75rem; font-size: var(--fs-s); }
.wallet-option-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wallet-option {
    position: relative; min-width: 0; aspect-ratio: 1 / 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.5rem; border-radius: var(--r-card); background: rgba(249, 244, 237, 0.05); border: 1px solid var(--line);
    color: var(--text); font: inherit; text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.wallet-option:hover { background: rgba(249, 244, 237, 0.1); text-decoration: none; }
.wallet-option-icon { width: 42%; aspect-ratio: 1 / 1; height: auto; border-radius: 14%; object-fit: contain; }
.wallet-option-name { font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
.wallet-option.is-available { border-color: var(--accent); }
.wallet-option.is-available::after {
    content: "\2713"; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; line-height: 22px; text-align: center;
}
.section-hidden { display: none !important; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* Tags and progress bars */
.tag { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: rgba(249, 244, 237, 0.09); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.tag-accent { background: #26330a; color: var(--accent-text); }
/* The fill is never narrower than the bar is tall: a small raise shows as a circle, not a clipped sliver */
.progress { --bar-h: 8px; height: var(--bar-h); border-radius: var(--r-pill); background: rgba(249, 244, 237, 0.09); overflow: hidden; }
.progress.big { --bar-h: 12px; background: rgba(234, 255, 192, 0.16); }
.progress-bar { height: 100%; min-width: var(--bar-h); background: var(--accent); border-radius: inherit; transition: width 0.4s; }
.progress-bar.is-empty { min-width: 0; }
.progress.big .progress-bar { background: linear-gradient(90deg, #9ede2e, var(--accent-soft)); }

/* Feed: tabs, search, live dot */
.feed-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1.25rem 0 0.75rem; }
.feed-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.feed-tabs::-webkit-scrollbar { display: none; }
.feed-tab { padding: 0.45rem 0.9rem; border-radius: var(--r-pill); color: var(--muted); font-weight: 600; font-size: var(--fs-s); white-space: nowrap; }
.feed-tab:hover { text-decoration: none; color: var(--text); }
.feed-tab.active { color: var(--cream-ink); background: var(--text); }
.feed-search { flex: 1 1 12rem; max-width: 20rem; }
.feed-search .input { padding: 0.5rem 1rem; font-size: var(--fs-s); }
.feed-right { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; justify-content: flex-end; }
.live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-label); font-weight: 600; color: var(--dim); white-space: nowrap; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.live.on { color: var(--muted); }
.live.on::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(198, 255, 61, 0.18); }
.empty { color: var(--muted); padding: 1.25rem 0; }
.feed.empty { text-align: center; color: var(--muted); padding: 2rem 0; }

/* Home: one block per launch option, two columns from 720px */
.options { margin: 0.5rem 0 2rem; }
.option-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.option {
    position: relative; display: flex; flex-direction: column; gap: 0.5rem; min-height: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem; color: var(--text); transition: background 0.15s;
}
.option:hover { background: var(--surface-2); text-decoration: none; }
.option-name { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; }
/* The illustration under a heading: a grey line drawing on black. Where masks work it is painted in the
   text colour, the drawing's luminance as the mask, so it sits in the site's palette; otherwise the image
   itself shows. Either way lighten blending sinks the near-black ground (and its grain) into the block */
.option-art { display: block; width: 100%; mix-blend-mode: lighten; }
.option-art img { display: block; width: 100%; height: auto; }
@supports (mask-mode: luminance) {
    .option-art {
        aspect-ratio: 2.5; background: var(--text);
        -webkit-mask-image: var(--art); mask-image: var(--art); -webkit-mask-size: contain; mask-size: contain;
        -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-mode: luminance;
    }
    .option-art img { display: none; }
    .option.featured .option-art { background: var(--cream-ink); mix-blend-mode: normal; }   /* ink on cream: lighten would erase it */
}
.option-desc { flex: 1 1 auto; }
.option-price { color: var(--muted); margin-top: 0.25rem; padding-right: 3rem; }
/* A curve block's corner tag: the curve glyph and the SOL it graduates at, level with the heading */
.option-tag { position: absolute; right: 1.25rem; top: 1.25rem; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 24px; font-size: 14px; font-weight: 700; color: var(--text); }
.option-name { padding-right: 5.5rem; }
/* The go mark in the corner says the block is a button; it brightens with the primary button's hover */
.option-go {
    position: absolute; right: 1.25rem; bottom: 1.25rem; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); transition: background 0.15s;
}
.option:hover .option-go { background: var(--accent-soft); }
/* The arrange.exchange cell: no tile, just its banner, the banner's black ground sunk into the page by
   lighten; a 5:4 box while the blocks stack, the row's height side by side */
.option.option-ad { padding: 0; overflow: hidden; aspect-ratio: 5 / 4; background: transparent; border-color: transparent; }   /* later than .option:hover, so no hover tint */
.option.option-ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; opacity: 0.9; transition: opacity 0.15s, transform 0.15s; }
.option.option-ad:hover img { opacity: 1; transform: scale(1.02); }
@media (min-width: 720px) { .option.option-ad { aspect-ratio: auto; } }
/* The all-in block wears the graduated card's cream sheet: the one to notice */
.option.featured { background: var(--cream); color: var(--cream-ink); border-color: transparent; border-radius: var(--r-sheet); box-shadow: var(--shadow-lg); }
.option.featured:hover { background: var(--cream-2); }
.option.featured .option-price { color: var(--cream-muted); }
@media (min-width: 720px) { .option-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .option { padding: 1.5rem; } .option-go { right: 1.5rem; bottom: 1.5rem; } .option-tag { right: 1.5rem; top: 1.5rem; } }

/* Feed rows: cards on a phone, hairline rows from 720px */
.feed-cols { display: none; }
.cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.launch-card {
    display: grid; grid-template-columns: 48px 1fr; grid-template-areas: "img body" "curve curve" "nums nums";
    gap: 0.6rem 0.9rem; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1rem 1.1rem; color: var(--text); transition: background 0.15s;
}
.launch-card:hover { background: var(--surface-2); text-decoration: none; }
.card-image { grid-area: img; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.card-image.placeholder, .token-image.placeholder, .preview-image.placeholder { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--muted); background: repeating-linear-gradient(135deg, rgba(249, 244, 237, 0.14) 0 4px, rgba(249, 244, 237, 0.05) 4px 9px); }
.card-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.card-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.card-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card-symbol { color: var(--muted); font-weight: 600; font-size: 11px; padding: 0.15rem 0.5rem; border-radius: var(--r-pill); background: rgba(249, 244, 237, 0.09); }
.card-meta { display: flex; gap: 0.6rem; font-size: var(--fs-s); color: var(--dim); flex-wrap: wrap; }
.card-curve { grid-area: curve; display: flex; align-items: center; gap: 0.75rem; }
.card-curve .progress { flex: 1; }
.card-pct { font-size: var(--fs-label); font-weight: 600; color: var(--muted); width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.card-nums { grid-area: nums; display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.card-nums .cell-label { color: var(--dim); margin-right: 0.35rem; }
.card-nums .cell-value { color: var(--text); font-weight: 600; }
.launch-card.big { border-color: rgba(198, 255, 61, 0.35); }
@media (min-width: 720px) {
    .feed-cols, .launch-card {
        display: grid; grid-template-columns: 40px minmax(0, 2.2fr) 1fr 1.6fr 1fr; grid-template-areas: none; gap: 1rem; align-items: center;
    }
    .feed-cols { padding: 0 0 0.5rem; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
    .feed-cols span:nth-child(3), .feed-cols span:nth-child(5) { text-align: right; }
    .feed-cols span:nth-child(4) { padding-left: 1.5rem; }
    .cards { gap: 0; }
    .cards .launch-card { background: transparent; border: none; border-top: 1px solid var(--line); border-radius: 0; padding: 0.9rem 0; }
    .cards .launch-card:hover { background: rgba(249, 244, 237, 0.03); }
    .launch-card > * { grid-area: auto; }
    .card-image { width: 40px; height: 40px; }
    .card-curve { padding-left: 1.5rem; }
    .card-nums { display: contents; }
    .card-nums .cell-label { display: none; }
    .card-nums .card-mcap, .card-nums .card-raised { text-align: right; font-size: var(--fs-s); }
    .card-nums .card-mcap { grid-column: 3; grid-row: 1; }
    .card-curve { grid-column: 4; grid-row: 1; }
    .card-nums .card-raised { grid-column: 5; grid-row: 1; }
    .featured .launch-card { display: grid; grid-template-columns: 56px minmax(0, 2.2fr) 1fr 1.6fr 1fr; background: var(--surface); border: 1px solid rgba(198, 255, 61, 0.35); border-radius: var(--r-card); padding: 1.1rem 1.4rem; }
    .featured .card-image { width: 56px; height: 56px; }
}

/* Token page: one column, two from 960px */
.token-grid { display: flex; flex-direction: column; }
.token-main, .token-side { display: contents; }
.token { order: 1; } .curve-banner { order: 2; } .graduated { order: 3; } .trade { order: 4; margin-top: 1.25rem; } .share { order: 5; } .chart-card { order: 6; } .token-about { order: 7; } .lists { order: 8; }
@media (min-width: 960px) {
    .token-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 2.5rem; align-items: start; }
    .token-main { display: block; min-width: 0; }
    .token-side { display: block; min-width: 0; position: sticky; top: 5rem; }
    .trade { margin-top: 0; }
}
.token { padding: 1rem 0 0.5rem; }
.token-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.token-image { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface-2); font-size: 15px; }
.token-id { flex: 1 1 14rem; min-width: 0; }
.token-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.token-name { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; word-break: break-word; }
.token-symbol { padding: 0.25rem 0.7rem; border-radius: var(--r-pill); background: rgba(249, 244, 237, 0.1); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.token-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; color: var(--dim); font-size: var(--fs-s); margin-top: 0.5rem; }
.token-meta a { color: var(--muted); }
.socials { display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; }
.token-link { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; min-width: 0; }
.token-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-s); }
.token-link .btn { flex: none; padding: 0.25rem 0.8rem; }
.social { font-size: var(--fs-s); font-weight: 600; }
.token-price { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.5rem; }
.price-value { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.price-value small { font-family: var(--font); font-weight: 600; font-size: var(--fs-s); color: var(--muted); margin-left: 0.3rem; }
.price-mcap { font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.price-mcap strong { color: var(--text); }
sub { font-size: 0.6em; line-height: 0; vertical-align: baseline; position: relative; top: 0.3em; }
@media (min-width: 720px) {
    .token-name { font-size: 30px; }
    .token-price { flex: 0 0 auto; flex-direction: column; align-items: flex-end; margin-top: 0; margin-left: auto; text-align: right; }
    .price-value { font-size: 32px; }
}

/* Curve banner (accent tint) and the graduation card (cream) */
.curve-banner { margin-top: 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid var(--accent-tint-line); border-radius: var(--r-card); background: var(--accent-tint); }
.banner-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.banner-title { font-weight: 700; font-size: var(--fs-s); color: var(--accent-text); }
.banner-numbers { font-size: var(--fs-label); font-weight: 600; color: rgba(234, 255, 192, 0.75); font-variant-numeric: tabular-nums; }
.curve-banner .progress.big { margin-top: 0.85rem; }
.banner-note { margin-top: 0.85rem; font-size: var(--fs-s); color: rgba(234, 255, 192, 0.8); }
.banner-row.small { font-size: var(--fs-label); color: var(--muted); font-weight: 600; margin-bottom: 0.5rem; }

.graduated { margin-top: 1.25rem; padding: 1.75rem 1.6rem; border-radius: var(--r-sheet); background: var(--cream); color: var(--cream-ink); box-shadow: var(--shadow-lg); }
.graduated-head { display: flex; align-items: center; gap: 0.7rem; }
.graduated-head .logo { width: 46px; height: 46px; }
.graduated-tag { padding: 0.3rem 0.75rem; border-radius: var(--r-pill); background: var(--accent-text); color: #2c3d06; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.graduated h2 { font-family: var(--display); font-weight: 800; font-size: 28px; margin-top: 1.25rem; letter-spacing: -0.01em; }
.graduated p { color: #474238; margin-top: 0.75rem; }
.graduated-rows { margin-top: 1.25rem; }
.graduated-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--cream-line); font-size: var(--fs-s); color: var(--cream-muted); }
.graduated-row:last-child { border-bottom: none; }
.graduated-row span:last-child { color: var(--cream-ink); font-weight: 700; }
.graduated .share-row { margin-top: 1.25rem; }
.graduated .btn-secondary { color: var(--cream-ink); border-color: rgba(32, 30, 29, 0.25); }
.graduated .btn-secondary:hover { background: rgba(32, 30, 29, 0.06); }

/* Chart */
.chart-card { margin-top: 1.25rem; padding: 1.25rem 1.25rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chart-head .card-title { font-size: var(--fs-s); font-weight: 700; margin: 0; }
.chart-tfs { display: flex; gap: 0.25rem; }
.chart-tf { padding: 0.35rem 0.7rem; font: inherit; font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill); border: none; background: transparent; color: var(--dim); cursor: pointer; }
.chart-tf:hover { color: var(--text); }
.chart-tf.active { color: var(--text); background: rgba(249, 244, 237, 0.1); }
.chart { height: 260px; margin-top: 0.75rem; border-radius: var(--r-tile); overflow: hidden; }
.chart:empty { height: 0; margin-top: 0; }
.chart-card .empty { padding: 0.75rem 0 0.25rem; font-size: var(--fs-s); }

/* Description, links */
.token-about { margin-top: 1.5rem; }
.token-description { white-space: pre-wrap; word-break: break-word; color: var(--muted); }
.token-links { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1.25rem; font-size: var(--fs-s); }
.mint-address { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dim); word-break: break-all; }

/* Trades and holders as underline tabs */
.lists { margin-top: 2rem; }
.list-tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 0.25rem; }
.list-tab { padding: 0.5rem 0 0.7rem; margin-bottom: -1px; font: inherit; font-size: var(--fs-s); font-weight: 700; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.list-tab:hover { color: var(--text); }
.list-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.table-wrap { overflow-x: auto; }
.trades { width: 100%; border-collapse: collapse; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.trades th { text-align: left; color: var(--dim); font-weight: 600; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.7rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.trades td { padding: 0.65rem 0.5rem 0.65rem 0; border-bottom: 1px solid var(--line-soft); white-space: nowrap; color: var(--muted); }
.trades td.buy { color: var(--accent); font-weight: 700; }
.trades td.sell { color: var(--clay); font-weight: 700; }
.trades a { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.trades tr.new { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: rgba(198, 255, 61, 0.18); } to { background: transparent; } }
.holders { list-style: none; display: flex; flex-direction: column; font-size: var(--fs-s); }
.holders li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-variant-numeric: tabular-nums; }
.holders a { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.holders .tag { margin-left: 0.4rem; }

/* Trade panel */
.trade { padding: 1.25rem; }
.trade-tabs { display: flex; margin: -0.25rem 0 1rem; border-bottom: 1px solid var(--line); }
.trade-tab { flex: 1; padding: 0.55rem 0 0.7rem; margin-bottom: -1px; font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.trade-tab:hover { color: var(--text); }
.trade-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.trade-tab.active[data-side="sell"] { border-bottom-color: var(--clay); }
/* The trade panel is narrow and shows two balances: the word goes, the text may wrap */
.trade .wallet-line { margin-bottom: 0.75rem; }
.trade .wallet-word { display: none; }
.trade .wallet-text { white-space: normal; }
.trade-amount { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.9rem 1.1rem 1rem; }
.trade-amount .section-label { display: block; margin-bottom: 0.4rem; }
.trade-amount .input-suffix .input { background: transparent; border: none; border-radius: 0; padding: 0.2rem 6.5rem 0.2rem 0; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }
.trade-amount .input-suffix .input:focus { outline: none; }
.trade-amount .input-suffix span { right: 0; padding: 0.35rem 0.8rem; border-radius: var(--r-pill); background: rgba(249, 244, 237, 0.09); color: var(--text); font-size: 12px; font-weight: 700; }
.presets { display: flex; gap: 0.45rem; margin: 0.9rem 0 0; }
.trade-amount.first-buy .section-label { cursor: text; }
.first-buy + .help { margin-top: 0.6rem; padding: 0 0.25rem; }
.preset { flex: 1; padding: 0.5rem 0; font: inherit; font-size: var(--fs-label); font-weight: 600; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; }
.preset:hover { color: var(--text); border-color: rgba(249, 244, 237, 0.3); }
.trade-quote { display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--fs-s); color: var(--muted); margin: 1rem 0 0.9rem; min-height: 1.5rem; padding: 0 0.25rem; }
.quote-row { display: flex; justify-content: space-between; gap: 1rem; }
.quote-row span:last-child { color: var(--text); font-weight: 600; text-align: right; }
.quote-row small { font-weight: 400; color: var(--dim); margin-left: 0.3rem; }
.quote-note { color: var(--dim); font-size: var(--fs-label); }
.trade-more { margin: 0 0 1rem; }
.trade-more summary { font-size: var(--fs-s); margin-bottom: 0.6rem; }
.trade-settings { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0 0.25rem; font-size: var(--fs-s); color: var(--muted); }
.trade-settings label { line-height: 1.35; }
.trade-settings .input-suffix { flex: none; }
.input-suffix.small { width: 6.5rem; }
.input-suffix.small .input { padding: 0.4rem 2rem 0.4rem 0.9rem; font-size: var(--fs-s); }
.input-suffix.small span { right: 0.9rem; }
#tradeBtn.sell { background: var(--clay); color: var(--clay-ink); }
#tradeBtn.sell:hover:not(:disabled) { background: #ffa982; }

/* Share and graduated buttons */
.share-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.share-row .btn { flex: 1 1 10rem; }
.share .help { margin-top: 0.75rem; }

/* Footer */
.foot { border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 12px; }
.foot-inner { max-width: var(--page); margin: 0 auto; padding: 1.5rem var(--gutter) 2.5rem; }
.foot-links { margin-top: 0.75rem; }
.foot a { color: var(--muted); }

/* Admin: partner fees */
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.25rem; }
.number { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-tile); padding: 0.85rem 1rem; display: flex; flex-direction: column; min-width: 0; }
.number-label { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; white-space: nowrap; }
.number-value { font-family: var(--display); font-weight: 800; font-size: 20px; margin-top: 0.35rem; word-break: break-all; font-variant-numeric: tabular-nums; }
.number-unit { font-size: 12px; color: var(--dim); }
@media (max-width: 360px) { .numbers { grid-template-columns: 1fr 1fr; } }
.admin-mismatch { margin: 0.25rem 0 0; font-size: var(--fs-s); color: var(--clay); }
.admin-actions { margin: 1.25rem 0 0.25rem; }
.admin .status { margin-bottom: 0.75rem; }
.fees td:first-child a { color: var(--accent); font-family: inherit; }
.fees .btn-small { padding: 0.35rem 0.8rem; }

/* 404 and about: plain text on the page, no card */
.notfound { text-align: left; padding: 3rem 0; }
.notfound h1 { font-family: var(--display); font-weight: 800; font-size: 28px; margin-bottom: 0.5rem; }
.notfound p { color: var(--muted); }
.prose { padding: 1rem 0; }
.prose h1 { margin-bottom: 1rem; }
.prose h2 { font-size: 17px; font-weight: 700; margin: 1.75rem 0 0.5rem; }
.prose p, .prose li { color: var(--muted); margin-bottom: 0.75rem; }
.prose strong { color: var(--text); }
.prose ul { padding-left: 1.2rem; }