:root {
    --bg: #0d0c14;
    --panel: #16141f;
    --panel-2: #1d1a2a;
    --text: #ece9f5;
    --muted: #9590a8;
    --accent: #ff3d8a;
    --accent-rgb: 255, 61, 138;
    --accent-2: #8a4dff;
    --border: #2a2638;
    --pos: #4ade80;
    --neg: #f87171;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container.narrow { max-width: 460px; }

/* Top bar */
.topbar { background: rgba(13,12,20,0.92); backdrop-filter: blur(14px);
    position: sticky; top:0; z-index: 50; border-bottom: 1px solid var(--border); }
.topbar-inner { display:flex; align-items:center; gap:1rem; padding:.6rem 1.25rem; max-width:1400px; margin:0 auto; }
.brand { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; white-space:nowrap; }
.brand .dot { color: var(--accent); }
.topbar-nav { display:flex; gap:.25rem; flex:1; justify-content:center; }
.nav-item { display:flex; align-items:center; gap:.4rem; padding:.5rem .85rem; border-radius:10px;
    color:var(--muted); font-size:.88rem; font-weight:500; transition: all .15s; }
.nav-item:hover { color:var(--text); background:var(--panel); }
.nav-item.active { color:var(--accent); background:rgba(255,61,138,0.08); }
.nav-item svg { flex-shrink:0; stroke-linecap:round; stroke-linejoin:round; }
.topbar-right { display:flex; align-items:center; gap:.6rem; }
.balance { font-size:.8rem; color: var(--accent); background: rgba(255,61,138,0.1);
    padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(255,61,138,0.3); white-space:nowrap;
    text-decoration:none; cursor:pointer; transition: background .15s; }
.balance:hover { background: rgba(255,61,138,0.2); }
.nav-avatar { display:flex; }
.avatar-circle { width:34px; height:34px; border-radius:50%; background:var(--panel-2); background-size:cover;
    background-position:center; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.85rem; color:var(--muted); border:2px solid var(--border); transition:border-color .15s; }
.nav-avatar:hover .avatar-circle { border-color:var(--accent); }
.nav-item-inline { display:flex; align-items:center; color:var(--muted); padding:.35rem; border-radius:8px; }
.nav-item-inline:hover { color:var(--text); background:var(--panel); }
.btn.sm { padding:.4rem .85rem; font-size:.82rem; }
.lang-select { background:var(--panel-2); color:var(--muted); border:1px solid var(--border);
    border-radius:8px; padding:.25rem .4rem; font-size:.78rem; font-weight:600; cursor:pointer;
    appearance:none; -webkit-appearance:none; text-align:center; min-width:42px; }
.lang-select:focus { outline:none; border-color:var(--accent); color:var(--text); }
#langSelector { display:flex; align-items:center; }
@media (max-width:768px) {
    .topbar-nav { position:fixed; bottom:0; left:0; right:0; background:rgba(13,12,20,0.95);
        backdrop-filter:blur(14px); border-top:1px solid var(--border); justify-content:space-around;
        padding:.4rem 0; z-index:50; gap:0; }
    .nav-item { flex-direction:column; gap:.15rem; padding:.4rem .5rem; font-size:.7rem; }
    .nav-item svg { width:20px; height:20px; }
    body { padding-bottom:60px; }
    .topbar-inner { padding:.5rem .75rem; }
    .nav-item span { display:block; }
}

.btn { display:inline-block; padding:.55rem 1rem; border-radius: 10px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer; font-size: .9rem; transition: all .15s; }
.btn.lg { padding: .85rem 1.5rem; font-size: 1rem; }
.btn-sm, .btn.btn-sm { padding:.4rem .75rem; font-size:.82rem; border-radius:8px; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--panel); }

[hidden] { display: none !important; }

.hero { padding: 5rem 0 3rem; text-align: center;
    background: radial-gradient(ellipse at top, rgba(138,77,255,0.2), transparent 60%); }
.hero h1 { font-size: 3rem; margin: 0 0 1rem; line-height:1.1; letter-spacing: -0.02em; }
.hero .grad { background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent; }
.hero .lead { color: var(--muted); font-size: 1.15rem; max-width: 600px; margin: 0 auto 2rem; }
.cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

.section { padding: 3rem 0; }
.section.alt { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section h1, .section h2 { letter-spacing: -0.01em; }
.section h2 { margin: 0 0 1.5rem; font-size: 1.6rem; }

.grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden; transition: transform .15s, border-color .15s; display:block; }
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card-body { padding: 1rem; }
.card-body h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.muted { color: var(--muted); font-size: .9rem; margin: 0; }
.bio { color: var(--muted); font-size: .85rem; margin-top: .5rem;
    overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }

/* ── Browse page ── */
.browse-hero { padding:3rem 0 2rem;
    background: radial-gradient(ellipse at 60% 0%, rgba(138,77,255,.18), transparent 65%),
                radial-gradient(ellipse at 20% 100%, rgba(255,61,138,.12), transparent 55%);
    border-bottom:1px solid var(--border); }
.browse-title { font-size:2.2rem; font-weight:800; letter-spacing:-.03em; margin:0 0 .35rem; }
.browse-lead { margin:0 0 1.75rem; font-size:1rem; }

.browse-search-wrap { margin-bottom:1.25rem; }
.browse-search-inner { display:flex; align-items:center; background:var(--panel);
    border:1px solid var(--border); border-radius:14px; padding:.35rem .35rem .35rem .9rem;
    gap:.5rem; transition:border-color .15s; max-width:640px; }
.browse-search-inner:focus-within { border-color:var(--accent); }
.browse-search-icon { color:var(--muted); flex-shrink:0; }
.browse-search-input { flex:1; background:transparent; border:none; outline:none;
    color:var(--text); font-size:.95rem; padding:.35rem 0; }
.browse-search-input::placeholder { color:var(--muted); }
.browse-search-btn { padding:.5rem 1.1rem; font-size:.88rem; border-radius:10px; flex-shrink:0; }

