@font-face { font-family: 'Inter'; src: url('fonts/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; } /* ============================================================ THEME TOKENS — modeled on the Discord Developer Portal. Dark is the default; [data-theme="light"] on flips it. Brand accent (violet -> cyan) is reserved for the logo and a few highlights; the interactive/primary color is Discord blurple. ============================================================ */ :root, :root[data-theme="dark"] { /* surfaces — MEE6-matched: flat, cool neutral-dark, minimal elevation */ --bg: #1f2129; /* page base (MEE6 exact) */ --bg-elev: #24262f; /* cards / panels (barely raised) */ --bg-elev-2: #2a2d38; /* hover / active nav / raised */ --bg-sunken: #191b20; /* inputs sit BELOW the surface */ --line: #2f323d; /* hairline borders */ --line-soft: rgba(255,255,255,0.05); --text: #f2f3f5; --text-dim: #b5bac1; --text-faint: #82838b; /* interactive = MEE6 sky-blue (toggles, buttons) */ --blue: #4c8df5; --blue-hover: #3f7de0; --blue-press: #366fc9; --link: #7fb2ff; /* brand accent — now blue to match MEE6 (was violet) */ --accent: #4c8df5; --accent-cyan: #38bdf8; --accent-2: #38bdf8; --grad: linear-gradient(135deg, #4c8df5 0%, #3f8ff0 45%, #38bdf8 100%); --grad-text: linear-gradient(120deg, #5b9dff 0%, #38bdf8 60%, #22d3ee 100%); /* ambient page glow — nearly flat like MEE6, faint cool tint only */ --glow-a: rgba(76,141,245,0.07); /* faint blue, top-right */ --glow-b: rgba(56,189,248,0.04); /* faint cyan wash */ --glow-c: rgba(76,141,245,0.02); /* barely there, bottom-left */ --sidebar-bg: #1f2129; /* flat, same as bg (MEE6-style) */ --danger: #f0556b; --success: #23a55a; --warn: #f7b955; --shadow-card: 0 1px 0 rgba(0,0,0,0.15); --shadow-pop: 0 16px 40px rgba(0,0,0,0.45); --scroll-thumb: #3a3d47; --scroll-thumb-hover: #4a4d59; --radius: 8px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } :root[data-theme="light"] { --bg: #fbfbfb; --bg-elev: #ffffff; --bg-elev-2: #eceef5; /* hover / active nav */ --bg-sunken: #f3f4f7; /* inputs */ --line: #e0e1e6; --line-soft: rgba(0,0,0,0.06); --text: #1e1f22; --text-dim: #4e5058; --text-faint: #82838b; --blue: #5865f2; --blue-hover: #4752c4; --blue-press: #3c45a5; --link: #4b57e0; --glow-a: rgba(88,101,242,0.22); --glow-b: rgba(56,189,248,0.12); --glow-c: rgba(56,189,248,0.10); --sidebar-bg: transparent; --danger: #d83c4e; --success: #1a8245; --warn: #c07f18; --shadow-card: 0 1px 2px rgba(0,0,0,0.05); --shadow-pop: 0 12px 32px rgba(30,31,34,0.14); --scroll-thumb: #c8cad2; --scroll-thumb-hover: #b3b6c0; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ---- Ambient Discord-style corner gradient over the whole app ---- */ .shell2 { position: relative; min-height: 100vh; background: radial-gradient(1200px 620px at 100% -8%, var(--glow-a), transparent 60%), radial-gradient(1100px 700px at 88% 4%, var(--glow-b), transparent 55%), radial-gradient(900px 700px at -6% 108%, var(--glow-c), transparent 55%), var(--bg); background-attachment: fixed; transition: background-color .25s ease; } /* Dashboard renders at natural 1:1 scale (MEE6-like). Bump this if you ever want a larger overall zoom again. */ .shell2 { zoom: 1; } a { color: inherit; text-decoration: none; } /* ---- Landing ---- */ .landing { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 70% -10%, rgba(76,141,245,0.22), transparent), radial-gradient(700px 400px at 10% 110%, rgba(34,211,238,0.16), transparent); } .landing-card { max-width: 460px; text-align: center; } .landing .logo { width: 96px; height: 96px; margin: 0 auto 22px; display: block; filter: drop-shadow(0 8px 30px rgba(76,141,245,0.45)); } .landing .glyph { font-family: var(--mono); font-size: 13px; letter-spacing: 0.3em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; margin-bottom: 20px; } .landing h1 { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 16px; } .landing h1 span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing p { color: var(--text-dim); margin-bottom: 32px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:hover { background: var(--bg-elev-2); border-color: var(--line); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--blue); border-color: transparent; color: #fff; } .btn.primary:hover { background: var(--blue-hover); box-shadow: none; filter: none; } .btn.primary:active { background: var(--blue-press); } .btn.ghost { background: transparent; border-color: transparent; } .btn.ghost:hover { background: var(--bg-elev-2); } .btn.danger { color: #fff; background: var(--danger); border-color: transparent; } .btn.danger:hover { filter: brightness(1.08); background: var(--danger); } .btn.sm { padding: 7px 12px; font-size: 13px; } /* ---- Layout ---- */ .shell { display: flex; min-height: 100vh; gap: 0; padding: 0; } .sidebar { width: 290px; flex-shrink: 0; background: var(--sidebar-bg); margin: 0; border-radius: 0; border-right: 1px solid var(--line-soft); padding: 18px 14px; position: sticky; top: 68px; height: calc(100vh - 28px); overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 22px; font-weight: 800; font-size: 22px; letter-spacing: 0.02em; } .brand img.logo { width: 34px; height: 34px; border-radius: 8px; } .brand .name { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); } .nav-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); padding: 20px 12px 8px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 6px; position: relative; color: var(--text-dim); font-size: 15px; font-weight: 500; cursor: pointer; margin-bottom: 1px; transition: background .12s ease, color .12s ease; } .nav-item:hover { background: var(--bg-elev-2); color: var(--text); } .nav-item.active { background: var(--bg-elev-2); color: var(--text); font-weight: 600; } .nav-item .ic { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; opacity: 0.72; } .nav-item .ic svg { width: 18px; height: 18px; display: block; } .nav-item:hover .ic, .nav-item.active .ic { opacity: 1; } /* label takes the row so the crown can sit flush right, like MEE6 */ .nav-item .nav-label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* premium crown badge on features with premium perks */ .nav-crown { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; color: #ffce54; opacity: 0.9; } .nav-crown svg { width: 15px; height: 15px; display: block; } .main { flex: 1; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: transparent; position: sticky; top: 0; z-index: 10; } .topbar .user { display: flex; align-items: center; gap: 12px; font-size: 15px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elev-2); object-fit: cover; } /* avatar decoration (the animated frame overlay) */ .avatar-wrap { position: relative; width: 36px; height: 36px; flex-shrink: 0; display: inline-block; } .avatar-wrap .avatar { display: block; } .avatar-deco { position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; /* ~1.25x the avatar, Discord's ratio */ transform: translate(-50%, -50%); pointer-events: none; object-fit: contain; } .content { padding: 20px 40px 48px; max-width: 1560px; } .page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 5px; } .page-sub { color: var(--text-dim); margin-bottom: 28px; font-size: 14.5px; } /* ---- Server picker ---- */ .guild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .guild-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, transform .08s; } .guild-card:hover { border-color: var(--blue); transform: translateY(-2px); } .guild-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-elev-2); display: grid; place-items: center; font-weight: 700; color: var(--text-dim); object-fit: cover; flex-shrink: 0; } .guild-card .gname { font-weight: 600; font-size: 14px; } .guild-card .gmeta { font-size: 12px; color: var(--text-faint); } .guild-card.invite { opacity: 0.7; } .guild-card.invite:hover { opacity: 1; border-color: var(--accent-2); } /* ---- Cards / forms ---- */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; box-shadow: var(--shadow-card); } .card h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .card .desc { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text); } .field .hint { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; } input, select, textarea { width: 100%; padding: 10px 12px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-family: var(--sans); font-size: 14px; transition: border-color .12s ease, box-shadow .12s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); } textarea { resize: vertical; min-height: 72px; } .toggle { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; margin-left: 16px; } .toggle input { display: none; } .toggle .track { width: 44px; height: 24px; border-radius: 12px; flex-shrink: 0; background: color-mix(in srgb, var(--text-faint) 55%, transparent); position: relative; transition: background .15s; } .toggle .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform .15s, background .15s; } .toggle input:checked + .track { background: var(--blue); } .toggle input:checked + .track::after { transform: translateX(20px); background: #fff; } .row { display: flex; gap: 10px; align-items: flex-end; } .row .field { flex: 1; margin-bottom: 0; } .save-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; margin-top: 8px; } /* ---- Leaderboard ---- */ .lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .lb-row:last-child { border-bottom: none; } .lb-rank { font-family: var(--mono); font-size: 14px; color: var(--text-faint); width: 36px; } .lb-rank.top { color: var(--accent-2); } .lb-id { flex: 1; font-size: 14px; } .lb-level { font-weight: 700; } .lb-xp { color: var(--text-dim); font-size: 13px; } /* ---- List items (commands, roles) ---- */ .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; } .list-item .tag { font-family: var(--mono); font-size: 13px; background: var(--bg-elev-2); padding: 3px 8px; border-radius: 6px; color: #7fb2ff; } .list-item .body { flex: 1; font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.4); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } .toast.err { background: var(--danger); color: #fff; } .empty { text-align: center; padding: 40px; color: var(--text-faint); font-size: 14px; } .spinner { text-align: center; padding: 60px; color: var(--text-dim); } @media (max-width: 720px) { .shell2 { --gutter: 0px; } .sidebar { position: fixed; left: 0; top: 0; height: 100dvh; width: 270px; transform: translateX(-100%); transition: transform .32s cubic-bezier(.16,1,.3,1); z-index: 60; box-shadow: 0 0 40px rgba(0,0,0,.5); } .sidebar.open { transform: none; } .content { padding: 18px 16px 60px; } .menu-btn { display: inline-flex !important; } /* backdrop */ .sb-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 55; backdrop-filter: blur(2px); } .sb-backdrop.show { opacity: 1; pointer-events: auto; } /* topbar stays put */ .topbar { position: sticky; top: 0; z-index: 40; } .page-title { font-size: 22px; } .row { grid-template-columns: 1fr !important; } /* comfortable tap targets */ .nav-item { padding-top: 12px; padding-bottom: 12px; } .btn { min-height: 40px; } } .menu-btn { display: none; } /* ============================================================ PLUGIN GRID HOMEPAGE (MEE6-style) ============================================================ */ .section-head { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 16px; } .section-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; position: relative; padding-bottom: 8px; } .section-head h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; border-radius: 3px; background: var(--grad); } .plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .plugin-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; min-height: 188px; position: relative; transition: border-color .15s, transform .08s, box-shadow .15s; cursor: pointer; } .plugin-card:hover { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--blue) 14%, transparent); } .plugin-card .badge { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .badge.new { background: color-mix(in srgb, var(--accent-cyan) 16%, transparent); color: color-mix(in srgb, var(--accent-cyan) 70%, var(--text)); } .badge.active-badge { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); } .plugin-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); font-size: 22px; margin-bottom: 14px; box-shadow: 0 6px 18px rgba(91,107,240,0.3); } .plugin-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; } .plugin-card .pdesc { font-size: 13px; color: var(--text-dim); line-height: 1.5; flex: 1; margin-bottom: 14px; } .plugin-action { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: var(--bg-sunken); transition: background .15s, border-color .15s; } .plugin-card:hover .plugin-action { border-color: var(--line); } .plugin-action.is-active { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); } .plugin-action .ico { font-size: 14px; } /* ============================================================ COLOR PICKER ============================================================ */ /* compact swatch that opens the colour wheel */ .cp-field { display: inline-flex; align-items: center; gap: 10px; } .cp-swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--line); cursor: pointer; padding: 0; transition: border-color .15s ease, transform .08s ease; } .cp-swatch:hover { border-color: var(--text-faint); transform: scale(1.04); } .cp-hexlabel { font-family: var(--mono); font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .02em; } /* colour wheel popover (Discord-style) */ .color-wheel-pop { position: fixed; z-index: 200; width: 236px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-pop); animation: cwPop .16s ease both; } @keyframes cwPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .cw-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin: 2px 0 6px; } .cw-palette, .cw-history { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .cw-sw { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); transition: transform .1s; } .cw-sw:hover { transform: scale(1.18); } .cw-empty { font-size: 12px; color: var(--text-faint); padding: 1px 0; } .cw-sv { position: relative; width: 100%; height: 130px; border-radius: 8px; cursor: crosshair; margin-bottom: 12px; touch-action: none; } .cw-sv-handle { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transform: translate(-50%,-50%); pointer-events: none; } .cw-hue { position: relative; width: 100%; height: 12px; border-radius: 7px; cursor: pointer; margin-bottom: 12px; touch-action: none; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } .cw-hue-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transform: translate(-50%,-50%); pointer-events: none; } .cw-inputs { display: flex; gap: 6px; } .cw-inp { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; } .cw-inp:first-child { flex: 1.6; } .cw-inp input { width: 100%; text-align: center; font-family: var(--mono); font-size: 12px; padding: 6px 4px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px; color: var(--text); } .cw-inp input:focus { outline: none; border-color: var(--blue); } .cw-cap { font-size: 10px; color: var(--text-faint); text-transform: uppercase; } /* MEE6-style Text / Embed segmented tabs */ .seg-tabs { display: inline-flex; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 3px; margin: 16px 0 12px; } .seg-btn { border: none; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 16px; border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease; } .seg-btn:hover { color: var(--text); } .seg-btn.on { background: var(--bg-elev-2); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .msg-editor-wrap { margin-top: 4px; } .wc-preview { width: 100%; max-width: 480px; border-radius: 10px; margin-top: 6px; background: var(--bg-elev-2); display: block; } .wc-range { width: 100%; max-width: 480px; accent-color: var(--blue); cursor: pointer; } .range-val { font-family: var(--mono); font-size: 12px; color: var(--text-dim); } /* ============================================================ SEARCHABLE DROPDOWN (channel / role pickers) ============================================================ */ .combo { position: relative; } .combo-control { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 14px; min-height: 42px; } .combo-control:hover { border-color: var(--text-faint); } .combo.open .combo-control { border-color: var(--blue); } .combo-control .chev { color: var(--text-faint); transition: transform .15s; } .combo.open .combo-control .chev { transform: rotate(180deg); } .combo-value { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; min-width: 0; } .combo-value-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-value.placeholder { color: var(--text-faint); } /* Discord-style role dot */ .role-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset; } .combo-panel { position: absolute; left: 0; right: auto; top: calc(100% + 6px); z-index: 9999; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); overflow: hidden; display: none; } .combo.open .combo-panel, .combo-panel.open { display: block; } .combo-search { width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 11px 12px; font-size: 13px; } .combo-search:focus { border-color: var(--blue); box-shadow: none; } .combo-list { max-height: 220px; overflow-y: auto; } .combo-opt { padding: 9px 12px; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; gap: 9px; } .combo-opt:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); } .combo-opt.sel { color: var(--blue); } .combo-opt .hash { color: var(--text-faint); } .combo-hash { color: var(--text-faint); font-weight: 600; margin-right: 1px; flex-shrink: 0; } /* Discord-style category header inside the dropdown */ .combo-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); position: sticky; top: 0; background: var(--bg-elev-2); z-index: 1; } .combo-group:first-child { padding-top: 6px; } .combo-empty { padding: 14px 12px; color: var(--text-faint); font-size: 13px; text-align: center; } /* multi-select chips */ .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; font-size: 12.5px; background: var(--bg-elev-2); border: 1px solid var(--line); } .chip .x { cursor: pointer; color: var(--text-faint); font-weight: 700; } .chip .x:hover { color: var(--danger); } /* card section divider used on config pages */ .card .divider { height: 1px; background: var(--line); margin: 16px 0; } /* ============================================================ DISCORD-STYLE EMBED PREVIEW ============================================================ */ .dc-preview { background: #313338; /* Discord message area */ border-radius: 8px; padding: 16px; } .dc-preview-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .dc-msg { display: flex; gap: 14px; } .dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--grad); display: grid; place-items: center; overflow: hidden; } .dc-avatar img { width: 100%; height: 100%; object-fit: cover; } .dc-body { min-width: 0; flex: 1; } .dc-author { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .dc-name { color: #fff; font-weight: 600; font-size: 15px; } .dc-bot-tag { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.02em; } .dc-time { color: #949ba4; font-size: 12px; } .dc-content { color: #dbdee1; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; } /* the embed card */ .dc-embed { margin-top: 8px; max-width: 432px; background: var(--bg-elev); border-radius: 4px; border-left: 4px solid #4c8df5; padding: 12px 16px 16px; } .dc-embed-title { color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 6px; } .dc-embed-desc { color: #dbdee1; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; } .dc-embed-img { margin-top: 12px; border-radius: 4px; max-width: 100%; display: block; max-height: 240px; object-fit: cover; } .dc-embed-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #949ba4; font-size: 12px; } .dc-embed.empty .dc-embed-desc { color: #6d7079; font-style: italic; } /* reactions row under a message (for reaction-role / giveaway previews) */ .dc-reactions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .dc-reaction { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 13px; color: #b5bac1; } .dc-reaction .cnt { color: #b5bac1; font-variant-numeric: tabular-nums; } /* a Discord-style button row (tickets) */ .dc-buttons { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .dc-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; background: #5865f2; color: #fff; } .dc-button.secondary { background: #4e5058; } .dc-button.danger { background: #da373c; } /* two-column layout: form on left, sticky preview on right */ .edit-split { display: grid; grid-template-columns: 1fr 432px; gap: 20px; align-items: start; } .edit-split .preview-col { position: sticky; top: 88px; } @media (max-width: 1100px) { .edit-split { grid-template-columns: 1fr; } .edit-split .preview-col { position: static; } } /* ============================================================ INLINE-EDITABLE EMBED (the preview IS the editor) ============================================================ */ .ee-wrap { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .ee-drag { cursor: grab; color: var(--text-faint); font-size: 18px; line-height: 1; padding: 6px 2px; user-select: none; flex-shrink: 0; align-self: center; } .ee-drag:active { cursor: grabbing; } /* the editable embed card, styled like a Discord embed */ .ee-embed { flex: 1; min-width: 0; background: var(--bg-elev); border-radius: 6px; border-left: 4px solid #4c8df5; padding: 14px 16px 16px; position: relative; } .ee-colorbar { position: absolute; left: -4px; top: 0; bottom: 0; width: 4px; border-radius: 6px 0 0 6px; cursor: pointer; } .ee-colorbar:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.25); } /* MEE6-style: a pencil cue that smoothly fades in when you hover the embed */ .ee-editcue { position: absolute; top: 10px; right: 10px; z-index: 3; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, background .15s ease, color .15s ease; } .ee-embed:hover .ee-editcue { opacity: 1; transform: none; pointer-events: auto; } .ee-editcue:hover { background: var(--blue); color: #fff; border-color: transparent; } .ee-editcue svg { width: 15px; height: 15px; } /* Image with a fade-in "remove" button on hover */ .ee-imgwrap { position: relative; display: inline-block; margin-top: 12px; max-width: 100%; } .ee-imgwrap .ee-img { margin-top: 0; } .ee-imgremove { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease, background .15s ease; } .ee-imgwrap:hover .ee-imgremove { opacity: 1; transform: none; } .ee-imgremove:hover { background: var(--danger); } .ee-imgremove svg { width: 15px; height: 15px; } .ee-field { outline: none; border-radius: 4px; transition: background .1s, box-shadow .1s; white-space: pre-wrap; word-wrap: break-word; cursor: text; } .ee-field:hover { background: rgba(255,255,255,0.04); } .ee-field:focus { background: rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(76,141,245,0.5); } .ee-field:empty::before { content: attr(data-ph); color: #6d7079; } .ee-title { color: #fff; font-weight: 600; font-size: 16px; margin-bottom: 8px; padding: 2px 4px; } .ee-desc { color: #dbdee1; font-size: 14px; line-height: 1.5; padding: 4px; min-height: 22px; } .ee-img { margin-top: 12px; border-radius: 4px; max-width: 100%; max-height: 220px; object-fit: cover; display: block; } .ee-imgrow { margin-top: 10px; display: flex; gap: 8px; align-items: center; } .ee-imgrow input { flex: 1; font-size: 12px; padding: 6px 8px; background: #1e1f22; border: 1px solid var(--line); border-radius: 6px; color: var(--text-dim); } .ee-trash { flex-shrink: 0; align-self: flex-start; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--text-faint); font-size: 16px; transition: background .12s, color .12s, border-color .12s; } .ee-trash:hover { background: rgba(240,85,107,0.12); color: var(--danger); border-color: rgba(240,85,107,0.3); } .ee-add { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; cursor: pointer; background: var(--bg-elev-2); border: 1px dashed var(--line); color: var(--text-dim); font-size: 14px; font-weight: 600; } .ee-add:hover { border-color: var(--accent); color: var(--text); } /* color-wheel popover anchored beside the embed */ .ee-colorpop { position: absolute; z-index: 60; top: 0; left: calc(100% + 12px); background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; width: 210px; box-shadow: var(--shadow-pop); } .ee-colorpop .pop-title { font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .ee-dragging { opacity: 0.5; } .ee-drop-target { box-shadow: 0 -2px 0 var(--accent); } /* preview avatar uses gradient bot icon */ .ee-msg { display: flex; gap: 14px; } .ee-msg .dc-avatar { width: 40px; height: 40px; } /* plugin card toggle row + disabled state */ .plugin-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; } .plugin-card-controls { display: flex; align-items: center; gap: 10px; } .plugin-card.disabled { opacity: 0.55; } .plugin-card.disabled .plugin-icon { filter: grayscale(0.7); } /* master enable bar on a plugin config page */ .plugin-master { display: flex; align-items: center; justify-content: space-between; background: var(--bg-elev); border-radius: 14px; padding: 18px 22px; margin-bottom: 20px; } .plugin-master .pm-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; } .plugin-master .pm-info p { color: var(--text-dim); font-size: 13.5px; } .plugin-master .pm-state { font-size: 13px; font-weight: 700; margin-right: 14px; } .pm-state.on { color: var(--success); } .pm-state.off { color: var(--text-faint); } /* welcome banner preset gallery */ .banner-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; } .banner-thumb { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 5 / 2; border: 2px solid transparent; background: var(--bg-elev-2); } .banner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .banner-thumb:hover { border-color: #4b4d55; } .banner-thumb.sel { border-color: var(--accent); } .banner-thumb .chk { position: absolute; top: 6px; right: 6px; background: var(--accent); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; } .banner-thumb.none { display: grid; place-items: center; color: var(--text-faint); font-size: 13px; aspect-ratio: 5 / 2; } /* generic pill tag (mod cases, stat chips) */ .tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 20px; background: var(--bg-elev-2); color: var(--text-dim); } /* ============================================================ PUBLIC LANDING PAGE ============================================================ */ .landing2 { max-width: 1000px; margin: 0 auto; padding: 40px 24px 60px; } .l2-hero { text-align: center; padding: 40px 0 20px; } .l2-logo { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 12px 40px rgba(76,141,245,0.35); } .l2-hero h1 { font-size: 60px; font-weight: 900; letter-spacing: -0.02em; margin: 20px 0 0; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .l2-tag { color: var(--text-dim); font-size: 19px; max-width: 620px; margin: 14px auto 0; line-height: 1.5; } .l2-cta { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .l2-add { font-size: 16px; padding: 13px 26px; } .btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); } .btn.ghost:hover { background: var(--bg-elev-2); } .l2-note { color: var(--text-faint); font-size: 13.5px; margin-top: 16px; } .l2-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 50px; } .l2-feature { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, border-color .15s, box-shadow .15s; } .l2-feature:hover { transform: translateY(-3px); border-color: rgba(74,138,244,0.4); box-shadow: var(--shadow-pop); } .l2-fic { font-size: 26px; margin-bottom: 14px; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(76,141,245,0.22), rgba(34,211,238,0.16)); } .l2-ftitle { font-weight: 700; font-size: 17px; margin-bottom: 6px; } .l2-fdesc { color: var(--text-dim); font-size: 14px; line-height: 1.5; } .l2-footer { text-align: center; margin-top: 46px; } /* ============================================================ GETTING-STARTED WIZARD (overview banner) ============================================================ */ .gs-card { background: linear-gradient(135deg, rgba(76,141,245,0.14), rgba(34,211,238,0.10)); border: 1px solid rgba(76,141,245,0.3); border-radius: 16px; padding: 22px 24px; margin-bottom: 28px; } .gs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .gs-title { font-size: 20px; font-weight: 800; } .gs-sub { color: var(--text-dim); font-size: 14px; margin-top: 3px; } .gs-dismiss { background: transparent; border: 1px solid var(--line); color: var(--text-faint); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; flex-shrink: 0; } .gs-dismiss:hover { color: var(--text); border-color: var(--text-faint); } .gs-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin: 16px 0 18px; overflow: hidden; } .gs-bar-fill { height: 100%; background: var(--grad); border-radius: 3px; transition: width .3s; } .gs-steps { display: flex; flex-direction: column; gap: 8px; } .gs-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-elev); border-radius: 10px; cursor: pointer; transition: background .12s; } .gs-step:hover { background: var(--bg-elev-2); } .gs-check { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--line); display: grid; place-items: center; font-size: 14px; font-weight: 800; color: transparent; } .gs-step.done .gs-check { background: var(--success); border-color: var(--success); color: #fff; } .gs-label { font-weight: 600; font-size: 14.5px; } .gs-step.done .gs-label { color: var(--text-dim); text-decoration: line-through; } .gs-desc { color: var(--text-faint); font-size: 13px; margin-top: 1px; } .gs-arrow { color: var(--text-faint); font-size: 22px; flex-shrink: 0; } /* onboarding empty state (no bot servers yet) */ .onboard-empty { text-align: center; padding: 50px 20px; background: var(--bg-elev); border-radius: 16px; } .oe-emoji { font-size: 46px; } .oe-title { font-size: 20px; font-weight: 700; margin-top: 12px; } .oe-sub { color: var(--text-dim); font-size: 14.5px; margin: 8px 0 22px; } /* ============================================================ MEE6-STYLE CHROME OVERHAUL ============================================================ */ /* full-width topbar above the sidebar+main row */ .shell2 { display: flex; flex-direction: column; min-height: 100vh; } .shell2 .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-soft); } .tb-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; } .tb-brand .logo { width: 30px; height: 30px; border-radius: 8px; } .tb-brand .name { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* One shared gutter drives both the topbar and the sidebar+content row, so the logo always sits above the sidebar and the whole block is inset from the screen edges (MEE6-style). --app-max caps how wide the block grows; on narrower screens the gutter shrinks to the 22px minimum. */ .shell2 { --app-max: 1760px; --gutter: max(22px, calc((100% - var(--app-max)) / 2)); } .shell2 .shell { flex: 1; padding-left: var(--gutter); padding-right: var(--gutter); } /* Left aligns to the sidebar block; right stays near the screen edge (MEE6-style) so the user profile isn't floated inward by the gutter. */ .shell2 .topbar { padding-left: var(--gutter); padding-right: 32px; } .shell2 .sidebar { top: 68px; height: calc(100vh - 68px); } .topbar .user { position: relative; cursor: pointer; padding: 6px 10px; border-radius: 10px; } .topbar .user:hover { background: var(--bg-elev); } .user-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; min-width: 224px; padding: 7px; box-shadow: var(--shadow-pop); transform-origin: top right; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.96); transition: opacity .16s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility 0s linear .24s; } .user-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .16s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; } .um-item { transition: background .13s ease, color .13s ease; } .um-item { display: block; padding: 9px 12px; border-radius: 6px; color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; cursor: pointer; } .um-item:hover { background: var(--blue); color: #fff; } .um-head { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); padding: 8px 12px 4px; } .um-sep { height: 1px; background: var(--line); margin: 6px 4px; } .um-toggle { display: flex; align-items: center; justify-content: space-between; } .um-item.um-toggle:hover { background: transparent; color: var(--text); cursor: default; } .um-toggle .seg { display: inline-flex; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 7px; padding: 2px; } .um-toggle .seg button { border: none; background: transparent; color: var(--text-dim); width: 30px; height: 24px; border-radius: 5px; cursor: pointer; display: grid; place-items: center; font-size: 14px; } .um-toggle .seg button.on { background: var(--blue); color: #fff; } /* server picker dropdown at the top of the sidebar */ .server-picker { position: relative; display: flex; align-items: center; gap: 10px; background: var(--bg-elev-2); border-radius: 10px; padding: 10px 12px; cursor: pointer; margin-bottom: 14px; user-select: none; transition: background .18s ease, box-shadow .18s ease; } .server-picker:hover { background: var(--bg-elev-2); box-shadow: 0 0 0 1px var(--line); } .sp-icon { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: var(--bg); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .sp-name { flex: 1; font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-chev { color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .26s cubic-bezier(.16,1,.3,1); } .sp-chev svg { width: 17px; height: 17px; } .server-picker:hover .sp-chev, .user:hover .sp-chev { color: var(--text); } .server-picker.menu-open .sp-chev, .user.menu-open .sp-chev { transform: rotate(180deg); } .server-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: var(--shadow-pop); max-height: 300px; overflow-y: auto; transform-origin: top center; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98); transition: opacity .16s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility 0s linear .24s; } .server-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .16s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; } .server-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 14px; transition: background .13s ease; } .server-menu-item:hover { background: var(--bg-elev); } .server-menu-item.all { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; color: var(--text-dim); } .sm-icon { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; background: var(--bg); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; } /* sidebar status dots + collapsible sections */ .nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); opacity: .5; flex-shrink: 0; } .nav-dot.on { background: var(--success); opacity: 1; box-shadow: 0 0 6px color-mix(in srgb, var(--success) 60%, transparent); } .nav-label.collapsible { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .nav-label.collapsible:hover { color: var(--text-dim); } .nav-label .chev { font-size: 10px; } /* horizontal plugin filter tabs (overview) */ .ptabs { display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 26px; border-bottom: 1px solid var(--line); padding-bottom: 0; } .ptab { padding: 10px 16px; font-size: 14.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ptab:hover { color: var(--text); } .ptab.active { color: var(--text); border-bottom-color: var(--blue); } /* 4-column plugin grid at wide widths */ @media (min-width: 1360px) { .plugin-grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ ACCORDION TOGGLE ROWS (MEE6 config pattern) ============================================================ */ .ar-row { background: var(--bg-elev); border-radius: 12px; margin-bottom: 12px; overflow: visible; } .ar-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; } .ar-title { font-weight: 700; font-size: 15.5px; } .ar-desc { color: var(--text-dim); font-size: 13.5px; margin-top: 3px; } .ar-body { padding: 4px 22px 20px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 0; } /* ============================================================ ROLE CHIPS INPUT (MEE6 pattern) ============================================================ */ .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bg-elev-2); border-radius: 10px; padding: 10px 12px; } .chip { display: inline-flex; align-items: center; gap: 7px; position: relative; background: var(--bg); border-radius: 16px; padding: 5px 11px; font-size: 13.5px; font-weight: 600; } .chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .chip-x { cursor: pointer; color: var(--text-faint); font-size: 15px; margin-left: 2px; } .chip-x:hover { color: var(--danger); } .chip.add { cursor: pointer; color: var(--text-faint); background: transparent; border: 1px dashed var(--line); } .chip.add:hover { color: var(--text); border-color: var(--text-faint); } .chip-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-width: 180px; max-height: 240px; overflow-y: auto; box-shadow: var(--shadow-pop); } .chip-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 500; cursor: pointer; } .chip-menu-item:hover { background: var(--bg-elev); } .chip-menu .chip-dot { flex-shrink: 0; } .rc-search { width: 100%; margin-bottom: 6px; padding: 7px 9px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 13px; } .rc-search:focus { outline: none; border-color: var(--blue); } .rc-list { max-height: 200px; overflow-y: auto; } .rc-action { color: var(--blue); font-weight: 600; } .rc-action-ico { font-size: 15px; } .rc-empty { padding: 8px 10px; color: var(--text-faint); font-size: 13px; } /* Embed name/value fields + "Add new field" */ .ee-fields { margin-top: 10px; } .ee-fieldrow { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .ee-fieldcol { flex: 1; min-width: 0; } .ee-fname { font-weight: 700; font-size: 13.5px; padding: 3px 4px; } .ee-fval { font-size: 13.5px; padding: 3px 4px; color: var(--text-dim); } .ee-frm { cursor: pointer; color: var(--text-faint); font-size: 16px; padding: 2px 6px; border-radius: 5px; line-height: 1; } .ee-frm:hover { color: var(--danger); background: rgba(240,85,107,.12); } .ee-addfield { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--blue); font-size: 13px; font-weight: 600; padding: 4px 2px; } .ee-addfield:hover { text-decoration: underline; } .ee-addfield span { font-size: 15px; } /* Embed author (top) + footer (bottom) + icon URL inputs */ .ee-authorrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ee-authoricon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ee-authorname { font-weight: 600; font-size: 13.5px; padding: 2px 4px; color: var(--text-dim); flex: 1; } .ee-footerrow { display: flex; align-items: center; gap: 7px; margin-top: 12px; } .ee-footericon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ee-footertext { font-size: 12px; padding: 2px 4px; color: var(--text-faint); flex: 1; } .ee-metarow { display: flex; gap: 8px; margin-top: 8px; } .ee-metainput { flex: 1; min-width: 0; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; color: var(--text); } .ee-metainput:focus { outline: none; border-color: var(--blue); } /* Image upload drop-zone */ .ee-dropzone { margin-top: 12px; border: 1.5px dashed var(--line); border-radius: 10px; padding: 22px 16px; text-align: center; cursor: pointer; background: var(--bg-sunken); transition: border-color .15s ease, background .15s ease; } .ee-dropzone:hover, .ee-dropzone.drag { border-color: var(--blue); background: rgba(76,141,245,0.06); } .ee-dropzone.uploading { opacity: .6; pointer-events: none; } .ee-dz-ico { display: inline-flex; color: var(--text-faint); margin-bottom: 6px; } .ee-dz-ico svg { width: 26px; height: 26px; } .ee-dz-text { font-size: 13.5px; font-weight: 600; color: var(--text-dim); } .ee-dz-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; } /* ============================================================ MEE6-STYLE "SELECT A SERVER" PAGE ============================================================ */ .gs2-wrap { max-width: 1100px; margin: 0 auto; } .gs2-title { text-align: center; font-size: 44px; font-weight: 800; margin: 40px 0 50px; } .gs2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 28px; } .gs2-card { } .gs2-banner { position: relative; height: 210px; border-radius: 14px; overflow: hidden; background: var(--bg-elev-2); display: grid; place-items: center; } .gs2-blur { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; filter: blur(34px) brightness(0.55) saturate(1.2); } .gs2-icon { position: relative; width: 108px; height: 108px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.85); object-fit: cover; background: var(--bg-elev-2); display: grid; place-items: center; font-size: 30px; font-weight: 800; color: var(--text-dim); } .gs2-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 4px; } .gs2-name { font-weight: 700; font-size: 17px; } .gs2-meta { color: var(--text-faint); font-size: 13.5px; margin-top: 2px; } .gs2-row .btn { min-width: 92px; justify-content: center; text-align: center; } .btn.grey { background: var(--bg-elev-2); border-color: transparent; color: var(--text); } .btn.grey:hover { background: #3e414b; } /* ---- smooth page transitions ---- */ .main > .content, .main > .spinner { animation: pagein .18s ease both; } @keyframes pagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .nav-item { transition: background .12s, color .12s; } /* verification mode picker cards */ .vmode { flex: 1; background: var(--bg-elev-2); border: 2px solid transparent; border-radius: 12px; padding: 18px; cursor: pointer; transition: border-color .12s; } .vmode:hover { border-color: rgba(74,138,244,0.4); } .vmode.active { border-color: var(--blue); background: rgba(74,138,244,0.08); } .vmode-title { font-weight: 700; font-size: 15.5px; margin-bottom: 5px; } .vmode-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.45; } /* ============================================================ MODERN CONTROL POLISH ============================================================ */ /* themed native selects (interval/duration/unit dropdowns etc.) */ select { appearance: none; -webkit-appearance: none; background-color: var(--bg-elev-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2380848e' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; border: 1px solid transparent; border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; padding: 11px 38px 11px 14px; width: 100%; cursor: pointer; } select:hover { background-color: var(--bg-elev-2); } input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* consistent focus ring everywhere */ input:focus, select:focus, textarea:focus, [contenteditable]:focus { outline: none; box-shadow: 0 0 0 2px rgba(74,138,244,0.45); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(74,138,244,0.6); } /* custom scrollbars (dark, slim) */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; } *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } /* text selection in brand color */ ::selection { background: rgba(76,141,245,0.45); color: #fff; } /* user dropdown extras */ .um-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-faint); padding: 8px 12px 4px; text-transform: uppercase; } .um-sep { height: 1px; background: var(--line); margin: 6px 0; } .um-item { cursor: pointer; } .um-item.danger { color: #f0556b; } .um-item.danger:hover { background: rgba(240,85,107,0.12); } /* premium page */ .premium-status { display: flex; align-items: center; gap: 16px; } .premium-status.on { background: linear-gradient(135deg, rgba(74,138,244,0.15), rgba(76,141,245,0.12)); border: 1px solid rgba(74,138,244,0.35); } .perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 6px; } .perk { display: flex; gap: 12px; align-items: flex-start; } .perk-ic { font-size: 22px; flex-shrink: 0; } .perk-title { font-weight: 700; font-size: 14.5px; } .perk-desc { color: var(--text-dim); font-size: 13px; line-height: 1.45; margin-top: 2px; } /* premium badge (shown next to server name when active) */ .premium-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #ffd479; background: rgba(255,212,121,0.14); padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle; } /* ============================================================ MARKETING HOMEPAGE ============================================================ */ .home { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; } /* top nav */ .home-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; position: sticky; top: 0; background: var(--bg); z-index: 20; } .hn-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; } .hn-brand img { width: 30px; height: 30px; border-radius: 8px; } .hn-brand span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hn-links { display: flex; align-items: center; gap: 22px; } .hn-links a { color: var(--text-dim); font-size: 14.5px; font-weight: 600; text-decoration: none; } .hn-links a:hover { color: var(--text); } /* hero */ .home-hero { text-align: center; padding: 60px 0 50px; } .hh-logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 16px 50px rgba(76,141,245,0.35); } .home-hero h1 { font-size: 52px; line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; margin: 26px auto 0; max-width: 760px; } .hh-tag { color: var(--text-dim); font-size: 18px; line-height: 1.55; max-width: 640px; margin: 18px auto 0; } .hh-cta { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .btn.lg { font-size: 16px; padding: 14px 28px; } .hh-note { color: var(--text-faint); font-size: 13.5px; margin-top: 16px; } /* sections */ .home-section { padding: 50px 0; } .hs-title { font-size: 34px; font-weight: 800; text-align: center; letter-spacing: -0.01em; } .hs-sub { color: var(--text-dim); text-align: center; margin: 10px auto 34px; max-width: 560px; font-size: 15.5px; } /* pricing */ .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; max-width: 760px; margin: 0 auto; } .price-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 18px; padding: 30px; position: relative; } .price-card.featured { border-color: var(--blue); box-shadow: 0 12px 40px rgba(74,138,244,0.18); } .pc-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; padding: 5px 14px; border-radius: 20px; } .pc-name { font-size: 20px; font-weight: 800; } .pc-price { font-size: 44px; font-weight: 900; margin: 10px 0 2px; } .pc-price span { font-size: 16px; font-weight: 600; color: var(--text-faint); } .pc-or { color: var(--accent-2); font-size: 13.5px; font-weight: 600; margin-bottom: 8px; } .pc-desc { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; } .btn.block { display: block; width: 100%; text-align: center; box-sizing: border-box; } .pc-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; } .pc-list li { font-size: 14px; color: var(--text); } .pc-foot { text-align: center; color: var(--text-faint); font-size: 13px; margin-top: 22px; } /* comparison table */ .compare-wrap { overflow-x: auto; max-width: 720px; margin: 0 auto; } .compare { width: 100%; border-collapse: collapse; background: var(--bg-elev); border-radius: 14px; overflow: hidden; } .compare th, .compare td { padding: 13px 18px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--line); } .compare th { background: var(--bg-elev-2); font-weight: 700; font-size: 13px; } .compare th.prem, .compare td:last-child { color: #ffd479; } .compare td.lbl { text-align: left; color: var(--text); font-weight: 500; } .compare td.yes { color: var(--success); font-weight: 800; font-size: 16px; } .compare td.no { color: var(--text-faint); } .compare tr:last-child td { border-bottom: none; } /* final cta + footer */ .home-cta { text-align: center; padding: 60px 30px; background: linear-gradient(135deg, rgba(76,141,245,0.14), rgba(34,211,238,0.10)); border: 1px solid rgba(76,141,245,0.3); border-radius: 20px; margin: 30px 0; } .home-cta h2 { font-size: 30px; font-weight: 800; margin-bottom: 22px; } .home-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 30px 0 0; border-top: 1px solid var(--line); } .hf-links { display: flex; gap: 20px; } .hf-links a { color: var(--text-dim); font-size: 14px; text-decoration: none; } .hf-links a:hover { color: var(--text); } .hf-copy { color: var(--text-faint); font-size: 13px; } @media (max-width: 640px) { .home-hero h1 { font-size: 36px; } .hn-links a[href^="#"] { display: none; } } /* banner picker (rank/welcome card backgrounds) */ .banner-picker { } .bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .bp-item { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--bg-elev-2); aspect-ratio: 16/6; display: flex; align-items: flex-end; transition: border-color .12s, transform .12s; } .bp-item:hover { transform: translateY(-2px); } .bp-item.sel { border-color: var(--blue); } .bp-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bp-label { position: relative; z-index: 1; font-size: 11px; font-weight: 600; padding: 4px 7px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); width: 100%; color: #fff; } .bp-none { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-faint); font-size: 12.5px; font-weight: 600; } .bp-missing { background: repeating-linear-gradient(45deg, var(--bg-elev-2), var(--bg-elev-2) 8px, var(--bg-elev) 8px, var(--bg-elev) 16px); } .bp-missing .bp-label { background: rgba(0,0,0,0.5); } .bp-custom { margin-top: 14px; } .bp-clabel { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-dim); } .bp-locked { background: rgba(255,212,121,0.08); border: 1px solid rgba(255,212,121,0.25); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--text-dim); } /* dashboard permissions */ .perm-rows { display: flex; flex-direction: column; gap: 8px; } .perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; } .perm-label { font-size: 14px; color: var(--text); } /* audit log */ .audit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; } .audit-row:last-child { border-bottom: none; } .audit-user { font-weight: 700; color: var(--text); } .audit-detail { color: var(--text-faint); } .audit-time { color: var(--text-faint); font-size: 12.5px; white-space: nowrap; } /* command permissions */ .cp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .cp-row:last-child { border-bottom: none; } .cp-info { min-width: 0; flex: 1; } .cp-name { font-size: 14px; color: var(--accent-2); background: var(--bg-elev-2); padding: 2px 8px; border-radius: 6px; } .cp-desc { display: block; color: var(--text-dim); font-size: 13px; margin-top: 5px; } .cp-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; } .cp-roles { max-width: 320px; } /* ============================================================ MOTION & POLISH LAYER ============================================================ */ /* respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* smooth scrolling for anchor nav */ html { scroll-behavior: smooth; } /* --- scroll reveal (landing) --- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .12s; } .reveal.d3 { transition-delay: .18s; } .reveal.d4 { transition-delay: .24s; } .reveal.d5 { transition-delay: .30s; } .reveal.d6 { transition-delay: .36s; } /* --- hero entrance --- */ .home-hero .hh-logo { animation: heroLogo 1s cubic-bezier(.16,1,.3,1) both; } .home-hero h1 { animation: heroRise .8s cubic-bezier(.16,1,.3,1) .1s both; } .home-hero .hh-tag { animation: heroRise .8s cubic-bezier(.16,1,.3,1) .22s both; } .home-hero .hh-cta { animation: heroRise .8s cubic-bezier(.16,1,.3,1) .34s both; } .home-hero .hh-note { animation: heroRise .8s cubic-bezier(.16,1,.3,1) .44s both; } @keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes heroLogo { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } } /* floating hero logo after entrance */ .home-hero .hh-logo { animation: heroLogo 1s cubic-bezier(.16,1,.3,1) both, float 6s ease-in-out 1s infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* --- feature cards: shimmer icon + lift --- */ .l2-feature { transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s, box-shadow .28s, background .28s; } .l2-feature:hover .l2-fic { transform: scale(1.08) rotate(-3deg); } .l2-fic { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } /* --- buttons: press + sheen --- */ .btn { transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .18s, opacity .18s; position: relative; overflow: hidden; } .btn:active { transform: scale(.96); } .btn.primary::after { content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); transition: left .6s; } .btn.primary:hover::after { left: 130%; } .btn.lg:hover { box-shadow: 0 10px 30px rgba(74,138,244,.4); transform: translateY(-2px); } /* --- lifetime banner --- */ .lifetime-banner { position: relative; margin: 26px auto 0; max-width: 760px; border-radius: 20px; padding: 28px 32px; overflow: hidden; background: linear-gradient(120deg, #1a1330, #241a45 55%, #14243f); border: 1px solid rgba(255,212,121,.3); } .lt-glow { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx,30%) var(--my,20%), rgba(255,212,121,.14), transparent 60%); pointer-events: none; transition: background .3s; } .lt-content { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .lt-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #ffd479; margin-bottom: 8px; } .lt-title { font-size: 26px; font-weight: 900; letter-spacing: -.01em; } .lt-desc { color: var(--text-dim); font-size: 14.5px; margin-top: 6px; max-width: 420px; } .lt-right { display: flex; align-items: center; gap: 20px; } .lt-price { font-size: 40px; font-weight: 900; color: #ffd479; white-space: nowrap; } .lt-price span { font-size: 15px; font-weight: 600; color: var(--text-faint); } /* --- nav shrink on scroll --- */ .home-nav { transition: padding .25s, background .25s, box-shadow .25s; } .home-nav.scrolled { padding: 12px 0; background: rgba(31,33,41,.9); backdrop-filter: blur(10px); box-shadow: 0 4px 24px rgba(0,0,0,.25); } /* --- dashboard page transition --- */ .page-enter { animation: pageIn .34s cubic-bezier(.16,1,.3,1) both; } @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* --- cards fade-up on mount --- */ .content .card { animation: cardIn .4s cubic-bezier(.16,1,.3,1) both; } .content .card:nth-child(2) { animation-delay: .04s; } .content .card:nth-child(3) { animation-delay: .08s; } .content .card:nth-child(4) { animation-delay: .12s; } .content .card:nth-child(5) { animation-delay: .16s; } @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* --- nav item hover slide --- */ .nav-item { transition: background .16s, color .16s, padding-left .16s; } .nav-item:hover { padding-left: 20px; } .nav-item.active { position: relative; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--grad); border-radius: 0 3px 3px 0; animation: navPop .3s cubic-bezier(.34,1.56,.64,1) both; } @keyframes navPop { from { height: 0; opacity: 0; } to { height: 60%; opacity: 1; } } /* --- toggles: springy --- */ .toggle .track { transition: background .2s; } .toggle .track::after { transition: transform .28s cubic-bezier(.34,1.56,.64,1), background .2s; } /* --- toast: slide + spring --- */ .toast { animation: none; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s; transform: translateY(20px) scale(.9); opacity: 0; } .toast.show { transform: none; opacity: 1; } /* --- skeleton loading --- */ .skeleton { background: linear-gradient(90deg, var(--bg-elev) 25%, var(--bg-elev-2) 37%, var(--bg-elev) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .skel-line { height: 14px; margin: 10px 0; } .skel-card { height: 90px; margin-bottom: 14px; } /* --- spinner upgrade --- */ .spinner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px; color: var(--text-dim); } .spinner::before { content: ''; width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- comparison rows stagger in --- */ .compare tbody tr { animation: rowIn .5s cubic-bezier(.16,1,.3,1) both; } /* --- price cards --- */ .price-card { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s; } .price-card:hover { transform: translateY(-4px); } .price-card.featured:hover { box-shadow: 0 20px 50px rgba(74,138,244,.28); } /* ============================================================ ADMIN PANEL ============================================================ */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; } .admin-stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 14px; } .as-ic { font-size: 26px; } .as-val { font-size: 24px; font-weight: 800; } .as-label { color: var(--text-dim); font-size: 13px; } .admin-srv { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transition: border-color .15s; } .admin-srv:hover { border-color: rgba(74,138,244,.3); } .admin-srv.blacklisted { opacity: .7; border-color: rgba(240,85,107,.4); background: rgba(240,85,107,.05); } .as-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .as-icon { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .as-noicon { display: grid; place-items: center; background: var(--bg-elev-2); font-weight: 800; color: var(--text-dim); } .as-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; } .as-meta { color: var(--text-faint); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .as-dur { max-width: 110px; } .as-mod { display: flex; gap: 6px; } .bl-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); padding: 2px 7px; border-radius: 20px; margin-left: 8px; } @media (max-width: 720px) { .admin-srv { flex-direction: column; align-items: flex-start; } .as-actions { width: 100%; } } /* ============================================================ ADMIN PANEL — tabbed control center ============================================================ */ .admin-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 22px; border-bottom: 1px solid var(--line); padding-bottom: 0; } .admin-tab { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s; } .admin-tab:hover { color: var(--text); } .admin-tab.active { color: var(--text); border-bottom-color: var(--blue); } .admin-loading { padding: 40px; text-align: center; color: var(--text-faint); } /* overview / stat grid */ .ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; } .ov-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-card); } .ov-ic { font-size: 24px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--blue) 12%, transparent); flex-shrink: 0; } .ov-val { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } .ov-label { font-size: 13px; color: var(--text-dim); } .ov-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; } /* filter chips */ .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .chip { padding: 6px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--text-dim); background: var(--bg-sunken); border: 1px solid var(--line); cursor: pointer; transition: all .12s; user-select: none; } .chip:hover { color: var(--text); border-color: var(--text-faint); } .chip.on { background: var(--blue); border-color: transparent; color: #fff; } /* data tables */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { text-align: left; padding: 11px 14px; color: var(--text-faint); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-elev); } .data-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); white-space: nowrap; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg-sunken); } .data-table code { font-family: var(--mono); font-size: 12px; } /* mini list + key/value blocks */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } } .mini-list { display: flex; flex-direction: column; } .ml-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--text-dim); } .ml-row:last-child { border-bottom: none; } .ml-ic { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; margin-right: 8px; flex-shrink: 0; display: inline-grid; place-items: center; background: var(--bg-sunken); font-size: 11px; font-weight: 700; } .kv { display: flex; gap: 8px; font-size: 13px; } .kv-k { color: var(--text-faint); } /* support threads */ .thread-msg { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px; color: var(--text); white-space: pre-wrap; } .thread-msg.owner { background: color-mix(in srgb, var(--blue) 10%, var(--bg-sunken)); border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); } .tm-head { font-size: 12px; color: var(--text-faint); margin-bottom: 5px; font-weight: 600; } /* charts */ .chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; } .chart-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-card); } .cc-label { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; } .cc-svg { width: 100%; height: 60px; display: block; } .cc-val { font-size: 12px; color: var(--text-faint); margin-top: 6px; } /* error stacks */ .err-stack { margin-top: 10px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: pre-wrap; overflow-x: auto; max-height: 260px; } .as-noicon { display: grid; place-items: center; background: var(--bg-sunken); font-weight: 700; color: var(--text-dim); } /* ticket form builder */ .formq { display: flex; flex-direction: column; gap: 12px; } .formq-item { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .formq-head { display: flex; align-items: center; gap: 10px; } .formq-badge { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; } .formq-badge.txt { background: rgba(74,138,244,.18); color: #6ea8ff; } .formq-badge.sel { background: rgba(76,141,245,.18); color: #8fb9ff; } .formq-label { flex: 1; } .formq-x { background: none; border: none; color: var(--text-faint); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; } .formq-x:hover { color: var(--danger); } .formq-x.sm { font-size: 16px; } .formq-opts { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .formq-opt { display: flex; gap: 6px; align-items: center; } .formq-opt input { flex: 1; } .formq-textopts { margin-top: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .formq-check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-dim); cursor: pointer; } .formq-ph { flex: 1; min-width: 160px; } .formq-add { display: flex; gap: 8px; }