:root { --bg: #0a0e17; --bg2: #111827; --bg3: #1f2937; --bg4: #374151; --text: #f3f4f6; --text2: #9ca3af; --accent: #f59e0b; --accent2: #fbbf24; --green: #10b981; --red: #ef4444; --blue: #3b82f6; --border: #1f2937; --radius: 10px; } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif, 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Arabic', 'Noto Naskh Arabic', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Microsoft JhengHei', 'Microsoft YaHei', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'PingFang TC', 'PingFang SC'; } /* ── i18n: multilingual font stacks ─────────────────────────── */ /* Devanagari (hi) */ [lang="hi"], :lang(hi) { font-family: 'Noto Sans Devanagari', 'Mangal', 'Nirmala UI', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* Japanese */ [lang="ja"], :lang(ja) { font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'MS PGothic', 'Satoshi', -apple-system, 'Segoe UI', system-ui, sans-serif; } /* Simplified Chinese (zh-CN) */ [lang="zh-CN"], :lang(zh-CN) { font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', 'Satoshi', -apple-system, 'Segoe UI', system-ui, sans-serif; } /* Traditional Chinese (zh-TW) */ [lang="zh-TW"], :lang(zh-TW) { font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Source Han Sans TC', 'Satoshi', -apple-system, 'Segoe UI', system-ui, sans-serif; } /* Arabic (ar) — Naskh reads most naturally at body sizes */ [lang="ar"], :lang(ar) { font-family: 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', 'Traditional Arabic', 'Satoshi', system-ui, sans-serif; line-height: 1.9; } /* ── i18n: RTL (Arabic) ─────────────────────────────────────── */ [dir="rtl"] { text-align: right; } [dir="rtl"] .dropdown-menu, [dir="rtl"] .dropdown-menu-end { text-align: right; } /* Bootstrap 5.3+ ships rtl support only via rtl build; patch the common directional utilities and float placements we use in templates */ [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .dropdown-menu { --bs-dropdown-min-width: 12rem; left: auto; } /* badges/pills and flex rows stay fine; flip the few absolutely-positioned decorations we own */ [dir="rtl"] .acc-avatar { margin-left: auto; margin-right: 0; } /* keep code/log boxes LTR — logs, JSON, credentials are latin */ [dir="rtl"] .log-box, [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .form-control[readonly] { direction: ltr; text-align: left; } /* email/uid/proxy inputs are better LTR too */ [dir="rtl"] input[type="url"], [dir="rtl"] input[type="email"], [dir="rtl"] input[name="proxy"], [dir="rtl"] .ltr-input { direction: ltr; text-align: left; } /* Navbar */ .iscope-navbar { background: var(--bg2) !important; border-bottom: 1px solid var(--border); } .iscope-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--accent) !important; letter-spacing: -.5px; } .iscope-brand img { height: 32px; border-radius: 6px; } /* Cards */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); } .card-header { background: var(--bg3); border-bottom: 1px solid var(--border); } .text-muted, .text-body-secondary, .form-text { color: var(--text2) !important; } /* Forms */ .form-control, .form-select { background: var(--bg3); border: 1px solid var(--border); color: var(--text); } .form-control:focus, .form-select:focus { background: var(--bg3); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 .2rem rgba(245,158,11,.25); } .form-control::placeholder { color: var(--text2); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } /* Buttons */ .btn-primary, .btn-success, .btn-warning { background: linear-gradient(135deg, var(--accent), #d97706); border: none; color: #000; font-weight: 600; } .btn-primary:hover, .btn-success:hover, .btn-warning:hover { opacity: .9; color: #000; } .btn-outline-warning, .btn-outline-light, .btn-outline-secondary { color: var(--text2); border-color: var(--border); } .btn-outline-warning:hover { background: var(--accent); color: #000; border-color: var(--accent); } .btn-check:checked + .btn-outline-warning { background: var(--accent); color: #000; border-color: var(--accent); } /* Brand card (login/register) */ .brand-card { max-width: 420px; margin: 60px auto; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 40px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .brand-header { text-align: center; margin-bottom: 28px; } .brand-header img { height: 64px; margin-bottom: 10px; border-radius: 12px; } .brand-header h1 { font-size: 1.5rem; font-weight: 800; color: var(--accent); letter-spacing: -.5px; } .brand-header p { font-size: .8rem; color: var(--text2); margin-top: 4px; } /* Tables */ .table { color: var(--text); } .table > :not(caption) > * > * { background: transparent; border-color: var(--border); color: var(--text); } /* Badges */ .badge.bg-success { background: var(--green) !important; } .badge.bg-danger { background: var(--red) !important; } .badge.bg-secondary { background: var(--bg4) !important; } /* Live log box */ .log-box { background: #000; border: 1px solid var(--border); font-family: 'SF Mono', Consolas, monospace; } a { color: var(--accent2); } a:hover { color: var(--accent); } /* ════════════════════════════════════════════════════════════════════ Cosmetics engine (2026-09-18) — animated avatar frames, header effects and banners. Pure CSS: GPU-friendly, no JS per frame. Marketplace-ready: every item in cosmetic_items maps to one class. ════════════════════════════════════════════════════════════════════ */ /* ── Card header layout ── */ .acc-header { position: relative; border-radius: .4rem .4rem 0 0; } /* no overflow clip — dropdown menus must escape the card */ .acc-header-content { position: relative; z-index: 2; } .acc-header-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; } .acc-decorate { display: flex; gap: .35rem; flex-wrap: wrap; margin: .35rem 0 .5rem; } .acc-cosmo-btn { font-size: .72rem; padding: .1rem .45rem; } .acc-cosmo-menu { min-width: 230px; } /* menus must be fully opaque + raised — toggles/log may never show through */ .acc-cosmo-menu { background-color: #171c26 !important; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 32px rgba(0,0,0,.5); } .acc-avatar { position: relative; isolation: isolate; display: inline-flex; width: 40px; height: 40px; border-radius: 50%; } .acc-avatar img { border-radius: 50%; } .acc-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #343a40; color: #adb5bd; font-weight: 600; } /* ── Frames (avatar ring) ── */ .fx-frame-none::after { content: none; } .fx-frame-gold::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(#ffd700, #b8860b, #fff3b0, #ffd700); animation: fx-spin 3s linear infinite; z-index: -1; } .fx-frame-flame::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(#ff4500, #ffae00, #ff2200, #ffae00, #ff4500); filter: blur(1.5px); animation: fx-spin 1.6s linear infinite, fx-flicker .5s ease-in-out infinite alternate; z-index: -1; } .fx-frame-ice::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(#7fdfff, #d6f4ff, #4fc3f7, #d6f4ff, #7fdfff); animation: fx-spin 5s linear infinite, fx-pulse 1.8s ease-in-out infinite; z-index: -1; } .fx-frame-rainbow::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red); animation: fx-spin 2.4s linear infinite; z-index: -1; } /* ── Header effects (overlay layer) ── */ .fx-none { } .fx-effect-sparkle { background-image: radial-gradient(circle 2px at 12% 30%, #fff 60%, transparent 65%), radial-gradient(circle 2px at 34% 65%, #ffe9a8 60%, transparent 65%), radial-gradient(circle 2px at 58% 25%, #fff 60%, transparent 65%), radial-gradient(circle 2px at 76% 60%, #d1ecff 60%, transparent 65%), radial-gradient(circle 2px at 92% 35%, #fff 60%, transparent 65%); background-size: 100% 100%; animation: fx-twinkle 2.2s ease-in-out infinite; } .fx-effect-glow { animation: fx-breathe 3s ease-in-out infinite; box-shadow: inset 0 0 34px rgba(255, 215, 0, .28); } .fx-effect-storm { background: linear-gradient(transparent 55%, rgba(255,255,255,.14) 56%, transparent 60%); animation: fx-flash 6s steps(1) infinite; } /* ── Banners (header background) ── */ .fx-banner-none { } .fx-banner-sunset { background: linear-gradient(115deg, #ff9a44, #ff6e7f, #b6195d); background-size: 260% 260%; animation: fx-flow 9s ease infinite; } .fx-banner-royal { background: linear-gradient(115deg, #2b1055, #7597de00 60%, #3f2b96), #241a4f; background-size: 260% 260%; animation: fx-flow 11s ease infinite; } .fx-banner-abyss { background: linear-gradient(115deg, #0f2027, #203a43, #2c5364); background-size: 260% 260%; animation: fx-flow 8s ease infinite; } .fx-banner-emperor { background: linear-gradient(115deg, #7b6723, #d4af37, #f9e29c, #b8860b); background-size: 260% 260%; animation: fx-flow 7s ease infinite; } /* ── Glassmorphism account cards (2026-09-20) ── */ .card.acc-card { background: rgba(19,23,32,0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 12px 34px rgba(0,0,0,.38); } /* Banners sit on dark themes — banner-aware ink for every button/label. White ink: no banner, Royal Purple, Ocean Abyss. Black ink: Sunset Dunes, Emperor Gold. */ .acc-header[class*="fx-banner-"]:not(.fx-banner-none) { border-radius: .4rem .4rem 0 0; } .acc-header { --acc-ink: rgba(255,255,255,.94); --acc-ink-muted: rgba(255,255,255,.72); --acc-ink-border: rgba(255,255,255,.50); } .acc-header.fx-banner-sunset, .acc-header.fx-banner-emperor { --acc-ink: rgba(12,12,14,.90); --acc-ink-muted: rgba(12,12,14,.66); --acc-ink-border: rgba(12,12,14,.55); } .acc-header .card-title, .acc-header .acc-label, .acc-header .form-check-label, .acc-header .qt-state, .acc-header .text-info, .acc-header .btn { color: var(--acc-ink) !important; } .acc-header .text-muted { color: var(--acc-ink-muted) !important; } .acc-header .btn-outline-secondary, .acc-header .btn-outline-warning, .acc-header .btn-outline-danger, .acc-header .btn-outline-success, .acc-header .btn-outline-dark, .acc-header .btn-outline-primary { border-color: var(--acc-ink-border) !important; } /* the log box keeps its own dark surface — always light text */ .acc-header .log-box, .acc-header .log-box * { color: var(--text) !important; } /* ── Keyframes ── */ @keyframes fx-spin { to { transform: rotate(360deg); } } @keyframes fx-flicker { from { opacity: .82; } to { opacity: 1; } } @keyframes fx-pulse { 0%,100% { filter: blur(.6px) brightness(1); } 50% { filter: blur(1.4px) brightness(1.25); } } @keyframes fx-twinkle { 0%,100% { opacity: .25; } 50% { opacity: .95; } } @keyframes fx-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } } @keyframes fx-flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes fx-flash { 0%, 92%, 100% { opacity: 0; } 93% { opacity: .9; } 94% { opacity: .1; } 95% { opacity: .8; } 96% { opacity: 0; } } /* ── Animated card background video (2026-09-20) ── */ video.acc-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.10; pointer-events: none; z-index: 0; border-radius: .375rem; } /* every other header child paints above the video; fx keeps its absolute layer. .acc-header-content is EXCLUDED — it must keep its own higher z-index (2/3) so the cosmetic dropdowns can never fall under the toggle