.browse-filters { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.browse-filter-select { background:var(--panel); color:var(--text);
    border:1px solid var(--border); padding:.45rem .75rem; border-radius:10px;
    font-size:.85rem; cursor:pointer; outline:none; transition:border-color .15s; }
.browse-filter-select:focus { border-color:var(--accent); }
.browse-filter-check { display:flex; align-items:center; gap:.4rem; font-size:.85rem;
    color:var(--muted); cursor:pointer; user-select:none; padding:.45rem .75rem;
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    transition:border-color .15s, color .15s; }
.browse-filter-check:hover { color:var(--text); border-color:var(--accent); }
.browse-filter-check input { accent-color:var(--accent); cursor:pointer; }
.browse-count { font-size:.82rem; margin-left:auto; }

/* Model card grid */
.models-grid { display:grid; gap:1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.mc { display:flex; flex-direction:column; background:var(--panel);
    border:1px solid var(--border); border-radius:16px; overflow:hidden;
    text-decoration:none; color:var(--text);
    transition:transform .18s, border-color .18s, box-shadow .18s; }
.mc:hover { transform:translateY(-4px); border-color:var(--accent);
    box-shadow:0 8px 32px rgba(255,61,138,.12); color:var(--text); }

.mc-img-wrap { position:relative; aspect-ratio:3/4; overflow:hidden; }
.mc-avatar { width:100%; height:100%; background-size:cover; background-position:center top;
    background-color:var(--panel-2); transition:transform .35s; }
.mc:hover .mc-avatar { transform:scale(1.04); }
.mc-avatar-initials { display:flex; align-items:center; justify-content:center;
    font-size:2.5rem; font-weight:800; color:var(--muted);
    background:linear-gradient(135deg,var(--panel-2),var(--panel)); }
.mc-verified-ribbon { position:absolute; top:.6rem; left:.6rem;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff; font-size:.7rem; font-weight:700; padding:.2rem .55rem;
    border-radius:999px; letter-spacing:.02em; }

.mc-body { padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.mc-name { font-size:.97rem; font-weight:700; display:flex; align-items:center; gap:.3rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-verified { display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border-radius:50%; flex-shrink:0; }
.mc-handle { font-size:.8rem; }
.mc-location { display:flex; align-items:center; gap:.3rem; font-size:.8rem; color:var(--muted); }
.mc-meta { display:flex; align-items:center; gap:.6rem; margin-top:.25rem; }
.mc-posts { font-size:.78rem; color:var(--muted); }
.mc-rate { font-size:.78rem; font-weight:600; color:var(--accent);
    background:rgba(255,61,138,.08); padding:.15rem .5rem; border-radius:999px; }

.browse-empty { text-align:center; padding:4rem 1rem; color:var(--muted); }
.browse-empty h3 { margin:.75rem 0 .4rem; font-size:1.1rem; color:var(--text); }

.check-label { display:flex; align-items:center; gap:.35rem; font-size:.85rem;
    color:var(--muted); white-space:nowrap; cursor:pointer; }

.badge.verified-badge { background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff; font-size:.7rem; font-weight:700; padding:.15rem .5rem;
    border-radius:999px; vertical-align:middle; margin-left:.3rem; }

@media (max-width:600px) {
    .browse-title { font-size:1.6rem; }
    .models-grid { grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap:.85rem; }
    .browse-filters { gap:.4rem; }
    .browse-count { margin-left:0; }
}

.rate { color: var(--accent); font-weight:600; }

.center { text-align:center; margin-top:1.5rem; }

.row.two { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.row.three { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem; }
@media (max-width: 600px) { .row.three { grid-template-columns: 1fr; } .row.two { grid-template-columns: 1fr; } }

.avatar { width: 100%; aspect-ratio: 1; background-size: cover; background-position: center;
    background-color: var(--panel-2); }
.avatar.lg { width: 160px; height: 160px; border-radius: 50%; }

.pack { padding: 1.5rem; text-align: center; }
.pack .big { font-size: 2rem; font-weight: 800; margin: .5rem 0 0; }
.pack .big small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.pack .price { color: var(--muted); margin: .25rem 0 1rem; }

.preview { aspect-ratio: 4/5; background-size: cover; background-position: center;
    filter: blur(20px); position: relative; background-color: var(--panel-2); }
.preview .lock { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center;
    color: #fff; font-weight: 700; font-size: 1.1rem; background: rgba(0,0,0,0.4); }

.profile { display:flex; gap: 2rem; align-items: center; flex-wrap: wrap; }

.form { display:flex; flex-direction: column; gap: 1rem; }
.form label { display:flex; flex-direction:column; gap:.4rem; font-size: .9rem; color: var(--muted); }
.form input, .form textarea, .form select, .search {
    background: var(--panel-2); color: var(--text); border:1px solid var(--border);
    padding:.7rem .9rem; border-radius: 10px; font-size: 1rem; font-family: inherit; }
.form input:focus, .form textarea:focus, .search:focus { outline: none; border-color: var(--accent); }
.form .role { border:1px solid var(--border); border-radius:10px; padding: 1rem; }
.form .radio { flex-direction:row; align-items:center; gap:.5rem; color: var(--text); }
.search { width: 100%; margin-bottom: 1.5rem; }

.list { list-style:none; padding:0; margin:0; }
.list li { display:grid; grid-template-columns: 1fr 1fr auto 2fr; gap:1rem;
    padding:.75rem 1rem; border-bottom: 1px solid var(--border); align-items:center; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

.chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; min-height: 70vh; }
.threads { background: var(--panel); border-radius: 16px 0 0 16px; border-right: 1px solid var(--border); overflow-y: auto; }
.threads h2 { padding: 1rem 1.25rem .5rem; margin: 0; font-size: 1.1rem; }
.threads ul { list-style:none; padding:0; margin:0; }
.threads li { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; cursor: pointer; position: relative; transition: background .15s; }
.threads li:hover { background: var(--panel-2); }
.threads li.active { background: var(--panel-2); border-left: 3px solid var(--accent); }
.thread-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--panel-2); }
.thread-avatar.placeholder { display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:var(--accent); background:var(--border); }
.thread-info { flex:1; min-width:0; }
.thread-top { display:flex; justify-content:space-between; align-items:center; }
.thread-top strong { font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-time { font-size:.75rem; }
.thread-preview { margin:0; font-size:.82rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.unread-badge { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background: var(--accent); color:#fff;
    border-radius: 999px; padding:.1rem .45rem; font-size: .7rem; font-weight:700; }

.conversation { background: var(--panel); border-radius: 0 16px 16px 0;
    display: flex; flex-direction: column; min-height: 0; }
.chat-header { display:flex; align-items:center; gap:.75rem; padding:.85rem 1.25rem; border-bottom:1px solid var(--border); }
.chat-header-avatar img, .chat-header-avatar .placeholder { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.chat-header-avatar .placeholder { display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:var(--accent); background:var(--border); }
.chat-header-info { display:flex; flex-direction:column; }
.chat-header-info strong { font-size:.95rem; }
.chat-header-info .muted { font-size:.8rem; }
.chat-cost-banner { padding:.5rem 1.25rem; background: linear-gradient(90deg, rgba(255,61,138,.08), rgba(138,77,255,.08)); border-bottom:1px solid var(--border); font-size:.85rem; color:var(--muted); }
.chat-cost-banner strong { color:var(--accent); }
.chat-empty { flex:1; display:flex; align-items:center; justify-content:center; }
.messages { flex:1; overflow-y: auto; display:flex; flex-direction: column; gap:.6rem; padding: 1rem 1.25rem; }
.msg { max-width: 72%; display:flex; flex-direction:column; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; }
.msg-bubble { padding:.65rem 1rem; border-radius: 16px; line-height:1.4; font-size:.92rem; }
.msg.in .msg-bubble { background: var(--panel-2); border-bottom-left-radius: 4px; }
.msg.out .msg-bubble { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-bottom-right-radius: 4px; }
.msg-meta { font-size:.72rem; color:var(--muted); margin-top:.2rem; padding: 0 .25rem; }
.msg.out .msg-meta { text-align:right; }
.msg-cost { color:var(--accent); font-weight:600; margin-left:.3rem; }
.msg-form { display:flex; gap:.5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); }
.msg-form input { flex:1; background: var(--panel-2); color: var(--text); border:1px solid var(--border);
    padding:.7rem 1rem; border-radius: 12px; font-size:.92rem; }
.msg-form input:focus { outline:none; border-color:var(--accent); }

/* Instagram-style grid */
.ig-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
@media (min-width: 900px) { .ig-grid { gap: 8px; } }
.tile { position: relative; aspect-ratio: 1; border:0; padding:0; cursor: pointer;
    background-size: cover; background-position: center; background-color: var(--panel-2);
    border-radius: 4px; overflow: hidden; transition: transform .15s; }
.tile:hover { transform: scale(1.01); }
.tile.locked { filter: blur(14px) brightness(0.85); }
.tile.locked:hover { filter: blur(10px) brightness(0.95); }
.tile-badge { position:absolute; top:.5rem; left:.5rem; background: rgba(0,0,0,0.65);
    color:#fff; font-size:.75rem; font-weight:700; padding:.2rem .5rem; border-radius:999px;
    backdrop-filter: blur(4px); z-index: 2; filter: none; }
.tile.locked .tile-badge { filter: none; }
.tile-badge.free { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.tile-badge.unlocked { background: var(--pos); color:#0d0c14; }
.tile-type { position:absolute; top:.5rem; right:.5rem; color:#fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7); font-size: 1.1rem; z-index: 2; }

/* Owner uploader */
.uploader { background: var(--panel); border:1px solid var(--border); border-radius: 16px; padding: 1rem 1.25rem; }
.uploader summary { cursor: pointer; font-weight: 600; padding:.25rem 0; }
.uploader[open] summary { margin-bottom: 1rem; }
.uploader .row { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.uploader .toggle { flex-direction: row; align-items: center; gap:.5rem; color: var(--text); }
@media (max-width: 600px) { .uploader .row { grid-template-columns: 1fr; } }

/* Post modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal-inner { background: var(--panel); border-radius: 16px; max-width: 900px; width: 100%;
    max-height: 90vh; overflow: hidden; position: relative; }
.modal-close { position: absolute; top:.75rem; right:.75rem; background: rgba(0,0,0,0.6);
    color:#fff; border:0; width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem;
    cursor: pointer; z-index: 10; display:flex; align-items:center; justify-content:center;
    transition: background .15s; }
.modal-close:hover { background: rgba(0,0,0,0.8); }

/* Instagram-style post modal */
.post-modal-inner { max-width: 1050px; width: 95vw; max-height: 88vh; border-radius: 12px; overflow:hidden; }
.post-modal-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; height: 80vh; max-height: 80vh; }
.post-media { background:#000; display:flex; align-items:center; justify-content:center;
    overflow:hidden; position:relative; }
.post-media img { width:100%; height:100%; object-fit:contain; display:block; }
.post-media video { width:100%; height:100%; object-fit:contain; display:block; }
.post-media audio { width: 80%; margin:auto; }
.post-media .locked-preview { width: 100%; height:100%; background-size: cover;
    background-position: center; filter: blur(28px) brightness(0.6); }
.post-meta { padding: 1.25rem; }
.post-meta h3 { margin: 0 0 .25rem; }

@media (max-width: 760px) {
    .post-modal-inner { max-width: 100%; width: 100%; }
    .post-modal-grid { grid-template-columns: 1fr; height: auto; max-height: 88vh; overflow-y: auto; }
    .post-media { min-height: 250px; max-height: 50vh; }
    .post-media img, .post-media video { max-height: 50vh; object-fit: contain; }
}

/* ------ Real profile pages ------ */
.profile-page { padding-bottom: 2rem; }
.cover { height: 280px; background-size: cover; background-position: center;
    background-color: var(--panel);
    background-image: linear-gradient(135deg, rgba(255,61,138,0.4), rgba(138,77,255,0.4));
    border-bottom: 1px solid var(--border); position: relative; }
.cover-edit { position:absolute; bottom:1rem; right:1rem; background:rgba(0,0,0,0.6);
    color:#fff; border:0; border-radius:50%; width:40px; height:40px; font-size:1.1rem;
    cursor:pointer; display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(4px); transition: background .2s; }
.cover-edit:hover { background:rgba(0,0,0,0.85); }
.profile-page.is-owner .cover-edit { display:flex; }
@media (max-width: 760px) { .cover { height: 180px; } }

.profile-header { position: relative; padding-top: 0; }
.avatar-wrap { margin-top: -72px; display:inline-block; }
.avatar.xl { width: 144px; height: 144px; border-radius: 50%; border: 4px solid var(--bg);
    background-size: cover; background-position: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); position:relative; }
.avatar-edit { position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,0.5);
    color:#fff; display:none; align-items:center; justify-content:center; font-size:1.3rem;
    cursor:pointer; border:0; transition:background .2s; }
.avatar-edit:hover { background:rgba(0,0,0,0.7); }
.profile-page.is-owner .avatar-edit { display:flex; }

/* Drop zone for file upload */
.drop-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 2rem 1rem;
    text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
    position: relative; min-height: 160px; display: flex; align-items: center; justify-content: center; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: rgba(255,61,138,0.05); }
.drop-zone-prompt p { margin: .25rem 0; }
.drop-zone-preview { max-width: 100%; max-height: 240px; border-radius: 8px; display: none; object-fit: contain; }
.drop-zone.has-file .drop-zone-prompt { display: none; }
.drop-zone.has-file .drop-zone-preview { display: block; }
.avatar.sm { width: 36px; height: 36px; border-radius: 50%; background-size: cover;
    background-position: center; display: inline-block; vertical-align: middle;
    background-color: var(--panel-2); flex-shrink: 0; }
.avatar.xs { width: 28px; height: 28px; border-radius: 50%; background-size: cover;
    background-position: center; display: inline-block; background-color: var(--panel-2); flex-shrink: 0; }

.profile-info { display:flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.profile-titles h1 { margin: 0; font-size: 1.75rem; display:flex; align-items:center; gap:.5rem; }
.profile-titles .muted { margin: .15rem 0 0; }
.verified { background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff; width: 22px; height: 22px; border-radius: 50%; font-size: .85rem;
    display:inline-flex; align-items:center; justify-content:center; }
.profile-actions { display:flex; gap:.5rem; flex-wrap: wrap; }

.stats { list-style:none; padding:0; margin: 1.5rem 0 0; display:flex; gap: 2rem; flex-wrap: wrap; }
.stats li { text-align: left; }
.stats a { display:block; color: inherit; }
.stats strong { display:block; font-size: 1.25rem; font-weight: 700; }
.stats span { color: var(--muted); font-size: .85rem; }

.profile-meta { margin-top: 1.25rem; }
.bio-full { margin: 0 0 .5rem; white-space: pre-wrap; line-height:1.5; }
.profile-links { display:flex; gap:.5rem; flex-wrap: wrap; color: var(--muted); margin: 0 0 .5rem; font-size:.88rem; }
.profile-links a { color: var(--text); }
.profile-links a:hover { color: var(--accent); }
.muted.small { font-size: .8rem; }

/* Chip tags */
.chip { display:inline-block; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    padding:.25rem .65rem; border-radius:999px; font-size:.78rem; font-weight:500; }

/* Profile About section */
.profile-about { margin-top:1.25rem; background:var(--panel-2); border:1px solid var(--border);
    border-radius:14px; padding:1.25rem 1.5rem; }
.about-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.25rem; }
.about-col { display:flex; flex-direction:column; gap:.5rem; }
.about-heading { margin:0; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--accent); font-weight:700; padding-bottom:.3rem; border-bottom:1px solid var(--border); }
.about-items { display:flex; flex-direction:column; gap:.5rem; }
.about-item { display:flex; align-items:center; gap:.6rem; }
.about-item .about-icon { font-size:1.25rem; width:28px; text-align:center; flex-shrink:0; }
.about-item strong { display:block; font-size:.88rem; }
.about-item .muted { display:block; font-size:.75rem; }
.about-tags { display:flex; flex-wrap:wrap; gap:.35rem; }

@media (max-width: 600px) {
    .about-grid { grid-template-columns:1fr; }
}


.profile-tabs { display:flex; gap: 0; margin: 0 0 1.25rem; border-bottom: 1px solid var(--border); }
.profile-tabs .tab { background: transparent; border:0; color: var(--muted);
    padding: .75rem 1.25rem; cursor: pointer; font-size: .95rem; font-weight: 600;
    border-bottom: 2px solid transparent; }
.profile-tabs .tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-pane { min-height: 300px; }

/* Timeline feed */
.timeline { display:flex; flex-direction:column; gap:1.25rem; }
.tl-card { background:var(--panel); border:1px solid var(--border); border-radius:14px;
    overflow:hidden; cursor:pointer; transition: border-color .15s, box-shadow .15s; }
.tl-card:hover { border-color:rgba(255,61,138,0.3); box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.tl-header { display:flex; align-items:center; gap:.6rem; padding:1rem 1.25rem .5rem; }
.tl-header strong { font-size:.9rem; }
.tl-title { margin:0; padding:0 1.25rem .25rem; font-weight:600; font-size:1rem; }
.tl-desc { margin:0; padding:0 1.25rem .5rem; font-size:.88rem; color:var(--muted); }
.tl-media-wrap { width:100%; }
.tl-media { width:100%; display:block; max-height:600px; object-fit:cover; }
.tl-audio { padding:1rem 1.25rem; }
.tl-audio audio { width:100%; }
.tl-locked { width:100%; aspect-ratio:4/3; background-size:cover; background-position:center;
    filter:blur(16px) brightness(0.5); position:relative; display:flex; align-items:center; justify-content:center; }
.tl-lock-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.4); color:#fff; font-weight:600; font-size:1.1rem;
    backdrop-filter:blur(0); }
.tl-actions { display:flex; gap:1rem; padding:.75rem 1.25rem; border-top:1px solid var(--border); }
.tl-action-btn { background:none; border:none; color:var(--text); cursor:pointer;
    font-size:.9rem; display:flex; align-items:center; gap:.35rem; padding:.3rem .5rem;
    border-radius:8px; transition: background .15s; }
.tl-action-btn:hover { background:var(--panel-2); }
.tl-action-btn.on .heart, .tl-action-btn.like-tl.on .heart { color:var(--accent); }
.tl-action-btn .heart { font-size:1.2rem; line-height:1; }

.kv { display:grid; grid-template-columns: 140px 1fr; gap: .5rem 1rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* Tile engagement overlay */
.tile-stats { position: absolute; inset: auto 0 0 0; padding: .5rem .65rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff; font-size: .8rem; display:flex; gap: .75rem; opacity: 0; transition: opacity .2s; }
.tile:hover .tile-stats { opacity: 1; }

/* Post modal extensions — Instagram-style right panel */
.post-side { display:flex; flex-direction: column; height:100%; overflow:hidden; border-left:1px solid var(--border); }
.post-side-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.post-author { display:flex; align-items:center; gap:.65rem; }
.post-author p { margin: 0; }
.post-title { margin: .5rem 0 .25rem; font-size: 1.05rem; }
.post-description { margin:0; font-size:.9rem; color:var(--muted); }
.post-unlock-bar { padding:.75rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.post-engage { display:flex; align-items:center; gap: 1rem; padding:.6rem 1.25rem;
    border-bottom: 1px solid var(--border); flex-shrink:0; }
.like-btn { background: transparent; border:0; color: var(--text); cursor: pointer;
    display:flex; align-items: center; gap:.4rem; font-size: 1rem; padding: .25rem .5rem;
    border-radius: 8px; }
.like-btn:hover { background: var(--panel-2); }
.like-btn .heart { font-size: 1.4rem; line-height: 1; }
.like-btn.on .heart { color: var(--accent); }
.comments-wrap { flex:1; overflow-y:auto; padding:1rem 1.25rem; min-height:0; }
.comments { display:flex; flex-direction: column; gap:.85rem; }
.comment { display:flex; gap:.6rem; align-items: flex-start; }
.comment strong { margin-right: .25rem; font-size:.88rem; }
.comment a { color: var(--text); }
.comment p { margin: .15rem 0 0; }
.comment-body { font-size:.9rem; line-height:1.4; }
.comment-time { font-size:.75rem; color:var(--muted); margin-top:.15rem; }
.comment-form { display:flex; gap:.5rem; padding:.75rem 1.25rem; border-top:1px solid var(--border); flex-shrink:0; }
.comment-form input { flex:1; background: var(--panel-2); color: var(--text);
    border:1px solid var(--border); padding:.6rem .85rem; border-radius: 10px; font-size:.9rem; }
.comment-form input:focus { outline:none; border-color:var(--accent); }

/* Subscribe modal */
.sub-modal { max-width: 420px; }
.sub-body { padding: 2rem; text-align: center; }
.sub-price { font-size: 2.5rem; font-weight: 800; margin: 1rem 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent; }
.sub-price small { font-size: .9rem; color: var(--muted); font-weight: 400;
    display: block; -webkit-text-fill-color: var(--muted); color: var(--muted); }

/* Followers / Following list modal */
.list-modal { max-width: 480px; padding: 1.5rem; }
.list-modal h2 { margin: 0 0 1rem; }
.user-list { list-style:none; padding: 0; margin: 0; max-height: 60vh; overflow: auto; }
.user-list li { padding:.5rem 0; }
.user-list a { display:flex; align-items:center; gap:.75rem; color: inherit; }
.user-list a:hover { color: var(--accent); }
.user-list .muted { display: block; font-size: .85rem; }

/* Edit modal */
.edit-modal { max-width: 1100px; width: 95vw; padding: 1.5rem 2rem 1.25rem; max-height: 95vh; overflow-y: auto; }
.edit-modal h2 { margin: 0 0 1rem; }
.edit-form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.edit-col { display:flex; flex-direction:column; gap:.5rem; }
.edit-group-title { margin: .75rem 0 0; font-size: .75rem; text-transform:uppercase;
    letter-spacing:.05em; color: var(--accent); border-bottom:1px solid var(--border); padding-bottom:.3rem; }
.edit-group-title:first-child { margin-top: 0; }
.edit-actions { grid-column: 1 / -1; display:flex; gap:.5rem; justify-content:flex-end;
    margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.edit-modal .row.two { display:grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.edit-modal .row.three { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
@media (max-width: 700px) {
    .edit-form-grid { grid-template-columns: 1fr; }
    .edit-modal .row.two, .edit-modal .row.three { grid-template-columns: 1fr; }
}

/* Feed tabs */
.feed-tabs { display:flex; gap:0; max-width:640px; margin:0 auto 1.25rem; border-bottom:1px solid var(--border); }
.feed-tab { background:none; border:none; color:var(--muted); font-size:.95rem; font-weight:600;
    padding:.75rem 1.5rem; cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.feed-tab:hover { color:var(--text); }
.feed-tab.active { color:var(--text); border-bottom-color:var(--accent); }

/* Timeline feed */
.timeline-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.timeline-header h2 { margin:0; }
.timeline { display:flex; flex-direction:column; gap:1rem; max-width:640px; margin:0 auto; }

/* Post card */
.tl-post { overflow:hidden; border-radius:16px; }
.tl-post:hover { transform:none; border-color:var(--border); }
.tl-header { display:flex; align-items:center; gap:.65rem; padding:.85rem 1rem; }
.tl-avatar { width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center;
    background-color:var(--panel-2); flex-shrink:0; }
.tl-author-info { flex:1; min-width:0; }
.tl-author-name { font-weight:700; font-size:.92rem; color:var(--text); display:flex; align-items:center; gap:.35rem; }
.tl-author-name a { color:var(--text); }
.tl-author-name a:hover { color:var(--accent); }
.tl-verified { color:var(--accent); font-size:.75rem; }
.tl-author-sub { font-size:.78rem; color:var(--muted); }
.tl-time { font-size:.78rem; color:var(--muted); white-space:nowrap; }

/* Media area */
.tl-media { width:100%; max-height:560px; overflow:hidden; display:flex; align-items:center;
    justify-content:center; background:#000; position:relative; }
.tl-media img, .tl-media video { width:100%; max-height:560px; object-fit:contain; display:block; }
.tl-media.locked { min-height:240px; background-size:cover; background-position:center;
    filter:blur(20px) brightness(0.6); }
.tl-media.locked .lock-overlay { position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:.5rem; filter:none; z-index:2; }
.tl-media.locked .lock-overlay svg { opacity:.8; }
.lock-overlay .btn { filter:none; }
.tl-media .tl-type-badge { position:absolute; top:.75rem; left:.75rem; background:rgba(0,0,0,0.7);
    color:#fff; font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:999px;
    backdrop-filter:blur(4px); z-index:2; display:flex; align-items:center; gap:.25rem; }

/* Post body + engagement */
.tl-body { padding:.85rem 1rem .5rem; }
.tl-body h3 { margin:0 0 .2rem; font-size:.95rem; font-weight:600; }
.tl-body p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.45; }
.tl-engage { display:flex; align-items:center; gap:.15rem; padding:.35rem 1rem .85rem; }
.tl-engage-btn { background:none; border:none; color:var(--muted); cursor:pointer; display:flex;
    align-items:center; gap:.3rem; padding:.4rem .6rem; border-radius:8px; font-size:.85rem;
    font-weight:500; transition:all .12s; }
.tl-engage-btn:hover { background:var(--panel-2); color:var(--text); }
.tl-engage-btn.liked { color:var(--neg); }
.tl-engage-btn.tip-btn:hover { color:var(--pos); }
.tl-engage-btn svg { width:18px; height:18px; stroke-linecap:round; stroke-linejoin:round; }
.tl-engage-spacer { flex:1; }
.tl-engage-btn.bookmark-btn:hover { color:var(--accent); }

/* Inline comment preview */
.tl-comments-preview { padding:0 1rem .85rem; font-size:.85rem; }
.tl-comments-preview a { font-weight:600; }
.tl-comments-preview .muted { cursor:pointer; }

/* Creator composer */
.composer { max-width:640px; margin:0 auto 1.25rem; border-radius:16px; padding:1rem; }
.composer:hover { transform:none; border-color:var(--border); }
.composer-top { display:flex; gap:.65rem; align-items:flex-start; }
.composer-avatar { width:40px; height:40px; border-radius:50%; background-size:cover;
    background-position:center; background-color:var(--panel-2); flex-shrink:0; }
.composer-input { flex:1; display:flex; flex-direction:column; gap:.5rem; }
.composer-input textarea { background:var(--panel-2); color:var(--text); border:1px solid var(--border);
    border-radius:12px; padding:.65rem .85rem; font-size:.92rem; font-family:inherit; resize:none;
    min-height:60px; transition:border-color .15s; }
.composer-input textarea:focus { outline:none; border-color:var(--accent); }
.composer-bottom { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.65rem; }
.composer-tools { display:flex; gap:.25rem; }
.composer-tool { background:none; border:none; color:var(--muted); cursor:pointer; padding:.4rem;
    border-radius:8px; display:flex; align-items:center; transition:all .12s; }
.composer-tool:hover { color:var(--accent); background:rgba(255,61,138,0.08); }
.composer-tool svg { width:20px; height:20px; }

/* Tip modal */
.tip-modal { max-width:340px; padding:1.5rem; text-align:center; grid-template-columns:1fr; }
.tip-modal h2 { margin:0 0 .5rem; font-size:1.1rem; }
.tip-amounts { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:.75rem 0; }
.tip-amounts button { background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    padding:.5rem 1rem; border-radius:999px; cursor:pointer; font-weight:600; font-size:.9rem; transition:all .15s; }
.tip-amounts button:hover, .tip-amounts button.selected { border-color:var(--accent);
    background:rgba(255,61,138,0.1); color:var(--accent); }
.tip-custom { display:flex; gap:.5rem; margin-top:.5rem; }
.tip-custom input { flex:1; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    padding:.5rem; border-radius:10px; font-size:1rem; text-align:center; }
.tip-custom input:focus { outline:none; border-color:var(--accent); }

/* Apply banner */
.apply-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.25rem 1.5rem; margin-bottom:1.5rem; max-width:640px; margin-left:auto; margin-right:auto;
    background: linear-gradient(135deg, rgba(255,61,138,0.08), rgba(138,77,255,0.08));
    border:1px solid rgba(255,61,138,0.25); }
.apply-banner h3 { margin:0 0 .15rem; font-size:1rem; }
.apply-banner p { margin:0; font-size:.85rem; }
@media (max-width:600px) { .apply-banner { flex-direction:column; text-align:center; } }

/* Tabs */
.tabs { display:flex; gap:.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.tab { background: transparent; border:0; color: var(--muted); padding:.6rem 1rem;
    cursor: pointer; font-size: .95rem; border-bottom: 2px solid transparent; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Application status */
.badge-status { display:inline-block; padding:.4rem .8rem; border-radius:999px; font-weight:600;
    font-size:.85rem; margin: 0 0 .5rem; }
.badge-status.pending  { background: rgba(250,204,21,0.15); color:#facc15; border:1px solid rgba(250,204,21,0.4); }
.badge-status.approved { background: rgba(74,222,128,0.15); color: var(--pos); border:1px solid rgba(74,222,128,0.4); }
.badge-status.rejected { background: rgba(248,113,113,0.15); color: var(--neg); border:1px solid rgba(248,113,113,0.4); }
.application-card { display:block; padding:1.25rem; }

/* ===== Studio / Dashboard ===== */
.studio-layout { display:grid; grid-template-columns:260px 1fr; gap:0; min-height:75vh; }

/* Sidebar */
.studio-sidebar { background:var(--panel); border-radius:16px 0 0 16px; border-right:1px solid var(--border);
    display:flex; flex-direction:column; padding:0; overflow:hidden; }
.studio-user-card { display:flex; flex-direction:column; align-items:center; gap:.5rem;
    padding:1.5rem 1rem 1rem; border-bottom:1px solid var(--border); text-align:center; }
.studio-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; }
.studio-avatar.placeholder { display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1.4rem; color:var(--accent); background:var(--border); }
.studio-user-info { display:flex; flex-direction:column; }
.studio-user-info strong { font-size:.95rem; }
.studio-user-info .muted { font-size:.78rem; }
.verified-dot { color:var(--pos); font-weight:700; }
.studio-balance { margin-top:.25rem; }
.balance-num { font-size:1.3rem; font-weight:700; background:linear-gradient(90deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

.studio-nav { display:flex; flex-direction:column; padding:.5rem 0; flex:1; }
.studio-nav-item { display:flex; align-items:center; gap:.65rem; padding:.7rem 1.25rem;
    background:none; border:none; color:var(--muted); font-size:.88rem; cursor:pointer;
    transition: all .15s; text-align:left; border-left:3px solid transparent; }
.studio-nav-item:hover { color:var(--text); background:rgba(255,255,255,.03); }
.studio-nav-item.active { color:var(--text); background:rgba(255,61,138,.06);
    border-left-color:var(--accent); font-weight:600; }
.studio-nav-item svg { flex-shrink:0; opacity:.7; }
.studio-nav-item.active svg { opacity:1; }

/* Main */
.studio-main { background:var(--panel); border-radius:0 16px 16px 0; padding:0; overflow-y:auto; }
.studio-pane { padding:1.5rem 2rem; }
.studio-pane-header { margin-bottom:1.25rem; }
.studio-pane-header h2 { margin:0; font-size:1.35rem; }

/* Stats grid */
.studio-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.25rem; }
.stat-card { background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
    padding:1rem; text-align:center; }
.stat-label { display:block; font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.25rem; }
.stat-value { font-size:1.5rem; font-weight:700; }

/* Quick actions */
.studio-quick-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }

/* Recent TX preview */
.studio-recent-tx { margin-top:1.5rem; }
.studio-recent-tx h3 { margin:0 0 .75rem; font-size:1rem; }
.list.compact li { padding:.5rem .75rem; font-size:.85rem; }

/* Upload card */
.studio-upload-card { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:1.5rem; }

/* Profile form fieldsets */
.studio-profile-form fieldset { border:1px solid var(--border); border-radius:12px;
    padding:1.25rem; margin:0 0 1rem; }
.studio-profile-form fieldset legend { font-size:.9rem; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.04em; padding:0 .5rem; }

/* Pricing grid */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.pricing-card { background:var(--panel-2); border:1px solid var(--border); border-radius:14px;
    padding:1.25rem; text-align:center; }
.pricing-card-icon { font-size:2rem; margin-bottom:.5rem; }
.pricing-card h3 { margin:0 0 .25rem; font-size:1rem; }
.pricing-card .muted { font-size:.8rem; margin-bottom:.75rem; }
.pricing-card label { text-align:left; }

@media (max-width: 900px) {
    .studio-layout { grid-template-columns:1fr; }
    .studio-sidebar { border-radius:16px 16px 0 0; border-right:none; border-bottom:1px solid var(--border); }
    .studio-nav { flex-direction:row; overflow-x:auto; padding:.25rem .5rem; gap:0; }
    .studio-nav-item { border-left:none; border-bottom:3px solid transparent; padding:.6rem .85rem; white-space:nowrap; font-size:.82rem; }
    .studio-nav-item.active { border-left-color:transparent; border-bottom-color:var(--accent); }
    .studio-main { border-radius:0 0 16px 16px; }
    .studio-pane { padding:1.25rem 1rem; }
    .studio-stats { grid-template-columns:repeat(2,1fr); }
    .pricing-grid { grid-template-columns:1fr; }
}

/* First-run setup wizard */
.setup-shell { min-height: 100vh; display:flex; align-items:center; justify-content:center;
    padding: 2rem 1rem;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,61,138,0.18), transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(138,77,255,0.18), transparent 50%),
        var(--bg); }
.setup-card { width: 100%; max-width: 560px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 20px; padding: 2rem; }
.setup-head h1 { margin: 0 0 .25rem; }
.setup-head .grad { background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent; }
.steps { list-style:none; padding:0; margin: 1.25rem 0; display:flex; gap:.5rem;
    border-bottom:1px solid var(--border); padding-bottom:.75rem; }
.steps li { color: var(--muted); font-size:.85rem; padding:.25rem .65rem; border-radius:999px;
    border:1px solid var(--border); }
.steps li.active { color: var(--text); border-color: var(--accent); background: rgba(255,61,138,0.08); }
.step { border:0; padding:0; margin: 1.25rem 0 0; }
.step legend { font-size: 1.1rem; font-weight: 600; padding:0; margin-bottom:.5rem; }
.step .row.two { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.step input[type=color] { padding:0; height:42px; }
.setup-actions { display:flex; justify-content:space-between; gap:.5rem; margin-top: 1.25rem; }
.brand-preview { background: var(--panel-2); border:1px solid var(--border); border-radius: 12px;
    padding: 1rem 1.25rem; margin-top: .5rem; }
.brand-mark { display:flex; align-items:center; gap:.6rem; }
.brand-mark img { height: 28px; width: auto; }
.brand-mark strong { font-size: 1.3rem; letter-spacing:-0.01em; }
.setup-summary { list-style:none; padding:0; margin:.75rem 0 0; }
.setup-summary li { display:flex; justify-content:space-between; gap:1rem; align-items:center;
    padding:.5rem 0; border-bottom:1px solid var(--border); }
.setup-summary li span:first-child { color: var(--muted); }
.swatch { display:inline-block; width:14px; height:14px; border-radius:3px;
    border:1px solid var(--border); vertical-align: middle; margin-right:.25rem; }

.footer { padding: 2rem 0; border-top: 1px solid var(--border); color: var(--muted); margin-top: 3rem; }
.footer .container { display:flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* Credits page */
.credits-page { max-width: 900px; margin: 0 auto; }
.credits-header { text-align: center; margin-bottom: 2rem; }
.credits-header h1 { margin: 0 0 .5rem; }
.credits-balance { display: inline-flex; align-items: center; gap: .75rem;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
    padding: .75rem 1.5rem; margin-top: 1rem; }
.balance-label { color: var(--muted); font-size: .85rem; }
.balance-amount { font-size: 1.75rem; color: var(--accent); }

.credits-banner { padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.credits-banner.success { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); color: var(--pos); }
.credits-banner.warning { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24; }

.packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 2.5rem; }
.pkg-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
    padding: 1.75rem 1.25rem; text-align: center; position: relative;
    transition: border-color .2s, transform .2s, box-shadow .2s; }
.pkg-card:hover { border-color: var(--accent); transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255,61,138,0.12); }
.pkg-card.popular { border-color: var(--accent); }
.pkg-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700;
    padding: .25rem .75rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.pkg-name { margin: 0 0 .75rem; font-size: 1.1rem; }
.pkg-credits { font-size: 2.25rem; font-weight: 800; color: var(--text); line-height: 1; }
.pkg-credits-label { font-size: .8rem; color: var(--muted); margin-bottom: .75rem; }
.pkg-price { font-size: 1.15rem; font-weight: 600; margin-bottom: .25rem; }
.pkg-rate { font-size: .78rem; color: var(--muted); margin-bottom: 1rem; }
.pkg-buy { width: 100%; }

.credits-history { margin-top: 1rem; }
.credits-history h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.tx-list { display: flex; flex-direction: column; gap: 0; }
.tx-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center;
    padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.tx-row:last-child { border-bottom: none; }
.tx-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tx-type { font-size: .88rem; }
.tx-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amount { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.tx-amount.positive { color: var(--pos); }
.tx-amount.negative { color: var(--neg, #f87171); }
.tx-date { font-size: .78rem; white-space: nowrap; }

@media (max-width: 600px) {
    .packages-grid { grid-template-columns: 1fr 1fr; }
    .tx-row { grid-template-columns: 1fr auto; }
    .tx-date { display: none; }
}

@media (max-width: 760px) {
    .hero h1 { font-size: 2rem; }
    .chat-layout { grid-template-columns: 1fr; }
    .list li { grid-template-columns: 1fr; gap:.25rem; }
}

/* ═══════════════════════════════════════════
   Age-Gate Modal
   ═══════════════════════════════════════════ */
.age-gate {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.age-gate-backdrop {
    position: absolute; inset: 0;
    background: rgba(7,6,12,0.88);
    backdrop-filter: blur(18px) saturate(0.6);
    -webkit-backdrop-filter: blur(18px) saturate(0.6);
}
.age-gate-card {
    position: relative; z-index: 1;
    background: var(--panel);
    border: 1px solid rgba(255,61,138,0.25);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    max-width: 480px; width: 100%;
    text-align: center;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(138,77,255,0.12);
    animation: age-gate-in .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes age-gate-in {
    from { opacity:0; transform:translateY(24px) scale(.96); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.age-gate-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,61,138,.15), rgba(138,77,255,.15));
    border: 1px solid rgba(255,61,138,.3);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--accent);
}
.age-gate-title {
    font-size: 1.75rem; font-weight: 800; margin: 0 0 .25rem;
    letter-spacing: -.03em;
}
.age-gate-age {
    font-size: 2.8rem; font-weight: 900; margin: 0 0 1rem;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    line-height: 1;
}
.age-gate-desc {
    color: var(--muted); font-size: .92rem; line-height: 1.6;
    margin: 0 0 1rem;
}
.age-gate-legal {
    background: rgba(255,61,138,.05);
    border: 1px solid rgba(255,61,138,.12);
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .78rem; color: var(--muted); line-height: 1.5;
    margin-bottom: 1.5rem;
}
.age-gate-actions {
    display: flex; flex-direction: column; gap: .75rem;
}
.age-gate-enter {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    font-size: 1rem; padding: .85rem 1.5rem; border-radius: 12px;
    box-shadow: 0 4px 24px rgba(255,61,138,.35);
    transition: transform .15s, box-shadow .15s;
    border: none; cursor: pointer; color: #fff; font-weight: 700;
}
.age-gate-enter:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,61,138,.45); }
.age-gate-leave {
    font-size: .88rem; color: var(--muted);
    border-color: var(--border);
}
.age-gate-cookie {
    font-size: .74rem; color: var(--muted); margin: 1rem 0 0;
    opacity: .7;
}

/* ═══════════════════════════════════════════
   Landing Page — Hero
   ═══════════════════════════════════════════ */
.lp-hero {
    position: relative; overflow: hidden;
    min-height: 90vh;
    display: flex; align-items: center;
    padding: 5rem 0 4rem;
}
.lp-hero-glow {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(90px); opacity: .55;
}
.lp-hero-glow-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--accent-2), transparent 70%);
    top: -120px; right: -80px;
}
.lp-hero-glow-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    bottom: -100px; left: -60px;
    opacity: .35;
}
.lp-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: center;
}
.lp-hero-content { display: flex; flex-direction: column; gap: 1.25rem; }
.lp-hero-badge {
    display: inline-flex; align-items: center;
    background: rgba(255,61,138,.12);
    border: 1px solid rgba(255,61,138,.3);
    color: var(--accent); font-size: .78rem; font-weight: 700;
    padding: .3rem .85rem; border-radius: 999px;
    letter-spacing: .04em; text-transform: uppercase;
    width: fit-content;
}
.lp-hero-title {
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 900; line-height: 1.08;
    letter-spacing: -.03em; margin: 0;
}
.lp-hero-grad {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.lp-hero-lead {
    color: var(--muted); font-size: 1.1rem; line-height: 1.65;
    max-width: 500px; margin: 0;
}
.lp-cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.lp-cta-primary {
    box-shadow: 0 6px 28px rgba(255,61,138,.35);
}
.lp-cta-primary:hover { box-shadow: 0 10px 40px rgba(255,61,138,.5); }
.lp-trust {
    display: flex; align-items: center; gap: .6rem;
    flex-wrap: wrap; color: var(--muted); font-size: .8rem;
}
.lp-trust-item { display: flex; align-items: center; gap: .3rem; }
.lp-trust-sep { opacity: .4; }

/* Hero floating cards */
.lp-hero-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    position: relative;
}
.lp-hero-card {
    border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 16px 48px rgba(0,0,0,.4);
    transition: transform .3s;
}
.lp-hero-card:hover { transform: translateY(-4px); }
.lp-hero-card-1 { grid-column: 1; grid-row: 1 / span 2; }
.lp-hero-card-2 { grid-column: 2; grid-row: 1; }
.lp-hero-card-3 { grid-column: 2; grid-row: 2; }
.lp-hero-card-img {
    aspect-ratio: 3/4; background-size: cover; background-position: center top;
    background-color: var(--panel-2);
}
.lp-hero-card-1 .lp-hero-card-img { aspect-ratio: 3/5; }
.lp-hero-card-2 .lp-hero-card-img,
.lp-hero-card-3 .lp-hero-card-img { aspect-ratio: 3/3.5; }
.lp-hero-card-info {
    padding: .5rem .75rem;
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; font-weight: 600;
    background: var(--panel);
}

/* ═══════════════════════════════════════════
   Landing Page — Features strip
   ═══════════════════════════════════════════ */
.lp-features {
    background: var(--panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0;
}
.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.lp-feature { display: flex; flex-direction: column; gap: .65rem; }
.lp-feature-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,61,138,.15), rgba(138,77,255,.15));
    border: 1px solid rgba(138,77,255,.2);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-2);
}
.lp-feature h3 { font-size: .97rem; font-weight: 700; margin: 0; }
.lp-feature .muted { font-size: .84rem; line-height: 1.55; }

/* ═══════════════════════════════════════════
   Landing Page — Creators grid
   ═══════════════════════════════════════════ */
.lp-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}
.lp-section-title {
    font-size: 1.75rem; font-weight: 800;
    letter-spacing: -.03em; margin: 0 0 .25rem;
}
.lp-empty { margin-top: 2rem; }
.lp-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}
.lp-model-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--text);
    display: flex; flex-direction: column;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lp-model-card:hover {
    transform: translateY(-5px); border-color: var(--accent);
    box-shadow: 0 12px 40px rgba(255,61,138,.14);
}
.lp-model-img {
    aspect-ratio: 3/4; background-size: cover; background-position: center top;
    background-color: var(--panel-2); position: relative;
    transition: transform .35s;
}
.lp-model-card:hover .lp-model-img { transform: scale(1.03); }
.lp-verified-badge {
    position: absolute; top: .6rem; left: .6rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: .68rem; font-weight: 700;
    padding: .18rem .5rem; border-radius: 999px;
}
.lp-model-body {
    padding: .75rem .9rem .9rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.lp-model-name { font-size: .92rem; font-weight: 700; }
.lp-model-handle { font-size: .78rem; }
.lp-model-loc {
    display: flex; align-items: center; gap: .25rem;
    font-size: .76rem; margin-top: .1rem;
}

/* ═══════════════════════════════════════════
   Landing Page — Credit packages
   ═══════════════════════════════════════════ */
.lp-packages { background: var(--panel); border-top: 1px solid var(--border); }
.lp-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.25rem;
}
.lp-pack {
    background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 20px; padding: 1.75rem 1.25rem;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    text-align: center; position: relative;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lp-pack:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 8px 32px rgba(255,61,138,.12); }
