/* VEXO Creator Economy (demo). Calm look: dark surfaces, #3d7bf5 accent, subtle borders, no glows. */
:root{--ce-a:var(--vx-accent,#3d7bf5);--ce-p:var(--panel,#141417);--ce-r:var(--raised,#1b1b1f);--ce-b:var(--border,#26262b);--ce-m:var(--muted,#8e8e93)}
.ce{max-width:1080px;margin:0 auto;animation:ce-in .25s ease}
@keyframes ce-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ce{animation:none}}
.ce-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--ce-b);margin-bottom:22px;scrollbar-width:none}
.ce-tabs a{padding:9px 12px;color:var(--ce-m);text-decoration:none;font-size:14px;font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.ce-tabs a:hover{color:var(--text,#f2f2f4)}.ce-tabs a.on{color:var(--text,#f2f2f4);border-color:var(--ce-a)}
.ce-hero{margin:6px 0 16px}.ce-hero h1{font-size:32px;margin:6px 0;letter-spacing:-.01em}.ce-hero p{color:var(--ce-m);margin:0;font-size:15px}
.ce-kicker,.ce-tag{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ce-m)}
.ce-demo{display:flex;gap:10px;align-items:center;border:1px solid var(--ce-b);background:var(--ce-p);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--ce-m);margin:0 0 20px}
.ce-demo b{color:#fff;background:var(--ce-a);border-radius:6px;padding:2px 8px;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.ce-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}
.ce-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
.ce-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:start}.ce-split>div{display:grid;gap:14px}
.ce-card{display:flex;flex-direction:column;gap:8px;background:var(--ce-p);border:1px solid var(--ce-b);border-radius:14px;padding:20px;transition:border-color .15s,transform .15s;color:inherit;text-decoration:none}
.ce-card:hover{border-color:var(--border-strong,#323238)}.ce-link:hover{transform:translateY(-1px)}
.ce-hl{border-color:color-mix(in srgb,var(--ce-a) 55%,var(--ce-b))}
.ce-card h3{margin:2px 0;font-size:18px}.ce-card .button{margin-top:auto;justify-content:center}
.ce-card-top{display:flex;justify-content:space-between;align-items:center}
.ce-pop{font-size:11px;font-weight:600;color:var(--ce-a)}
.ce-price{font-size:30px;font-weight:700;margin:2px 0 6px;letter-spacing:-.01em}.ce-price small{font-size:13px;color:var(--ce-m);font-weight:500;margin-left:4px}
.ce-sm .ce-price{font-size:24px}
.ce-feat{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:7px;font-size:14px}
.ce-feat li{padding-left:22px;position:relative;color:#d1d1d6}.ce-feat li::before{content:"";position:absolute;left:3px;top:5px;width:9px;height:5px;border-left:2px solid var(--ce-a);border-bottom:2px solid var(--ce-a);transform:rotate(-45deg)}
.ce-h2{font-size:18px;margin:6px 0 6px}
.ce-soon,.ce-chip{display:inline-block;font-size:11px;font-weight:600;color:var(--ce-m);border:1px solid var(--ce-b);border-radius:999px;padding:2px 8px;width:max-content;vertical-align:middle}
.ce-spon{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ce-m)}
.ce-swatches{display:flex;gap:6px}.ce-sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--ce-b)}
.ce-sw-midnight,.ce-pt-midnight .ce-tcov{background:#0d1220}.ce-sw-electric,.ce-pt-electric .ce-tcov{background:#3d7bf5}.ce-sw-frost,.ce-pt-frost .ce-tcov{background:#cfd6e0}.ce-sw-glass,.ce-pt-glass .ce-tcov{background:linear-gradient(135deg,#2a2f3a,#5b6474)}.ce-sw-minimal,.ce-pt-minimal .ce-tcov{background:#1b1b1f}
.ce-faq details{border-top:1px solid var(--ce-b);padding:12px 0}.ce-faq summary{cursor:pointer;font-weight:600}.ce-faq p{color:var(--ce-m);margin:8px 0 0}
.ce-prev{background:var(--ce-p);border:1px solid var(--ce-b);border-radius:14px;padding:16px}
.ce-prev-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600}
.ce-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:8px 0 12px}
.ce-stats>div{background:var(--ce-r);border:1px solid var(--ce-b);border-radius:10px;padding:10px 12px}.ce-stats small{display:block;color:var(--ce-m);font-size:12px}.ce-stats b{font-size:20px}
.ce-chart{display:flex;align-items:flex-end;gap:5px;height:70px;padding:8px;border:1px dashed var(--ce-b);border-radius:10px}.ce-chart i{flex:1;height:8px;background:var(--ce-r);border-radius:3px}
.ce-rows{display:grid;gap:6px}.ce-rows>div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--ce-r);border-radius:8px;font-size:14px}.ce-rows>div span:last-child{color:var(--ce-m)}
.ce-name{font-size:18px;font-weight:600;margin:0}
.ce-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:5px;padding:2px 6px;margin-left:6px;vertical-align:middle;line-height:1.3}
.ce-badge.ce-pro{background:var(--vx-accent,#3d7bf5);color:#fff}.ce-badge.ce-studio{background:#f2f2f4;color:#0b0b0d}
.ce-meter{height:8px;background:var(--ce-r);border-radius:99px;overflow:hidden;margin-bottom:8px}.ce-meter span{display:block;height:100%;background:var(--ce-a)}
.ce-fake{display:flex;justify-content:space-between;padding:9px 12px;background:var(--ce-r);border-radius:8px;margin-bottom:6px;font-size:14px}.ce-fake span{color:var(--ce-m)}
.ce-chat{display:grid;gap:8px}.ce-q{justify-self:end;background:var(--ce-a);color:#fff;border-radius:12px 12px 4px 12px;padding:8px 12px;margin:0;font-size:14px}
.ce-code{background:#0b0b0d;border:1px solid var(--ce-b);border-radius:10px;padding:12px;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d1d1d6;overflow-x:auto;margin:0}
.ce-input{display:flex;gap:8px;margin-top:10px}.ce-input input{flex:1;min-width:0}
.ce-wide{width:100%;justify-content:center}
.ce-theme .ce-tprev{position:relative;height:110px;border-radius:10px;overflow:hidden;border:1px solid var(--ce-b);background:#0b0b0d}
.ce-tcov{height:48px}.ce-tav{position:absolute;left:12px;top:32px;width:34px;height:34px;border-radius:50%;background:#2c2c31;border:3px solid #0b0b0d}
.ce-tprev i{display:block;height:7px;border-radius:4px;background:#26262b;margin:26px 12px 0 54px;width:45%}.ce-tprev i+i{margin-top:8px;width:30%}
.ce-pt-frost{background:#1c2129!important}.ce-pt-glass{background:#14161b!important}.ce-pt-electric i:first-of-type{background:#3d7bf5}
.ce-table{border:1px solid var(--ce-b);border-radius:12px;overflow:hidden;margin-bottom:18px}
.ce-tr{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr 0.8fr;gap:10px;padding:10px 14px;border-top:1px solid var(--ce-b);font-size:14px;align-items:center}
.ce-tr:first-child{border-top:0}.ce-th{background:var(--ce-r);color:var(--ce-m);font-size:12px;font-weight:600}
.ce-empty{padding:14px;border:1px dashed var(--ce-b);border-radius:10px}
.ce-sponsored{margin:0 0 16px}
/* Checkout modal */
.ce-modal{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px;animation:ce-in .18s ease}
.ce-dialog{position:relative;width:min(440px,100%);background:#141417;border:1px solid #26262b;border-radius:16px;padding:22px;display:grid;gap:10px}
.ce-dialog h2{margin:0 0 4px}.ce-x{position:absolute;right:12px;top:10px;background:none;border:0;color:#8e8e93;font-size:22px;cursor:pointer}
.ce-demo-strong{justify-self:start;background:#3d7bf5;color:#fff;font-weight:700;font-size:12px;border-radius:6px;padding:4px 10px;letter-spacing:.02em}
.ce-line{display:flex;justify-content:space-between;font-size:14px;color:#d1d1d6}.ce-total{border-top:1px solid #26262b;padding-top:10px;font-size:16px;color:#f2f2f4}
.ce-pay{display:grid;gap:4px;border:1px dashed #323238;border-radius:10px;padding:12px;font-size:13px;color:#8e8e93}.ce-pay b{color:#f2f2f4}
.ce-mact{display:grid;gap:8px}.ce-mact .button{justify-content:center}
/* Admin */
.ce-admin-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;align-items:end;margin-bottom:14px}.ce-inl{display:flex;gap:8px;align-items:center}
/* Profile themes on profile pages (members only) */
.profile-shell.ce-pt-midnight{--panel:#0d1220}.profile-shell.ce-pt-midnight .profile-cover{background:#0d1220}
.profile-shell.ce-pt-electric .profile-cover{background:#3d7bf5}.profile-shell.ce-pt-electric h1{color:#fff}.profile-shell.ce-pt-electric .profile-tabs a[aria-current]{border-color:#3d7bf5}
.profile-shell.ce-pt-frost .profile-cover{background:#cfd6e0}.profile-shell.ce-pt-frost .profile-info{background:#1c2129;border-radius:14px}
.profile-shell.ce-pt-glass .profile-info{background:rgba(30,32,38,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px}
.profile-shell.ce-pt-minimal .profile-cover{background:#141417}.profile-shell.ce-pt-minimal h1{font-weight:800;letter-spacing:-.02em}
/* Responsive + iPhone app */
@media (max-width:860px){.ce-grid3{grid-template-columns:1fr 1fr}.ce-split{grid-template-columns:1fr}}
@media (max-width:600px){.ce-grid2,.ce-grid3{grid-template-columns:1fr}.ce-hero h1{font-size:26px}.ce-tr{grid-template-columns:1.6fr 1fr 1fr;font-size:13px}.ce-tr span:nth-child(n+4){display:none}}
html.vexo-ios-app .ce{padding:0 2px 24px}html.vexo-ios-app .ce-tabs{margin:0 -16px 16px;padding:0 12px}
html.vexo-ios-app .ce-hero h1{font-size:26px}html.vexo-ios-app .ce-card{border-radius:16px;padding:18px}
html.vexo-ios-app .ce-grid2,html.vexo-ios-app .ce-grid3,html.vexo-ios-app .ce-split{grid-template-columns:1fr}
html.vexo-ios-app .ce-modal{align-items:end;padding:0}html.vexo-ios-app .ce-dialog{width:100%;border-radius:18px 18px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom))}
.ce-sponsored .ce-card{padding:16px 18px}.ce-sponsored .ce-card h3{font-size:16px}
.ce-pinned{position:relative;overflow:visible!important;outline:1px solid color-mix(in srgb,var(--ce-a) 45%,transparent);outline-offset:-1px}
.ce-spon-tag{position:absolute;top:-8px;right:12px;line-height:1.2;z-index:2;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ce-m);background:var(--ce-r);border:1px solid var(--ce-b);border-radius:6px;padding:2px 7px;pointer-events:none}
