/* ============================================================ ZENAVIA CREATORS — Design System v2 (replaces style.css) Light-first "content-creator / iOS" style, cyan Zenavia accent. Light + dark via [data-theme] on . Borderless cards + soft shadows in light; hairline borders in dark. Glass navbar. Fonts: Bricolage Grotesque (display) + Hanken Grotesk (UI). ============================================================ */ :root{ --bg: oklch(0.985 0.003 240); --panel: oklch(1 0 0); --panel-2: oklch(0.965 0.005 240); --glass: oklch(1 0 0 / 0.62); --track: oklch(0.925 0.006 245); --line: oklch(0.915 0.005 245); --line-2: oklch(0.86 0.006 245); --ink: oklch(0.24 0.012 255); --ink-2: oklch(0.46 0.012 255); --ink-3: oklch(0.60 0.010 255); --cyan: oklch(0.70 0.135 226); --cyan-deep:oklch(0.56 0.155 245); --cyan-ink: oklch(0.52 0.15 240); --cyan-tint:oklch(0.70 0.135 226 / 0.12); --live: oklch(0.60 0.21 22); --good: oklch(0.62 0.15 155); --good-ink: oklch(0.52 0.13 155); --warn: oklch(0.68 0.14 70); --danger: oklch(0.58 0.20 22); --shadow-sm: 0 2px 6px -2px oklch(0.45 0.04 255/0.10), 0 6px 18px -8px oklch(0.45 0.05 255/0.14); --shadow: 0 4px 14px -6px oklch(0.45 0.04 255/0.12), 0 14px 40px -16px oklch(0.45 0.05 255/0.20); --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px; --ease:cubic-bezier(0.22,1,0.36,1); --sidebar-w:250px; /* ---- Legacy aliases (so pages' inline styles adapt to the theme) ---- */ --accent: var(--cyan-ink); --accent-light: var(--cyan); --accent-dark: var(--cyan-deep); --gradient-start: var(--cyan); --gradient-end: var(--cyan-deep); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); --bg-primary: var(--bg); --bg-secondary: var(--panel-2); --bg-card: var(--panel); --bg-card-solid: var(--panel); --bg-card-hover: var(--panel-2); --bg-input: var(--panel-2); --border-color: var(--line); --border-light: var(--line-2); --success: var(--good); --warning: var(--warn); --glass-bg: var(--panel); --glass-border: var(--line); --glass-blur: 0px; --shadow-accent: var(--shadow-sm); --transition: 0.2s var(--ease); --radius-sm: var(--r-sm); --radius-md: var(--r); --radius-lg: var(--r-lg); --radius-pill: var(--r-pill); } html[data-theme="dark"]{ --bg: oklch(0.165 0.008 250); --panel: oklch(0.205 0.010 250); --panel-2: oklch(0.245 0.011 250); --glass: oklch(0.205 0.010 250 / 0.6); --track: oklch(0.285 0.012 250); --line: oklch(0.32 0.012 250 / 0.85); --line-2: oklch(0.40 0.014 250); --ink: oklch(0.975 0.003 250); --ink-2: oklch(0.74 0.012 250); --ink-3: oklch(0.58 0.012 250); --cyan: oklch(0.80 0.13 224); --cyan-deep:oklch(0.72 0.14 232); --cyan-ink: oklch(0.82 0.12 224); --cyan-tint:oklch(0.80 0.13 224 / 0.16); --good-ink: oklch(0.78 0.14 155); --shadow-sm: 0 2px 10px -4px oklch(0 0 0/0.45); --shadow: 0 14px 40px -16px oklch(0 0 0/0.7); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif; background:var(--bg);color:var(--ink);line-height:1.55;font-size:15px; -webkit-font-smoothing:antialiased;min-height:100vh; transition:background .4s var(--ease),color .4s var(--ease); } body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(1100px 560px at 8% -8%, var(--cyan-tint), transparent 62%), radial-gradient(900px 500px at 100% 6%, oklch(0.70 0.135 226 / 0.05), transparent 60%)} h1,h2,h3,h4,h5,h6{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;line-height:1.1;letter-spacing:-0.02em} .num{font-variant-numeric:tabular-nums;letter-spacing:-0.01em} a{color:var(--cyan-ink);text-decoration:none;transition:color .18s var(--ease)} img{max-width:100%} /* neutralize old gradient-text tell → solid, readable */ .text-gradient{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--cyan-ink)!important} /* ---------- Layout (fixed sidebar + margin, drop-in for old base) ---------- */ #mainContent{margin-left:var(--sidebar-w);padding:30px 0 24px;min-height:60vh} .container{max-width:1120px;margin:0 auto;padding:0 clamp(18px,3.6vw,44px)} /* ---------- Sidebar (glass, borderless) ---------- */ .zc-side{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:40; background:var(--glass); backdrop-filter:blur(22px) saturate(1.7); -webkit-backdrop-filter:blur(22px) saturate(1.7); box-shadow:10px 0 34px -22px oklch(0.4 0.05 255/0.30); padding:18px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto} html[data-theme="dark"] .zc-side{box-shadow:1px 0 0 var(--line)} .zc-brand{display:flex;align-items:center;gap:11px;padding:8px 8px 16px;text-decoration:none} .zc-brand-mark{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center; background:linear-gradient(150deg,var(--cyan),var(--cyan-deep));color:#fff;font-weight:800; font-family:'Bricolage Grotesque';font-size:19px; box-shadow:0 4px 12px -3px var(--cyan-deep),inset 0 1px 0 oklch(1 0 0/0.35)} .zc-brand-mark img{width:24px;height:24px;filter:brightness(0) invert(1)} .zc-brand-name{font-family:'Bricolage Grotesque';font-weight:800;font-size:16px;letter-spacing:-0.02em;color:var(--ink);white-space:nowrap} .zc-brand-name em{font-style:normal;color:var(--ink-3);font-weight:600} .zc-nav-label{font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3);padding:14px 10px 6px} .zc-nav{display:flex;flex-direction:column;gap:2px} .zc-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);color:var(--ink-2); font-weight:600;font-size:14px;transition:all .18s var(--ease);position:relative;text-decoration:none} .zc-nav a i{font-size:18px;width:20px;text-align:center} .zc-nav a:hover{background:oklch(0.5 0.05 255/0.06);color:var(--ink)} html[data-theme="dark"] .zc-nav a:hover{background:oklch(1 0 0/0.05)} .zc-nav a.active{background:var(--cyan-tint);color:var(--cyan-ink)} .zc-nav a.active i{color:var(--cyan)} .zc-notif-badge{margin-left:auto;background:var(--live);color:#fff;font-size:11px;font-weight:700; min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px;line-height:1} .zc-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px} .zc-profile-mini{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);min-width:0} .zc-profile-mini img{width:36px;height:36px;border-radius:10px;box-shadow:var(--shadow-sm);flex-shrink:0;image-rendering:pixelated} .zc-profile-mini .who{font-weight:700;font-size:13.5px;min-width:0;overflow:hidden;flex:1} .zc-profile-mini .who span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zc-profile-mini .who small{display:block;color:var(--ink-3);font-weight:500;font-size:11.5px} .zc-icon-btn{width:34px;height:34px;border-radius:10px;border:none;background:var(--panel-2);color:var(--ink-2); cursor:pointer;display:grid;place-items:center;font-size:15px;transition:all .2s var(--ease);box-shadow:var(--shadow-sm);flex-shrink:0} html[data-theme="dark"] .zc-icon-btn{border:1px solid var(--line)} .zc-icon-btn:hover{color:var(--cyan-ink)} .zc-logout{color:var(--ink-3);font-size:17px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;transition:all .2s;flex-shrink:0} .zc-logout:hover{color:var(--danger);background:oklch(0.58 0.20 22/0.1)} /* ---------- Mobile topbar ---------- */ .zc-topbar{display:none;position:sticky;top:0;z-index:30;align-items:center;gap:12px;padding:11px 16px; background:var(--glass);backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7); box-shadow:0 1px 0 var(--line)} .zc-hamburger{width:40px;height:40px;border:none;background:var(--panel-2);color:var(--ink);border-radius:11px;font-size:20px;display:grid;place-items:center;cursor:pointer} .zc-topbar .zc-brand{padding:0} .zc-overlay{display:none;position:fixed;inset:0;background:oklch(0.15 0.02 255/0.5);backdrop-filter:blur(2px);z-index:35} .zc-overlay.open{display:block} /* ---------- Flash ---------- */ .flash{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--r);font-size:14px;font-weight:600;margin-bottom:16px;box-shadow:var(--shadow-sm)} .flash i{font-size:17px} .flash-success{background:oklch(0.62 0.15 155/0.12);color:var(--good-ink)} .flash-error{background:oklch(0.58 0.20 22/0.12);color:var(--danger)} .flash-warning{background:oklch(0.68 0.14 70/0.15);color:var(--warn)} .flash-info{background:var(--cyan-tint);color:var(--cyan-ink)} /* ---------- Page header / greeting ---------- */ .zc-greet{font-size:clamp(24px,3.2vw,33px);margin-bottom:4px} .zc-greet-sub{color:var(--ink-2);font-size:15px;margin-bottom:26px} .zc-greet-sub b{color:var(--ink);font-weight:700} .page-header{margin-bottom:24px} .page-header h1{font-size:clamp(24px,3.4vw,34px);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .page-header p{color:var(--ink-2);margin-top:6px} .section-head{display:flex;align-items:center;gap:9px;margin:0 0 14px} .section-head h2{font-size:17px} .section-head .more{margin-left:auto;font-size:13px;font-weight:600;color:var(--cyan-ink)} .flex-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .actions{display:flex;gap:8px;flex-wrap:wrap} .hint{color:var(--ink-3);font-size:13px} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:'Hanken Grotesk'; font-weight:600;font-size:13.5px;padding:9px 15px;border-radius:11px;border:none;cursor:pointer; transition:transform .12s var(--ease),background .18s,box-shadow .18s,color .18s,filter .18s;text-decoration:none;line-height:1.2;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn i{font-size:15px} .btn-sm{padding:7px 11px;font-size:12.5px;border-radius:9px} .btn-full{width:100%} .btn-icon{width:38px;height:38px;padding:0;border-radius:11px} .btn-primary{background:linear-gradient(150deg,var(--cyan),var(--cyan-deep));color:#fff;box-shadow:0 6px 16px -8px var(--cyan-deep)} .btn-primary:hover{filter:brightness(1.06);color:#fff} .btn-secondary{background:var(--panel-2);color:var(--ink);box-shadow:var(--shadow-sm)} html[data-theme="dark"] .btn-secondary{border:1px solid var(--line)} .btn-secondary:hover{color:var(--cyan-ink)} .btn-success{background:var(--good);color:#fff} .btn-success:hover{filter:brightness(1.05);color:#fff} .btn-danger{background:var(--danger);color:#fff} .btn-danger:hover{filter:brightness(1.05);color:#fff} .btn-disabled,.btn:disabled{background:var(--panel-2);color:var(--ink-3);cursor:not-allowed;box-shadow:none} html[data-theme="dark"] .btn-disabled,html[data-theme="dark"] .btn:disabled{border:1px solid var(--line)} .btn-outline-danger{background:transparent;border:1px solid var(--line-2);color:var(--ink-3);padding:7px 10px;border-radius:9px;cursor:pointer;font-size:12.5px} .btn-outline-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff} /* ---------- Forms ---------- */ .form-group{margin-bottom:1.1rem} .form-group label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px} .form-group input,.form-group textarea,.form-group select{ width:100%;padding:11px 14px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r); color:var(--ink);font-family:'Hanken Grotesk';font-size:14px;transition:border-color .18s,box-shadow .18s;outline:none} .form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-tint)} .form-group input::placeholder,.form-group textarea::placeholder{color:var(--ink-3)} .form-inline{display:flex;gap:12px;align-items:flex-end} .form-inline .form-group{flex:1;margin-bottom:0} .form-check{display:flex;align-items:center;gap:8px;margin-bottom:1rem} .form-check input[type="checkbox"]{width:18px;height:18px;accent-color:var(--cyan);cursor:pointer} .form-check label{font-size:14px;color:var(--ink-2);cursor:pointer} .form-actions{display:flex;gap:12px;margin-top:1.4rem} /* ---------- Cards / panels ---------- */ .card{background:var(--panel);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow);margin-bottom:26px} html[data-theme="dark"] .card{border:1px solid var(--line)} .card>h2,.card-header-row h2{font-size:17px;display:flex;align-items:center;gap:9px} .card>h3{font-size:15px;margin-bottom:.5rem} .card-header-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} .card-header-row .actions{margin-left:auto} .card-icon{width:30px;height:30px;border-radius:9px;background:var(--cyan-tint);color:var(--cyan);display:grid;place-items:center;font-size:15px;flex-shrink:0} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px} /* ---------- Stat cards ---------- */ .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:26px} .stat-card{background:var(--panel);border-radius:var(--r-lg);padding:20px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s} html[data-theme="dark"] .stat-card{border:1px solid var(--line)} .stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .stat-value{font-family:'Bricolage Grotesque';font-weight:800;font-size:2rem;color:var(--cyan-ink);line-height:1.15;font-variant-numeric:tabular-nums} .stat-label{color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:0.04em;font-weight:600;margin-top:4px} /* ---------- Progress bar ---------- */ .progress-bar-wrapper{background:var(--track);border-radius:var(--r-pill);height:22px;overflow:hidden;position:relative} .progress-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-deep));border-radius:var(--r-pill);transition:width .6s var(--ease)} .progress-text{font-size:13px;color:var(--ink-2);margin-top:8px} /* ---------- Profile hero ---------- */ .profile-hero{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center; background:var(--panel);border-radius:var(--r-xl);padding:24px 28px;margin-bottom:26px;box-shadow:var(--shadow)} html[data-theme="dark"] .profile-hero{border:1px solid var(--line)} .profile-hero-avatar{position:relative;flex-shrink:0} .profile-hero-avatar-ring{--progress:0;width:110px;height:110px;border-radius:50%;padding:6px;position:relative; background:conic-gradient(var(--cyan) calc(var(--progress)*1%), var(--track) 0)} .profile-hero-avatar-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--panel)} .profile-hero-avatar-inner{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--panel-2);display:grid;place-items:center} .profile-hero-avatar-inner img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated} .profile-hero-lvl{position:absolute;z-index:2;bottom:-2px;left:50%;transform:translateX(-50%); background:linear-gradient(150deg,var(--cyan),var(--cyan-deep));color:#fff;font-weight:800;font-size:12px; padding:3px 11px;border-radius:var(--r-pill);border:3px solid var(--panel);box-shadow:var(--shadow-sm);white-space:nowrap} .profile-hero-info{min-width:0} .profile-hero-name{font-family:'Bricolage Grotesque';font-weight:800;font-size:27px;letter-spacing:-0.02em;display:flex;align-items:center;gap:11px;flex-wrap:wrap} .profile-hero-level{display:inline-flex;align-items:center;gap:8px;color:var(--cyan-ink);font-weight:700;font-size:14px;margin-top:4px} .profile-hero-xp{color:var(--ink-2);font-size:13.5px;margin:7px 0 11px;font-weight:500} .profile-hero-xp b{color:var(--ink);font-weight:700} .profile-hero-progress{height:10px;border-radius:var(--r-pill);background:var(--track);overflow:hidden;max-width:460px} .profile-hero-progress-fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--cyan),var(--cyan-deep));transition:width .6s var(--ease)} .profile-hero-stats{display:flex;text-align:center;flex-shrink:0} .profile-hero-stat{padding:0 22px} .profile-hero-stat+.profile-hero-stat{border-left:1px solid var(--line)} .profile-hero-stat-value{font-family:'Bricolage Grotesque';font-weight:800;font-size:23px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums} .profile-hero-stat-label{color:var(--ink-3);font-size:11px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;margin-top:3px} /* ---------- Live widget ---------- */ .live-widget{margin-bottom:26px} .live-widget-header{display:flex;align-items:center;gap:10px;margin-bottom:13px} .live-widget-header h2{font-size:17px;margin:0} .live-count{margin-left:auto;font-size:13px;color:var(--ink-3);font-weight:600} .live-pulse{width:9px;height:9px;border-radius:50%;background:var(--live);flex-shrink:0;box-shadow:0 0 0 0 var(--live);animation:zc-pulse 2s infinite} @keyframes zc-pulse{0%{box-shadow:0 0 0 0 oklch(0.60 0.21 22/0.5)}70%{box-shadow:0 0 0 8px oklch(0.60 0.21 22/0)}100%{box-shadow:0 0 0 0 oklch(0.60 0.21 22/0)}} .live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .live-card{background:var(--panel);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .25s var(--ease),box-shadow .25s} html[data-theme="dark"] .live-card{border:1px solid var(--line)} .live-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .live-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,oklch(0.55 0.15 300),oklch(0.45 0.13 275))} .live-thumb img{width:100%;height:100%;object-fit:cover} .live-thumb-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:2rem;color:#fff} .live-badge-live{position:absolute;top:9px;left:9px;background:var(--live);color:#fff;font-size:10px;font-weight:800;letter-spacing:0.06em;padding:3px 8px;border-radius:6px} .live-viewers{position:absolute;bottom:9px;right:9px;background:oklch(0 0 0/0.62);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;display:flex;gap:4px;align-items:center;backdrop-filter:blur(4px)} .live-info{padding:11px 13px} .live-streamer{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px} .live-title{color:var(--ink-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} /* ---------- Mini challenges ---------- */ .mini-challenges{display:flex;flex-direction:column} .mini-challenge{display:flex;align-items:center;gap:13px;padding:12px 0} .mini-challenge+.mini-challenge{border-top:1px solid var(--line)} .mini-challenge-icon{width:40px;height:40px;border-radius:12px;background:var(--panel-2);display:grid;place-items:center;color:var(--ink-3);font-size:16px;flex-shrink:0} html[data-theme="dark"] .mini-challenge-icon{border:1px solid var(--line)} .mini-challenge.completed .mini-challenge-icon{background:var(--cyan-tint);color:var(--cyan);border-color:transparent} .mini-challenge-info{flex:1;min-width:0} .mini-challenge-title{font-weight:600;font-size:13.5px;margin-bottom:7px} .mini-challenge-bar{height:7px;border-radius:var(--r-pill);background:var(--track);overflow:hidden} .mini-challenge-bar-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-deep));border-radius:var(--r-pill)} .mini-challenge-reward{font-weight:800;font-size:13px;color:var(--cyan-ink);flex-shrink:0;white-space:nowrap} .mini-challenge.completed .mini-challenge-reward{color:var(--good-ink)} /* ---------- Badges (dashboard/profile grid) ---------- */ .badge-count-header{font-size:13px;font-weight:700;color:var(--ink-3);margin-left:auto} .badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px;margin-top:4px} .badge-item{text-align:center;padding:14px 6px;border-radius:var(--r);background:var(--panel-2);transition:transform .2s var(--ease)} .badge-item.earned:hover{transform:translateY(-3px)} .badge-icon{width:46px;height:46px;margin:0 auto 8px;border-radius:14px;display:grid;place-items:center;font-size:21px;background:var(--panel);color:var(--ink-3);box-shadow:var(--shadow-sm)} html[data-theme="dark"] .badge-icon{border:1px solid var(--line)} .badge-item.earned .badge-icon{color:#fff;background:linear-gradient(150deg,var(--cyan),var(--cyan-deep));box-shadow:0 4px 12px -4px var(--cyan-deep)} .badge-item.locked{opacity:0.45} .badge-name{font-size:11.5px;font-weight:600;color:var(--ink-2);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- Status badges ---------- */ .badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);letter-spacing:0.02em;background:var(--panel-2);color:var(--ink-2)} .badge-success,.bg-success{background:oklch(0.62 0.15 155/0.16);color:var(--good-ink)} .badge-warning,.bg-warning{background:oklch(0.68 0.14 70/0.18);color:var(--warn)} .badge-danger,.bg-danger{background:oklch(0.58 0.20 22/0.14);color:var(--danger)} .badge-secondary,.bg-secondary{background:var(--panel-2);color:var(--ink-3)} .badge-info,.bg-info{background:var(--cyan-tint);color:var(--cyan-ink)} /* ---------- Creator rank badges (rank_badge_html output) ---------- */ .rank-badge{display:inline-flex;align-items:center;gap:0.3rem;padding:3px 10px;border-radius:var(--r-pill); font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;border:1px solid} .rank-badge i{font-size:0.85em} .rank-badge.rank-md{padding:4px 12px;font-size:12.5px} .rank-badge.rank-lg{padding:5px 14px;font-size:14px} .rank-bronze{color:oklch(0.50 0.09 55);background:oklch(0.62 0.10 55/0.14);border-color:oklch(0.62 0.10 55/0.35)} .rank-silver{color:oklch(0.45 0.008 250);background:oklch(0.60 0.01 250/0.14);border-color:oklch(0.60 0.01 250/0.35)} .rank-gold{color:oklch(0.54 0.11 80);background:oklch(0.80 0.13 85/0.16);border-color:oklch(0.72 0.13 85/0.4)} .rank-diamond{color:oklch(0.50 0.10 224);background:var(--cyan-tint);border-color:oklch(0.70 0.13 224/0.4)} .rank-legend{color:oklch(0.52 0.20 18);background:oklch(0.62 0.20 20/0.13);border-color:oklch(0.62 0.20 20/0.38)} html[data-theme="dark"] .rank-bronze{color:#CD7F32} html[data-theme="dark"] .rank-silver{color:#C0C0C0} html[data-theme="dark"] .rank-gold{color:#FFD700} html[data-theme="dark"] .rank-diamond{color:#B9F2FF} html[data-theme="dark"] .rank-legend{color:#FF7B7B} /* ---------- Platform icon inline colors ---------- */ .platform-icon{display:inline-flex;align-items:center;gap:0.4rem} .platform-icon .fa-youtube{color:#FF0000} .platform-icon .fa-twitch{color:#9146FF} .platform-icon .fa-tiktok{color:#ff0050} /* ---------- Linked-account platform cards ---------- */ .platforms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px} .platform-card{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--panel);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s} html[data-theme="dark"] .platform-card{border:1px solid var(--line)} .platform-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .platform-card-left{display:flex;align-items:center;gap:12px;min-width:0} .platform-avatar{width:44px;height:44px;border-radius:13px;object-fit:cover;box-shadow:var(--shadow-sm);flex-shrink:0} .platform-icon-wrapper{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-sm)} .platform-card-name{font-weight:700;font-size:14px} .platform-card-user{color:var(--good-ink);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:5px} .platform-card-meta{font-size:11.5px;margin-top:2px;color:var(--ink-3)} .platform-card-error{color:var(--danger);font-size:11.5px;margin-top:3px} .platform-card-right{flex-shrink:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} .platform-media-count{font-size:12px;color:var(--ink-3);background:var(--panel-2);padding:4px 10px;border-radius:var(--r-pill);font-weight:600} .platform-card.coming-soon{opacity:0.6} .platform-card.coming-soon:hover{transform:none} .badge-coming-soon{font-size:12px;font-weight:700;color:var(--cyan-ink);background:var(--cyan-tint);padding:4px 12px;border-radius:var(--r-pill)} /* ---------- Media grid (crosspost-style 9:16) ---------- */ .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px} .media-card{background:var(--panel);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s} html[data-theme="dark"] .media-card{border:1px solid var(--line)} .media-card.media-viewer-trigger{cursor:pointer} .media-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .media-card-thumb{position:relative;aspect-ratio:9/16;overflow:hidden;background:linear-gradient(150deg,oklch(0.45 0.13 240),oklch(0.35 0.11 260))} .media-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)} .media-card:hover .media-card-thumb img{transform:scale(1.05)} .media-card-thumb-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:2.4rem} .media-card-platform{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:8px;background:oklch(1 0 0/0.92);display:grid;place-items:center;font-size:13px;z-index:2;box-shadow:0 2px 6px oklch(0 0 0/0.25)} .media-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.85);width:48px;height:48px;border-radius:50%;background:linear-gradient(150deg,var(--cyan),var(--cyan-deep));color:#fff;display:grid;place-items:center;font-size:1.4rem;opacity:0;transition:all .25s var(--ease);pointer-events:none;z-index:3;box-shadow:0 6px 20px -4px var(--cyan-deep)} .media-card.media-viewer-trigger:hover .media-card-play{opacity:1;transform:translate(-50%,-50%) scale(1)} .media-card-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 11px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(to top,oklch(0 0 0/0.7),transparent)} .media-card-views{color:#fff;font-size:12px;font-weight:700;display:flex;gap:5px;align-items:center;text-shadow:0 1px 3px oklch(0 0 0/0.5)} .media-card-xp{color:#fff;font-size:11px;font-weight:800;background:var(--cyan-deep);padding:2px 8px;border-radius:var(--r-pill)} .media-card-body{padding:11px 13px} .media-card-title{font-weight:600;font-size:13px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .media-card-title a{color:var(--ink)} .media-card-title a:hover{color:var(--cyan-ink)} .media-card-meta{margin-top:8px;display:flex;justify-content:space-between;align-items:center} .media-card-status{font-size:11px} .media-hidden{display:none} .media-grid.expanded .media-hidden{display:block;animation:zc-reveal .3s var(--ease) forwards} @keyframes zc-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .media-show-more{text-align:center;margin-top:16px} /* ---------- Tabs ---------- */ .tabs{display:flex;gap:4px;margin-bottom:1.5rem;border-bottom:1px solid var(--line);overflow-x:auto} .tabs a{padding:10px 16px;color:var(--ink-3);font-size:14px;font-weight:600;border-bottom:2px solid transparent;transition:all .18s var(--ease);white-space:nowrap} .tabs a:hover{color:var(--ink)} .tabs a.active{color:var(--cyan-ink);border-bottom-color:var(--cyan)} /* ---------- Rewards grid / cards ---------- */ .rewards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .reward-card{background:var(--panel);border-radius:var(--r-lg);padding:22px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s;position:relative} html[data-theme="dark"] .reward-card{border:1px solid var(--line)} .reward-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .reward-card.unlocked{box-shadow:0 0 0 2px var(--cyan-tint),var(--shadow-sm)} .reward-card.locked{opacity:0.5} .reward-card.locked:hover{opacity:0.7;transform:none} .reward-card h3{font-size:15px;margin-bottom:4px} .reward-level{color:var(--cyan-ink);font-size:13px;font-weight:700;margin-bottom:10px} .reward-card p{color:var(--ink-2);font-size:13px;margin-bottom:14px} .reward-card img{width:80px;height:80px;object-fit:contain;margin-bottom:14px;border-radius:var(--r)} /* ---------- Login ---------- */ .login-wrapper{display:flex;justify-content:center;align-items:center;min-height:80vh;padding:2rem 1rem} .login-card{background:var(--panel);border-radius:var(--r-xl);padding:clamp(28px,4vw,44px);width:100%;max-width:440px;box-shadow:var(--shadow)} html[data-theme="dark"] .login-card{border:1px solid var(--line)} .login-logo{text-align:center;margin-bottom:1.25rem} .login-logo img{width:66px;height:66px} .login-card h1{font-size:2rem;text-align:center;margin-bottom:6px} .login-card>p{text-align:center;color:var(--ink-3);font-size:14px;margin-bottom:1.75rem} .login-register{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);text-align:center} .login-register p{margin:0 0 0.65rem;font-size:14px;color:var(--ink-3)} /* ---------- Tables ---------- */ table{width:100%;border-collapse:collapse;font-size:14px} thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-3);font-weight:700;padding:0 14px 12px;background:none} tbody td{padding:13px 14px;border-top:1px solid var(--line);vertical-align:middle} tbody tr{transition:background .15s} tbody tr:hover{background:var(--panel-2)} .top-1 td{background:oklch(0.80 0.13 85/0.10)} .top-2 td{background:oklch(0.70 0.01 250/0.08)} .top-3 td{background:oklch(0.62 0.10 55/0.08)} /* ---------- Leaderboard podium ---------- */ .podium{display:flex;justify-content:center;align-items:flex-end;gap:16px;margin-bottom:2rem;padding:1.5rem 0} .podium-item{display:flex;flex-direction:column;align-items:center;gap:0.5rem} .podium-rank{font-family:'Bricolage Grotesque';font-weight:800;font-size:2.4rem;line-height:1} .podium-item:nth-child(1) .podium-rank{color:oklch(0.62 0.01 250)} .podium-item:nth-child(2) .podium-rank{color:oklch(0.66 0.13 85);font-size:2.9rem} .podium-item:nth-child(3) .podium-rank{color:oklch(0.55 0.10 55)} .podium-pseudo{font-weight:700;font-size:15px;color:var(--ink);display:block;transition:color .2s} .podium-pseudo:hover{color:var(--cyan-ink)} .podium-xp{color:var(--cyan-ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums} .podium-bar{width:100px;border-radius:var(--r) var(--r) 0 0;background:var(--panel);box-shadow:var(--shadow-sm)} html[data-theme="dark"] .podium-bar{border:1px solid var(--line);border-bottom:none} .podium-item:nth-child(1) .podium-bar{height:100px} .podium-item:nth-child(2) .podium-bar{height:140px;width:120px;background:linear-gradient(to top,var(--panel),oklch(0.80 0.13 85/0.12))} .podium-item:nth-child(3) .podium-bar{height:70px} /* ---------- Empty state ---------- */ .empty-state{text-align:center;padding:40px 20px;color:var(--ink-3)} .empty-state i{font-size:2.6rem;color:var(--cyan);opacity:0.6;display:block;margin-bottom:12px} .empty-state p{font-size:14px;line-height:1.6} /* ---------- Footer ---------- */ footer{margin-left:var(--sidebar-w);margin-top:20px;padding:0 clamp(18px,3.6vw,44px) 0} .footer-content{max-width:1120px;margin:0 auto;background:var(--panel);border-radius:var(--r-xl);padding:28px 30px;box-shadow:var(--shadow-sm)} html[data-theme="dark"] .footer-content{border:1px solid var(--line)} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;margin-bottom:0} .footer-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:12px} .footer-logo{width:38px;height:38px} .footer-brand-name{font-family:'Bricolage Grotesque';font-weight:800;font-size:16px} .footer-brand-name span{color:var(--ink-3)} .footer-brand-tagline{font-size:12px;color:var(--ink-3)} .footer-description{font-size:13px;color:var(--ink-2);max-width:46ch;line-height:1.6} .footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-3);margin-bottom:12px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px} .footer-col a{color:var(--ink-2);font-size:13.5px;font-weight:500} .footer-col a:hover{color:var(--cyan-ink)} .footer-socials{display:flex;gap:10px;margin-top:24px;padding-top:0;border:none;justify-content:flex-start} .footer-social{width:40px;height:40px;border-radius:12px;background:var(--panel-2);color:var(--ink-2);display:grid;place-items:center;font-size:18px;transition:all .2s var(--ease)} .footer-social:hover{color:#fff;background:linear-gradient(150deg,var(--cyan),var(--cyan-deep));transform:translateY(-2px)} .footer-copyright{margin:14px auto 0;text-align:center;color:var(--ink-3);font-size:12.5px;background:none;padding:0 0 4px} /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--r-pill)} ::-webkit-scrollbar-thumb:hover{background:var(--ink-3)} /* ---------- Responsive ---------- */ @media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:900px){ #mainContent{margin-left:0} footer{margin-left:0} .zc-side{transform:translateX(-100%);width:280px;transition:transform .3s var(--ease)} .zc-side.mobile-open{transform:translateX(0)} .zc-topbar{display:flex} .grid-2{grid-template-columns:1fr} .profile-hero{grid-template-columns:1fr;text-align:center;justify-items:center} .profile-hero-stats{border-top:1px solid var(--line);padding-top:14px} .platform-card{flex-direction:column;align-items:stretch;text-align:center} .platform-card-left{flex-direction:column} .platform-card-user{justify-content:center} .platform-card-right{justify-content:center} .podium{gap:10px} } @media (max-width:560px){ .footer-grid{grid-template-columns:1fr;gap:20px} .stats-grid{grid-template-columns:1fr 1fr} .badges-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))} .media-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .podium{flex-direction:row;align-items:flex-end} .podium-bar{display:none} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}