.lp-pack-featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 12px 48px rgba(255,61,138,.18);
    background: linear-gradient(160deg, rgba(255,61,138,.06), var(--panel-2));
}
.lp-pack-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: .7rem; font-weight: 700;
    padding: .2rem .8rem; border-radius: 999px; white-space: nowrap;
}
.lp-pack-credits {
    font-size: 2.8rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    margin-top: .5rem;
}
.lp-pack-label { font-size: .78rem; color: var(--muted); }
.lp-pack-name { font-size: .88rem; font-weight: 600; margin-top: .25rem; }
.lp-pack-price { font-size: 1.5rem; font-weight: 800; margin: .25rem 0 .75rem; }
.lp-pack-btn { width: 100%; }

/* ═══════════════════════════════════════════
   Landing Page — Bottom CTA
   ═══════════════════════════════════════════ */
.lp-bottom-cta {
    position: relative; overflow: hidden;
    padding: 6rem 0; text-align: center;
}
.lp-bottom-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(138,77,255,.2), transparent 65%);
    pointer-events: none;
}
.lp-bottom-inner { position: relative; }
.lp-bottom-inner h2 {
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;
    letter-spacing: -.03em; margin: 0 0 .75rem;
}
.lp-bottom-inner .muted { font-size: 1.05rem; margin-bottom: 2rem; }
.lp-bottom-inner .lp-cta { justify-content: center; }

