@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap'); /* ========================================================================== Universality design system Two themes, switched with (see js/theme.js): - dark: black, deep purple, glossy surfaces, gold accents - light: soft purple pearl, glossy, easy on the eyes (never stark white) Every colour below comes from a token, so a component looks right in both. ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #06050b; --bg-2: #0a0812; --panel: #110d1d; --panel-2: #181228; --panel-3: #211936; --border: #2e2249; --border-soft: #221b39; --text: #f6f2fc; --muted: #aaa1c8; --faint: #71688f; --brand: #8f5cf6; --brand-2: #a97ff8; --brand-3: #cdb8fc; --brand-rgb: 143 92 246; --link: #cdb8fc; --gold: #e8c76e; --gold-2: #f7e3a8; --gold-deep: #b48a2f; --gold-rgb: 232 199 110; --money: linear-gradient(180deg, #fbe9b0 0%, #e8c76e 55%, #c99a3a 100%); --grad: linear-gradient(135deg, #4a22a8 0%, #7a47d2 52%, #a86de2 100%); --grad-gold: linear-gradient(135deg, #a67d26 0%, #e8c76e 52%, #f8e5ab 100%); --gloss: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 46%); --card-bg: linear-gradient(180deg, var(--panel-2), var(--panel)); --card-edge: inset 0 1px 0 rgba(255, 255, 255, .06); --shadow: 0 18px 50px rgba(2, 1, 8, .6); --btn-shadow: 0 8px 24px rgba(74, 34, 168, .45); --btn-shadow-hover: 0 14px 30px rgba(74, 34, 168, .6); --green: #3ddba0; --green-t: #6ee7b7; --amber: #fbbf24; --amber-t: #fcd34d; --red: #f87171; --red-t: #fca5a5; --blue: #7aa8ff; --blue-t: #a9c4ff; --input-bg: #0a0812; --scrim: rgba(3, 2, 9, .74); --modal-bg: linear-gradient(180deg, #1a1330, #130e26); --tip-bg: #221a40; --toast-bg: #201840; --topbar-bg: rgba(6, 5, 11, .82); --side-bg: linear-gradient(180deg, #0b0813, #07050d); --media-bg: #050309; --nav-bar: var(--gold); --chart-a: #8f5cf6; --chart-b: #e8c76e; --chart-area: #8f5cf6; --page-glow: radial-gradient(900px 520px at 88% -8%, rgba(143, 92, 246, .16), transparent 60%), radial-gradient(760px 520px at -8% 108%, rgba(232, 199, 110, .06), transparent 60%); --radius: 18px; --radius-sm: 12px; --sidebar: 270px; --ease: cubic-bezier(.22, .8, .24, 1); --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Sora', 'Inter', system-ui, sans-serif; } :root[data-theme="light"] { color-scheme: light; --bg: #e6e0f1; --bg-2: #ded7ec; --panel: #f2eef9; --panel-2: #f8f5fd; --panel-3: #e7e0f3; --border: #c9bde3; --border-soft: #d8cfec; --text: #241a3f; --muted: #5d5280; --faint: #8a7fab; --brand: #6d3fd0; --brand-2: #7f54e2; --brand-3: #5d33bd; --brand-rgb: 109 63 208; --link: #5d33bd; --gold: #a5791d; --gold-2: #c99a34; --gold-deep: #86610f; --gold-rgb: 165 121 29; --money: linear-gradient(180deg, #b6882a 0%, #93690f 100%); --grad: linear-gradient(135deg, #5a2fbe 0%, #7d4fdb 55%, #a473e6 100%); --grad-gold: linear-gradient(135deg, #c99a34 0%, #e6c26a 55%, #f3dc98 100%); --gloss: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%); --card-bg: linear-gradient(180deg, #faf8fe, #f0ebf8); --card-edge: inset 0 1px 0 rgba(255, 255, 255, .9); --shadow: 0 16px 40px rgba(70, 40, 130, .18); --btn-shadow: 0 8px 20px rgba(93, 51, 189, .32); --btn-shadow-hover: 0 12px 26px rgba(93, 51, 189, .42); --green: #10a373; --green-t: #0a7d58; --amber: #c98a06; --amber-t: #94660a; --red: #d64545; --red-t: #b02f2f; --blue: #4d7de0; --blue-t: #3358b5; --input-bg: #f7f4fc; --scrim: rgba(60, 40, 100, .38); --modal-bg: linear-gradient(180deg, #faf8fe, #f0ebf8); --tip-bg: #f9f7fd; --toast-bg: #f9f7fd; --topbar-bg: rgba(230, 224, 241, .86); --side-bg: linear-gradient(180deg, #ece7f6, #e3dcf0); --media-bg: #ddd5ee; --nav-bar: var(--brand); --chart-a: #6d3fd0; --chart-b: #d16bd0; --chart-area: #7f54e2; --page-glow: radial-gradient(900px 520px at 90% -8%, rgba(190, 150, 240, .38), transparent 62%), radial-gradient(760px 520px at -8% 108%, rgba(236, 190, 220, .34), transparent 60%); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--page-glow), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .35s, color .35s; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; margin: 0; line-height: 1.2; } h1 { font-size: 30px; font-weight: 700; } h2 { font-size: 19px; font-weight: 700; } h3 { font-size: 15px; font-weight: 600; } p { margin: 0 0 12px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 13px; } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; } svg.small { width: 1.05em; height: 1.05em; vertical-align: -0.17em; } .notice svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; } .badge svg { width: 13px; height: 13px; vertical-align: -2px; } .rate-card .k svg { width: 18px; height: 18px; } .grad-text { background: linear-gradient(90deg, var(--brand-2), #e59bff); -webkit-background-clip: text; background-clip: text; color: transparent; } .gold-text, .money-text { background: var(--money); -webkit-background-clip: text; background-clip: text; color: transparent; } /* logos: the light-coloured one on dark, the purple one on light */ :root[data-theme="light"] .only-dark { display: none !important; } :root:not([data-theme="light"]) .only-light { display: none !important; } ::selection { background: rgb(var(--brand-rgb) / .4); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } ::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 8px; } /* ---------- animation ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(30px, -34px, 0); } } @keyframes float2 { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-40px, 26px, 0); } } @keyframes shimmer { from { background-position: -420px 0; } to { background-position: 420px 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes sheen { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @keyframes rise-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } } .reveal { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); } .fade-in { animation: fade .5s ease both; } .view-enter { animation: rise .5s var(--ease) both; } .skeleton { background: linear-gradient(90deg, var(--panel) 0%, var(--panel-3) 40%, var(--panel) 80%); background-size: 840px 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-sm); } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .7s linear infinite; display: inline-block; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } } /* ---------- buttons ---------- */ .btn { --pad: 12px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: var(--pad); border: 0; border-radius: 12px; font: 600 14px var(--font); color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 52%), var(--grad); box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 18px rgba(20, 5, 60, .18); cursor: pointer; text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s; } .btn:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -10px 18px rgba(20, 5, 60, .18); text-decoration: none; filter: brightness(1.07); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .btn.ghost { background: var(--gloss), var(--panel-2); border: 1px solid var(--border); box-shadow: var(--card-edge); color: var(--text); } .btn.ghost:hover { border-color: var(--brand); background: var(--gloss), var(--panel-3); box-shadow: var(--card-edge); filter: none; } .btn.light { background: linear-gradient(180deg, #fff, #ece6fa); color: #2a1a58; box-shadow: 0 8px 22px rgba(0, 0, 0, .18), inset 0 1px 0 #fff; } :root[data-theme="light"] .btn.light { background: linear-gradient(180deg, #7f54e2, #5a2fbe); color: #fff; box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255, 255, 255, .35); } .btn.gold { background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), var(--grad-gold); color: #2b1c02; box-shadow: 0 8px 24px rgba(var(--gold-rgb) / .35), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -8px 14px rgba(120, 80, 0, .18); } .btn.green { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 52%), linear-gradient(135deg, #047857, #2fd39b); box-shadow: 0 8px 22px rgba(16, 185, 129, .3), inset 0 1px 0 rgba(255, 255, 255, .4); } .btn.danger { background: rgb(248 113 113 / .12); color: var(--red-t); border: 1px solid rgb(248 113 113 / .38); box-shadow: none; } .btn.danger:hover { background: rgb(248 113 113 / .22); box-shadow: none; } .btn.discord { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 52%), #5865f2; box-shadow: 0 10px 28px rgba(88, 101, 242, .42), inset 0 1px 0 rgba(255, 255, 255, .35); } .btn.small { --pad: 8px 13px; font-size: 13px; border-radius: 10px; } .btn.block { width: 100%; } .btn.big { --pad: 16px 26px; font-size: 16px; border-radius: 14px; } .btn svg { width: 17px; height: 17px; } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--gloss), var(--panel); color: var(--muted); cursor: pointer; transition: .18s; } .icon-btn:hover { color: var(--text); border-color: var(--brand); background: var(--gloss), var(--panel-2); } .icon-btn svg { width: 19px; height: 19px; } .link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; } .link-btn:hover { text-decoration: underline; } /* the sun / moon switch */ .theme-btn { position: relative; } .theme-btn .sun, .theme-btn .moon { position: absolute; transition: transform .45s var(--ease), opacity .3s; } :root[data-theme="light"] .theme-btn .moon { transform: rotate(-90deg) scale(.4); opacity: 0; } :root:not([data-theme="light"]) .theme-btn .sun { transform: rotate(90deg) scale(.4); opacity: 0; } /* ---------- forms ---------- */ label, .label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 7px; } input, select, textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); padding: 12px 14px; font: 400 14.5px var(--font); transition: border-color .15s, box-shadow .15s, background .15s; } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / .18); } textarea { min-height: 110px; resize: vertical; line-height: 1.5; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a80ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; } input[type=file] { padding: 10px; cursor: pointer; } input[type=file]::file-selector-button { background: var(--panel-3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 12px; margin-right: 12px; font: 600 13px var(--font); cursor: pointer; } input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand); padding: 0; } .field { margin-bottom: 18px; } .field .hint { margin: 6px 0 0; } .hint { font-size: 12.5px; color: var(--faint); } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .form-grid .span-2 { grid-column: span 2; } .inline-check { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text); margin: 0; cursor: pointer; } .input-icon { position: relative; } .input-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--faint); pointer-events: none; } .input-icon input { padding-left: 42px; } /* ---------- cards, stats, badges ---------- */ .card { background: var(--gloss), var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 24px; box-shadow: var(--card-edge); } .card.flush { padding: 0; overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .card-head p { margin: 4px 0 0; } .stack > * + * { margin-top: 18px; } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .row.between { justify-content: space-between; } .grid { display: grid; gap: 18px; } .grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grid.three { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .stat { position: relative; overflow: hidden; background: var(--gloss), var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--card-edge); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; } .stat:hover { transform: translateY(-3px); border-color: var(--border); box-shadow: var(--card-edge), var(--shadow); } /* a soft glowing line across the top of the card */ .stat::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent, var(--c, var(--brand)), transparent); } .stat::after { content: ''; position: absolute; left: -20%; right: -20%; top: -70%; height: 90%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, var(--brand)) 20%, transparent), transparent); pointer-events: none; } .stat > * { position: relative; z-index: 1; } .stat .stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; } .stat .chip { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c, var(--brand)) 16%, transparent); color: var(--c, var(--brand)); } .stat .chip svg { width: 18px; height: 18px; } .stat .value { font: 700 32px var(--font-display); margin-top: 12px; letter-spacing: -.02em; line-height: 1.1; } .stat .value.money { background: var(--money); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat .sub { color: var(--faint); font-size: 12.5px; margin-top: 4px; } .stat.green { --c: var(--green); } .stat.amber { --c: var(--amber); } .stat.blue { --c: var(--blue); } .stat.red { --c: var(--red); } .stat.gold { --c: var(--gold); } .pill, .tag, .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .tag { background: rgb(var(--brand-rgb) / .14); color: var(--brand-3); border: 1px solid rgb(var(--brand-rgb) / .34); border-radius: 8px; } .pill { background: var(--panel-3); color: var(--muted); border: 1px solid var(--border); text-transform: none; letter-spacing: 0; font-size: 12.5px; } .badge { border: 1px solid transparent; } .badge.ok { background: rgb(52 211 153 / .13); color: var(--green-t); border-color: rgb(52 211 153 / .32); } .badge.warn { background: rgb(251 191 36 / .13); color: var(--amber-t); border-color: rgb(251 191 36 / .32); } .badge.bad { background: rgb(248 113 113 / .13); color: var(--red-t); border-color: rgb(248 113 113 / .32); } .badge.info { background: rgb(122 168 255 / .14); color: var(--blue-t); border-color: rgb(122 168 255 / .32); } .badge.dim { background: var(--panel-3); color: var(--muted); border-color: var(--border); } .badge.gold { background: rgb(var(--gold-rgb) / .14); color: var(--gold); border-color: rgb(var(--gold-rgb) / .38); } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(52 211 153 / .2); animation: pulse 2s ease infinite; display: inline-block; flex: none; } .bar { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; } .bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad); transition: width 1.1s var(--ease); } .bar.gold > i { background: var(--grad-gold); } .notice { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel-2); font-size: 14px; } .notice.ok { border-color: rgb(52 211 153 / .42); background: rgb(52 211 153 / .09); color: var(--green-t); } .notice.bad { border-color: rgb(248 113 113 / .42); background: rgb(248 113 113 / .09); color: var(--red-t); } .notice.info { border-color: rgb(var(--brand-rgb) / .42); background: rgb(var(--brand-rgb) / .09); color: var(--brand-3); } .notice.warn { border-color: rgb(251 191 36 / .42); background: rgb(251 191 36 / .09); color: var(--amber-t); } .empty { text-align: center; padding: 54px 20px; color: var(--muted); } .empty svg { width: 46px; height: 46px; color: var(--faint); margin-bottom: 14px; } .empty h3 { color: var(--text); font-size: 17px; margin-bottom: 6px; } .empty p { max-width: 380px; margin: 0 auto 16px; } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; } td { padding: 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } tbody tr { transition: background .15s; } tbody tr:hover { background: rgb(var(--brand-rgb) / .06); } tbody tr:last-child td { border-bottom: 0; } tr.clickable { cursor: pointer; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } th.num { text-align: right; } .cell-user { display: flex; align-items: center; gap: 11px; min-width: 0; } .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--panel-3); border: 1px solid var(--border); flex: none; } .avatar.lg { width: 56px; height: 56px; } .avatar.sm { width: 26px; height: 26px; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--muted); } .actions { display: flex; gap: 8px; flex-wrap: nowrap; } /* ---------- segmented / toolbar ---------- */ .seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 14px; } .seg button { border: 0; background: none; color: var(--muted); font: 600 13.5px var(--font); padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: .18s; white-space: nowrap; } .seg button:hover { color: var(--text); } .seg button.on { background: var(--gloss), var(--panel-3); color: var(--text); box-shadow: 0 0 0 1px var(--border), 0 4px 14px rgba(0, 0, 0, .14); } .toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; } .toolbar .grow { flex: 1 1 260px; min-width: 200px; } .toolbar select { width: auto; min-width: 150px; } /* ---------- app shell ---------- */ .shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; background: var(--side-bg); border-right: 1px solid var(--border-soft); padding: 22px 14px 16px; z-index: 40; overflow-y: auto; /* last resort on very short windows: the whole sidebar scrolls */ overscroll-behavior: contain; scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } .brand { display: flex; align-items: center; padding: 4px 8px 18px; flex: none; } .brand img { height: 38px; width: auto; } /* The tab list scrolls when the window is short; the logo and the profile stay pinned. The side margins/padding give the active-tab marker room so scrolling doesn't clip it. */ .nav { display: flex; flex-direction: column; gap: 4px; margin: 4px -14px 0; padding: 2px 14px 8px; flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .nav::-webkit-scrollbar { width: 6px; } .nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } .nav a { position: relative; display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 13px; color: var(--muted); font-weight: 500; font-size: 14.5px; text-decoration: none; transition: background .18s, color .18s, transform .18s var(--ease); } .nav a svg { width: 20px; height: 20px; flex: none; } .nav a:hover { color: var(--text); background: rgb(var(--brand-rgb) / .1); transform: translateX(2px); } .nav a.active { color: var(--text); background: linear-gradient(90deg, rgb(var(--brand-rgb) / .26), rgb(var(--brand-rgb) / .05)); box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / .34), inset 0 1px 0 rgba(255, 255, 255, .06); } .nav a.active svg { color: var(--nav-bar); } .nav a.active::before { content: ''; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--nav-bar); box-shadow: 0 0 14px var(--nav-bar); } .nav .count { margin-left: auto; min-width: 22px; text-align: center; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--grad-gold); color: #2b1c02; } :root[data-theme="light"] .nav .count { background: var(--grad); color: #fff; } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; flex: none; } .sidebar-foot .mini { display: flex; align-items: center; gap: 11px; padding: 9px 14px; color: var(--muted); font-size: 13.5px; background: none; border: 0; border-radius: 11px; cursor: pointer; font-family: var(--font); text-align: left; text-decoration: none; transition: .18s; width: 100%; } .sidebar-foot .mini:hover { color: var(--text); background: rgb(var(--brand-rgb) / .1); text-decoration: none; } .sidebar-foot .mini svg { width: 17px; height: 17px; } .profile { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 15px; background: var(--gloss), var(--panel); box-shadow: var(--card-edge); } .profile .who { min-width: 0; flex: 1; } .profile .name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile .role { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; } .profile button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; } .profile button:hover { color: var(--text); background: var(--panel-3); } .profile .icon-btn { width: 34px; height: 34px; border-radius: 10px; padding: 0; } .profile .icon-btn svg { width: 17px; height: 17px; } .profile svg { width: 19px; height: 19px; display: block; } .main { min-width: 0; } .topbar { display: none; align-items: center; gap: 12px; padding: 12px 16px; position: sticky; top: 0; z-index: 30; background: var(--topbar-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-soft); } .topbar img { height: 30px; } .topbar .grow { flex: 1; } .view { padding: 34px 40px 80px; max-width: 1280px; margin: 0 auto; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; } .page-head p { margin: 6px 0 0; color: var(--muted); } .crumbs { font-size: 13px; color: var(--faint); margin-bottom: 8px; } .crumbs a { color: var(--muted); } .scrim { display: none; } /* ---------- campaigns ---------- */ .c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; } .c-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; background: var(--gloss), var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--card-edge); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } .c-card:hover { transform: translateY(-6px); border-color: rgb(var(--brand-rgb) / .55); box-shadow: var(--card-edge), var(--shadow); text-decoration: none; } .thumb { position: relative; aspect-ratio: 16 / 8; background: var(--grad); overflow: hidden; display: grid; place-items: center; } .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .c-card:hover .thumb img { transform: scale(1.06); } .thumb.placeholder::after { content: ''; position: absolute; inset: 0; background: url('/img/icon-256.png') center / 34% no-repeat; opacity: .32; mix-blend-mode: soft-light; } .thumb .status { position: absolute; top: 12px; right: 12px; } .c-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .c-body h3 { font-size: 18px; font-family: var(--font-display); } .c-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; } .c-meta .amount { font: 700 20px var(--font-display); } .c-meta .amount small { color: var(--faint); font-weight: 500; font-size: 14px; } .c-meta .label { margin: 0 0 3px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .rate-pill { background: var(--gloss), var(--panel-3); border: 1px solid var(--border); border-radius: 12px; padding: 7px 12px; font-weight: 700; font-size: 15px; white-space: nowrap; } .rate-pill small { color: var(--faint); font-weight: 500; } .plat { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--border); color: var(--text); } .plat svg { width: 15px; height: 15px; } .plat-row { display: flex; gap: 6px; } .hero-img { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 6; max-height: 300px; width: 100%; background: var(--grad); margin-bottom: 22px; } .hero-img img { width: 100%; height: 100%; object-fit: cover; } .hero-img.placeholder::after { content: ''; position: absolute; inset: 0; background: url('/img/icon-256.png') center / 22% no-repeat; opacity: .3; mix-blend-mode: soft-light; } .split { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 22px; align-items: start; } .side-sticky { position: sticky; top: 24px; } .prose { white-space: pre-wrap; color: var(--text); opacity: .9; line-height: 1.7; overflow-wrap: anywhere; } /* a bulleted list where every item is ordinary flowing text (bold words and links stay inline) */ .tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .tips li { position: relative; display: block; padding-left: 22px; color: var(--text); opacity: .92; font-size: 14px; line-height: 1.55; } .tips li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .16); } :root[data-theme="light"] .tips li::before { background: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .16); } .rate-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--gloss), var(--panel-2); border: 1px solid var(--border-soft); min-width: 150px; } .rate-card .k { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; } .rate-card .v { font: 700 26px var(--font-display); } .rate-card .v small { font-size: 13px; color: var(--faint); font-weight: 500; } .big-money { font: 700 34px var(--font-display); letter-spacing: -.02em; } .big-money.gold { background: var(--money); -webkit-background-clip: text; background-clip: text; color: transparent; } details.acc { border: 1px solid var(--border-soft); border-radius: 14px; background: var(--panel-2); overflow: hidden; } details.acc + details.acc { margin-top: 12px; } details.acc summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 600; cursor: pointer; } details.acc summary::-webkit-details-marker { display: none; } details.acc summary svg { width: 19px; height: 19px; color: var(--brand-2); } details.acc summary .chev { margin-left: auto; transition: transform .25s var(--ease); color: var(--faint); } details.acc[open] summary .chev { transform: rotate(180deg); } details.acc .acc-body { padding: 4px 18px 20px; animation: fade .35s ease both; } .file-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--border-soft); } .file-row + .file-row { margin-top: 8px; } .file-row svg { width: 18px; height: 18px; color: var(--brand-2); flex: none; } .file-row .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- chart ---------- */ .chart { position: relative; width: 100%; } .chart svg { width: 100%; height: auto; display: block; overflow: visible; } .chart .grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 6; opacity: .7; } .chart .axis { fill: var(--faint); font: 500 11.5px var(--font); } .chart .g-line-a { stop-color: var(--chart-a); } .chart .g-line-b { stop-color: var(--chart-b); } .chart .g-area { stop-color: var(--chart-area); } .chart .line { fill: none; stroke: url(#lineGrad); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: draw 1.6s var(--ease) .15s forwards; } .chart .area { fill: url(#areaGrad); opacity: 0; animation: fade 1.1s ease .7s forwards; } .chart .cursor { stroke: var(--brand-2); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .15s; } .chart .pt { fill: var(--panel-2); stroke: var(--gold); stroke-width: 3; opacity: 0; transition: opacity .15s; } :root[data-theme="light"] .chart .pt { stroke: var(--brand); } .chart.hover .cursor, .chart.hover .pt { opacity: 1; } .chart .tip { position: absolute; pointer-events: none; padding: 9px 12px; border-radius: 11px; background: var(--tip-bg); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 13px; white-space: nowrap; transform: translate(-50%, -120%); opacity: 0; transition: opacity .15s; z-index: 5; } .chart.hover .tip { opacity: 1; } .chart .tip b { display: block; font-family: var(--font-display); font-size: 15px; } .chart .tip span { color: var(--muted); font-size: 12px; } .chart-empty { height: 220px; display: grid; place-items: center; text-align: center; color: var(--faint); } /* ---------- modal / toast ---------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: var(--scrim); backdrop-filter: blur(6px); animation: fade .2s ease both; overflow-y: auto; } .modal { width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--gloss), var(--modal-bg); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow), var(--card-edge); animation: pop .3s var(--ease) both; } .modal.wide { width: min(980px, 100%); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border-soft); } .modal-body { padding: 22px 24px; overflow-y: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-soft); } .toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { min-width: 240px; max-width: 380px; padding: 14px 16px; border-radius: 14px; background: var(--toast-bg); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 14px; animation: pop .3s var(--ease) both; display: flex; gap: 10px; align-items: flex-start; } .toast.ok { border-color: rgb(52 211 153 / .55); } .toast.bad { border-color: rgb(248 113 113 / .6); } .toast svg { width: 18px; height: 18px; flex: none; margin-top: 2px; } .toast.ok svg { color: var(--green); } .toast.bad svg { color: var(--red); } .demo-thumb { width: 64px; height: 44px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); background: var(--panel-3); padding: 0; cursor: zoom-in; display: grid; place-items: center; color: var(--brand-3); transition: .18s; } .demo-thumb:hover { border-color: var(--brand); transform: scale(1.06); } .demo-thumb img { width: 100%; height: 100%; object-fit: cover; } .demo-body { display: grid; place-items: center; background: var(--media-bg); min-height: 260px; border-radius: 14px; overflow: hidden; } .demo-body img, .demo-body video { max-width: 100%; max-height: 62vh; object-fit: contain; display: block; } /* ---------- accounts / wallet ---------- */ .account-card { display: flex; flex-direction: column; gap: 16px; } .account-head { display: flex; align-items: center; gap: 14px; } .account-head .logo { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--panel-3); border: 1px solid var(--border); } .account-head .logo svg { width: 24px; height: 24px; } .handle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 12px; } .handle-row + .handle-row { margin-top: 8px; } .handle-row .h { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dashed { border: 1.5px dashed var(--border); border-radius: 14px; padding: 26px 18px; text-align: center; color: var(--muted); } .soon { opacity: .62; } .balance-card { background: var(--gloss), linear-gradient(135deg, rgb(var(--brand-rgb) / .34), var(--panel) 62%); border: 1px solid rgb(var(--brand-rgb) / .38); } .balance-card .big-money { font-size: 54px; margin: 8px 0 4px; line-height: 1.05; } .kv { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .kv:last-child { border-bottom: 0; } .kv span:first-child { color: var(--muted); } .method { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: 13px; background: var(--bg-2); } .method + .method { margin-top: 8px; } .method .grow { flex: 1; min-width: 0; } /* ---------- leaderboard ---------- */ .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; max-width: 760px; margin: 0 auto 26px; } .podium .spot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; } .podium .who { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } .podium .who b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); } .podium .avatar { width: 64px; height: 64px; border-width: 2px; } .podium .first .avatar { width: 84px; height: 84px; border-color: var(--gold); box-shadow: 0 0 0 5px rgb(var(--gold-rgb) / .18), 0 10px 30px rgb(var(--gold-rgb) / .3); } .podium .second .avatar { border-color: #c5c9d6; } .podium .third .avatar { border-color: #cf9a6a; } .podium .pillar { width: 100%; border-radius: 16px 16px 6px 6px; position: relative; overflow: hidden; display: grid; place-items: start center; padding-top: 14px; background: var(--gloss), linear-gradient(180deg, rgb(var(--brand-rgb) / .55), rgb(var(--brand-rgb) / .12)); border: 1px solid rgb(var(--brand-rgb) / .4); transform-origin: bottom; animation: rise-bar .9s var(--ease) both; } .podium .first .pillar { height: 150px; background: var(--gloss), linear-gradient(180deg, rgb(var(--gold-rgb) / .6), rgb(var(--gold-rgb) / .1)); border-color: rgb(var(--gold-rgb) / .55); animation-delay: .1s; } .podium .second .pillar { height: 112px; animation-delay: .25s; } .podium .third .pillar { height: 84px; animation-delay: .4s; } .podium .rank { font: 800 34px var(--font-display); } .podium .first .rank { background: var(--money); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 44px; } .podium .views { font-weight: 700; } .lb-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); transition: background .15s; } .lb-row:last-child { border-bottom: 0; } .lb-row:hover { background: rgb(var(--brand-rgb) / .06); } .lb-row.me { background: rgb(var(--gold-rgb) / .09); box-shadow: inset 3px 0 0 var(--gold); } .lb-row .pos { font: 700 16px var(--font-display); color: var(--muted); text-align: center; } .lb-row .stat-col { text-align: right; font-variant-numeric: tabular-nums; } .lb-row .stat-col small { display: block; color: var(--faint); font-size: 11.5px; } /* ---------- sign-in / landing / documents ---------- */ body.auth-page { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } .auth-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); } .auth-bg::before { content: ''; position: absolute; inset: 0; background: url('/img/bg.jpg') center / cover; opacity: .38; filter: saturate(1.2); } .auth-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1100px 760px at 80% 25%, transparent, var(--bg) 82%), linear-gradient(180deg, transparent, var(--bg) 98%); } :root[data-theme="light"] .auth-bg::before { opacity: .3; filter: saturate(.9) brightness(1.25); } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .62; } .orb.a { width: 480px; height: 480px; background: #6d3fd8; left: -120px; top: -100px; animation: float 16s ease-in-out infinite; } .orb.b { width: 420px; height: 420px; background: #b26ae6; right: -80px; bottom: 6%; animation: float2 19s ease-in-out infinite; } .orb.c { width: 260px; height: 260px; background: var(--gold); left: 42%; top: 46%; opacity: .16; animation: float 22s ease-in-out infinite reverse; } :root[data-theme="light"] .orb { opacity: .45; } .auth-top { position: absolute; top: 18px; right: 22px; z-index: 5; } .auth-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 44px 32px 30px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 480px); gap: 60px; align-items: center; } .auth-hero .logo-full { width: min(430px, 100%); display: block; margin-bottom: 30px; animation: rise .8s var(--ease) both; } .auth-hero h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; animation: rise .8s var(--ease) .1s both; } .auth-hero h1 .grad { background: linear-gradient(90deg, var(--brand-2), #e9a6ff, var(--gold), var(--brand-2)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s linear infinite; } .auth-hero .lead { font-size: 19px; color: var(--muted); max-width: 520px; margin: 22px 0 30px; animation: rise .8s var(--ease) .2s both; } .chips { display: flex; flex-wrap: wrap; gap: 14px; } .chip-card { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 16px; background: var(--gloss), var(--panel); border: 1px solid var(--border-soft); box-shadow: var(--card-edge); backdrop-filter: blur(8px); animation: rise .8s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * .1s); transition: transform .25s var(--ease), border-color .25s; } .chip-card:hover { transform: translateY(-4px); border-color: var(--brand); } .chip-card .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgb(var(--brand-rgb) / .16); color: var(--brand-2); } .chip-card .ic svg { width: 20px; height: 20px; } .chip-card b { display: block; font-family: var(--font-display); font-size: 15px; } .chip-card span { color: var(--faint); font-size: 12.5px; } .auth-card { padding: 0; overflow: hidden; border-radius: 26px; background: var(--gloss), var(--modal-bg); border: 1px solid var(--border); box-shadow: var(--shadow), var(--card-edge), 0 0 80px rgb(var(--brand-rgb) / .16); backdrop-filter: blur(14px); animation: pop .9s var(--ease) .15s both; } .auth-card .top { padding: 44px 40px 36px; text-align: center; } .auth-card .mark { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 22px; box-shadow: 0 14px 40px rgba(110, 60, 210, .5), 0 0 0 1px rgba(255, 255, 255, .12); animation: float 7s ease-in-out infinite; } .auth-card h2 { font-size: 27px; margin-bottom: 8px; } .auth-card .bottom { padding: 20px 40px; text-align: center; border-top: 1px solid var(--border-soft); background: var(--bg-2); color: var(--muted); font-size: 14px; } .auth-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 32px; border-top: 1px solid var(--border-soft); color: var(--faint); font-size: 13.5px; background: var(--topbar-bg); backdrop-filter: blur(8px); } .auth-foot nav { display: flex; gap: 22px; } .auth-foot a { color: var(--muted); } .auth-foot a:hover { color: var(--text); } .doc { max-width: 820px; margin: 0 auto; padding: 40px 28px 80px; } .doc h1 { font-size: 36px; margin: 24px 0 6px; } .doc h2 { font-size: 21px; margin: 34px 0 10px; } .doc p, .doc li { color: var(--text); opacity: .9; } .doc ul { padding-left: 22px; } .doc li { margin-bottom: 6px; } .doc .updated { color: var(--faint); font-size: 14px; opacity: 1; } .doc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 28px; max-width: 1100px; margin: 0 auto; } .doc-top img { height: 40px; } .doc-top .row { gap: 10px; } .public-wrap { max-width: 900px; margin: 0 auto; padding: 8px 24px 80px; } /* ---------- responsive ---------- */ @media (max-width: 1100px) { .split { grid-template-columns: 1fr; } .side-sticky { position: static; } .auth-main { grid-template-columns: 1fr; gap: 40px; padding-top: 30px; } .auth-card { max-width: 520px; width: 100%; justify-self: center; } } @media (max-width: 900px) { .shell { display: block; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .35s var(--ease); } .shell.nav-open .sidebar { transform: none; box-shadow: 0 0 80px rgba(0, 0, 0, .55); } .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .3s; } .shell.nav-open .scrim { opacity: 1; pointer-events: auto; } .topbar { display: flex; } .view { padding: 22px 16px 60px; } h1 { font-size: 25px; } .form-grid .span-2 { grid-column: auto; } .stat .value { font-size: 27px; } .balance-card .big-money { font-size: 42px; } .auth-main { padding: 26px 18px; } .auth-top { top: 12px; right: 14px; } .auth-card .top { padding: 34px 24px 28px; } .auth-card .bottom { padding: 18px 24px; } .toasts { left: 16px; right: 16px; bottom: 16px; } .modal-head, .modal-body, .modal-foot { padding-left: 18px; padding-right: 18px; } .hero-img { aspect-ratio: 16 / 8; } .grid.two, .grid.three { grid-template-columns: 1fr; } .podium { gap: 8px; } .podium .first .avatar { width: 68px; height: 68px; } .podium .avatar { width: 52px; height: 52px; } .lb-row { grid-template-columns: 34px minmax(0, 1fr) auto; } .lb-row .clips-col { display: none; } }