/* ═══════════════════════════════════════════
   Landing Page — Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .lp-hero-inner { grid-template-columns: 1fr; }
    .lp-hero-cards { display: none; }
    .lp-hero { min-height: auto; padding: 4rem 0 3rem; }
    .lp-features-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 600px) {
    .lp-features-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .lp-model-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
    .lp-packages-grid { grid-template-columns: 1fr 1fr; }
    .lp-section-head { flex-direction: column; align-items: flex-start; }
    .lp-hero-title { font-size: 2.2rem; }
    .age-gate-card { padding: 2rem 1.25rem; }
    .age-gate-title { font-size: 1.4rem; }
}

/* ═══════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════ */
.footer {
    border-top: 1px solid var(--border);
    padding: 2rem 0 1.5rem;
    margin-top: 4rem;
    font-size: .82rem;
    color: var(--muted);
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.footer-logo {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}
.footer-badge {
    background: rgba(255,61,138,.12);
    border: 1px solid rgba(255,61,138,.25);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .75rem;
    color: var(--accent);
    font-weight: 600;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.25rem;
}
.footer-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color .15s;
}
.footer-links a:hover { color: var(--text); }
.footer-copy { color: var(--muted); }

/* ═══════════════════════════════════════════
   Legal Pages
   ═══════════════════════════════════════════ */
.legal-page { padding-top: 3rem; padding-bottom: 4rem; }
.legal-container { max-width: 780px; margin: 0 auto; }
.legal-title {
    font-size: 2rem; font-weight: 900;
    letter-spacing: -.03em; margin-bottom: .35rem;
}
.legal-updated {
    color: var(--muted); font-size: .85rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.legal-section { margin-bottom: 2.25rem; }
.legal-section h2 {
    font-size: 1.1rem; font-weight: 700;
    margin: 0 0 .6rem;
    color: var(--text);
}
.legal-section h3 {
    font-size: .95rem; font-weight: 600;
    margin: 1rem 0 .4rem;
    color: var(--text);
}
.legal-section p, .legal-section li {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.75;
}
.legal-section ul {
    padding-left: 1.4rem;
    margin: .5rem 0;
}
.legal-section a { color: var(--accent); text-decoration: underline; }
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
    margin-top: .5rem;
}
.legal-table th, .legal-table td {
    text-align: left;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    color: var(--muted);
    vertical-align: top;
}
.legal-table th {
    background: var(--panel-2);
    color: var(--text);
    font-weight: 600;
}
.legal-table code {
    background: var(--panel-2);
    border-radius: 4px;
    padding: .1rem .35rem;
    font-size: .8rem;
    color: var(--accent);
}
@media (max-width: 600px) {
    .legal-title { font-size: 1.5rem; }
    .legal-table { font-size: .75rem; }
    .legal-table th, .legal-table td { padding: .4rem .5rem; }
}

/* ═══════════════════════════════════════════
   Admin Panel Layout
   ═══════════════════════════════════════════ */
:root {
    --admin-sidebar-w: 240px;
    --admin-topbar-h: 56px;
}
.admin-body {
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}
/* Sidebar */
.admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--admin-sidebar-w);
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    z-index: 300;
    transition: transform .25s cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
}
.admin-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem .85rem;
    border-bottom: 1px solid var(--border);
    gap: .5rem;
}
.admin-brand {
    font-weight: 800; font-size: 1.1rem;
    color: var(--text); text-decoration: none;
    display: flex; align-items: center; gap: .4rem;
}
.admin-badge {
    font-size: .62rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; background: var(--accent);
    color: #fff; border-radius: 6px; padding: .18rem .45rem;
}
.admin-nav { padding: .75rem .5rem; flex: 1; }
.admin-nav-section-label {
    font-size: .66rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
    padding: .9rem .65rem .3rem;
}
.admin-nav-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .75rem; border-radius: 8px;
    color: var(--muted); text-decoration: none;
    font-size: .875rem; font-weight: 500;
    transition: background .12s, color .12s;
    margin-bottom: .1rem;
}
.admin-nav-item:hover { background: var(--panel-2); color: var(--text); }
.admin-nav-item.active { background: rgba(255,61,138,.12); color: var(--accent); }
.admin-nav-item svg { flex-shrink: 0; }
.admin-sidebar-footer {
    padding: .75rem .5rem;
    border-top: 1px solid var(--border);
}
/* Main content */
.admin-content-wrap {
    margin-left: var(--admin-sidebar-w);
    flex: 1; min-height: 100vh;
    display: flex; flex-direction: column;
}
.admin-topbar {
    position: sticky; top: 0;
    height: var(--admin-topbar-h);
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 1.5rem; gap: 1rem;
    z-index: 200;
}
.admin-menu-btn {
    display: none; background: none; border: none;
    color: var(--text); cursor: pointer; padding: .4rem;
    border-radius: 8px;
}
.admin-menu-btn:hover { background: var(--panel-2); }
.admin-topbar-title { font-weight: 700; font-size: 1rem; flex: 1; }
.admin-topbar-right { margin-left: auto; }
.admin-main { padding: 1.75rem; flex: 1; max-width: 1400px; }
.admin-overlay { display: none; }
/* Page header */
.admin-page-header {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem; flex-wrap: wrap;
}
.admin-page-header h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
/* Cards */
.admin-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
}
.admin-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; gap: .5rem;
}
.admin-card-header h3 { margin: 0; font-size: .95rem; }
/* Stats grid */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.admin-stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex; align-items: center; gap: .9rem;
}
.admin-stat-icon { border-radius: 10px; padding: .6rem; display: flex; }
.admin-stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.admin-stat-label { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
/* Row layout */
.admin-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
/* Table */
.admin-table {
    width: 100%; border-collapse: collapse; font-size: .875rem;
}
.admin-table th {
    text-align: left; font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); padding: .65rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}
.admin-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--panel-2); }
/* List */
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.1rem; border-bottom: 1px solid var(--border);
    font-size: .875rem;
}
.admin-list-item:last-child { border-bottom: none; }
.admin-list-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2, #8a4dff));
    color: #fff; font-weight: 700; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.admin-list-info { flex: 1; min-width: 0; }
.admin-list-info strong { display: block; }
.admin-list-info span { font-size: .78rem; color: var(--muted); }
/* Forms */
.admin-input {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: .5rem .75rem; font-size: .875rem;
    outline: none; transition: border-color .15s;
    box-sizing: border-box;
}
.admin-input:focus { border-color: var(--accent); }
.admin-select {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: .45rem .75rem; font-size: .875rem;
    cursor: pointer;
}
.admin-textarea {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: .5rem .75rem; font-size: .875rem;
    width: 100%; box-sizing: border-box; resize: vertical;
    outline: none; transition: border-color .15s;
}
.admin-textarea:focus { border-color: var(--accent); }
.admin-label { font-size: .78rem; color: var(--muted); font-weight: 600; display: block; margin-bottom: .3rem; }
.admin-filter-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.admin-check-row {
    display: flex; align-items: center; gap: .5rem;
    cursor: pointer; font-size: .875rem;
}
/* User badges */
.user-badge {
    font-size: .68rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; border-radius: 999px;
    padding: .18rem .55rem; white-space: nowrap;
}
.user-badge.active    { background: rgba(34,197,94,.12); color: #4ade80; }
.user-badge.suspended { background: rgba(239,68,68,.12); color: #f87171; }
.user-badge.verified  { background: rgba(255,61,138,.12); color: var(--accent); }
.user-badge.pending   { background: rgba(245,158,11,.12); color: #f59e0b; }
.user-badge.ok        { background: rgba(34,197,94,.12); color: #4ade80; }
.user-badge.warn      { background: rgba(239,68,68,.1); color: #f87171; }
/* Role badges */
.user-role-badge {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; border-radius: 6px;
    padding: .2rem .55rem; white-space: nowrap;
}
.user-role-badge.role-0 { background: rgba(148,163,184,.1); color: var(--muted); }
.user-role-badge.role-1 { background: rgba(255,61,138,.12); color: var(--accent); }
.user-role-badge.role-2 { background: rgba(239,68,68,.1); color: #f87171; }
/* Modal */
.admin-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    z-index: 800;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s;
}
.admin-modal-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }
.admin-modal {
    position: fixed; right: 0; top: 0; bottom: 0;
    width: min(620px, 100vw);
    background: var(--panel); border-left: 1px solid var(--border);
    z-index: 900; overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden; pointer-events: none;
    transition: transform .28s cubic-bezier(.16,1,.3,1), visibility 0s .28s;
}
.admin-modal.open {
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
    transition: transform .28s cubic-bezier(.16,1,.3,1), visibility 0s 0s;
}
.admin-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--panel); z-index: 10;
}
.admin-modal-close {
    background: none; border: none; color: var(--muted);
    cursor: pointer; font-size: 1.1rem; padding: .25rem .4rem;
    border-radius: 6px; line-height: 1;
}
.admin-modal-close:hover { background: var(--panel-2); color: var(--text); }
/* User detail inside modal */
.admin-user-detail { display: flex; flex-direction: column; gap: 1.25rem; }
.admin-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.admin-detail-grid > div { display: flex; flex-direction: column; gap: .2rem; }
.admin-detail-grid label { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.admin-action-section { padding-top: 1rem; border-top: 1px solid var(--border); }
.admin-action-section h3 { margin: 0 0 .75rem; font-size: .88rem; }
.admin-action-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.admin-ban-box {
    background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.2);
    border-radius: 10px; padding: .9rem 1rem;
}
.admin-ban-box strong { color: #f87171; }
.admin-ban-box p { margin: .35rem 0 0; font-size: .88rem; }
.admin-notes-box {
    background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.2);
    border-radius: 10px; padding: .9rem 1rem;
}
.admin-notes-box strong { color: #f59e0b; display: block; margin-bottom: .3rem; }
/* Mobile responsive */
@media (max-width: 768px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.4); }
    .admin-content-wrap { margin-left: 0; }
    .admin-menu-btn { display: flex; }
    .admin-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 250; opacity: 0; pointer-events: none; transition: opacity .25s; }
    .admin-overlay.open { opacity: 1; pointer-events: all; }
    .admin-main { padding: 1rem; }
    .admin-detail-grid { grid-template-columns: 1fr; }
    .admin-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════
   Support Tickets
   ═══════════════════════════════════════════ */
.ticket-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: .6rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ticket-card:hover { border-color: var(--accent); background: var(--panel-2); }
.ticket-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
}
.ticket-subject { font-size: .92rem; display: block; margin-top: .2rem; }
.ticket-cat {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--accent);
}
.ticket-card-meta {
    display: flex; gap: 1rem;
    font-size: .78rem; color: var(--muted);
    margin-top: .5rem;
}
.ticket-status-badge {
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; border-radius: 999px;
    padding: .2rem .65rem; white-space: nowrap;
}
.ticket-status-open     { background: rgba(59,130,246,.15); color: #60a5fa; }
.ticket-status-progress { background: rgba(245,158,11,.15); color: #f59e0b; }
.ticket-status-resolved { background: rgba(34,197,94,.15);  color: #4ade80; }
.ticket-status-closed   { background: rgba(148,163,184,.12); color: var(--muted); }

.ticket-reply {
    border-radius: 10px;
    padding: .85rem 1rem;
}
.ticket-reply-user  { background: var(--panel); border: 1px solid var(--border); }
.ticket-reply-staff { background: rgba(138,77,255,.08); border: 1px solid rgba(138,77,255,.2); }
.ticket-reply-head  { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .1rem; }

/* ═══════════════════════════════════════════
   Global Credit Confirm Modal
   ═══════════════════════════════════════════ */
.ccm-inner {
    text-align: center;
    padding: 2rem 1.75rem 1.75rem;
    max-width: 420px;
    animation: age-gate-in .3s cubic-bezier(.16,1,.3,1) both;
}
.ccm-icon {
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: .75rem;
}
.ccm-title {
    font-size: 1.35rem; font-weight: 800;
    letter-spacing: -.02em; margin: 0 0 .5rem;
}
.ccm-body {
    color: var(--muted); font-size: .9rem;
    line-height: 1.6; margin: 0 0 1rem;
}
.ccm-cost {
    background: linear-gradient(135deg, rgba(255,61,138,.08), rgba(138,77,255,.08));
    border: 1px solid rgba(255,61,138,.2);
    border-radius: 12px;
    padding: .75rem 1.25rem;
    font-size: 1.5rem; font-weight: 900;
    background-clip: text; -webkit-background-clip: text;
    color: var(--accent);
    margin-bottom: .75rem;
}
.ccm-note {
    font-size: .78rem; color: var(--muted);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .85rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.ccm-actions {
    display: flex; flex-direction: column; gap: .6rem;
}
.ccm-actions .btn-primary { font-size: .95rem; padding: .75rem 1.5rem; }
.ccm-actions .btn-ghost   { font-size: .85rem; }

/* ===============================
   Professional Animations
   =============================== */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Page content fade in */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* Main content area animation */
main, .admin-main {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cards stagger animation */
.card, .admin-card {
    animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.2s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.3s; }

/* Enhanced button micro-interactions */
.btn {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 61, 138, 0.25);
}

.btn:hover::after { opacity: 1; }

.btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px rgba(255, 61, 138, 0.15);
}

.btn-ghost:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background: var(--panel-2);
}

/* Enhanced card hover */
.card, .admin-card {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover, .admin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    border-color: var(--accent);
}

/* Input focus glow animation */
.form input, .form textarea, .form select, .search, .admin-input, .admin-textarea {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.form input:focus, .form textarea:focus, .form select:focus, .search:focus,
.admin-input:focus, .admin-textarea:focus {
    box-shadow: 0 0 0 3px rgba(255, 61, 138, 0.15);
    transform: translateY(-1px);
}

/* Modal animations */
.modal {
    animation: fadeIn 0.2s ease;
}

.modal-inner {
    animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Admin sidebar item animations */
.admin-nav-item {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.admin-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-nav-item:hover {
    background: rgba(255, 61, 138, 0.06);
    padding-left: 1.35rem;
}

.admin-nav-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

.admin-nav-item.active {
    background: rgba(255, 61, 138, 0.1);
    color: var(--accent);
}

/* Topbar navigation hover enhancement */
.nav-item {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item:hover {
    transform: translateY(-1px);
}

/* Avatar hover pulse */
.avatar-circle {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-avatar:hover .avatar-circle {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 61, 138, 0.3);
}

/* Loading shimmer for skeleton states */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Table row hover slide */
.admin-table tbody tr {
    transition: all 0.15s ease;
}

.admin-table tbody tr:hover {
    background: rgba(255, 61, 138, 0.04);
    transform: translateX(4px);
}

/* Badge subtle pulse on hover */
.user-badge, .user-role-badge {
    transition: all 0.2s ease;
}

.user-badge:hover, .user-role-badge:hover {
    transform: scale(1.05);
}

/* Link underline animation */
a:not(.btn):not(.nav-item) {
    position: relative;
}

a:not(.btn):not(.nav-item)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

a:not(.btn):not(.nav-item):hover::after {
    width: 100%;
}

/* Dropdown/select styling */
.admin-select, select {
    transition: all 0.2s ease;
    cursor: pointer;
}

.admin-select:hover, select:hover {
    border-color: var(--accent);
}

/* Toast/notification slide in */
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.toast, .notification {
    animation: slideInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Image hover zoom (for content cards) */
.card img, .tl-media img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover img, .tl-media:hover img {
    transform: scale(1.03);
}

/* Admin modal backdrop blur animation */
.admin-modal-backdrop {
    transition: opacity 0.25s ease, visibility 0.25s;
}

.admin-modal {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.28s;
}

.admin-modal.open {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
}

/* Focus visible for accessibility */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}