:root { color-scheme: dark; --bg:#080912; --panel:#111423; --panel2:#171a2b; --line:rgba(255,255,255,.1); --text:#f4f6ff; --muted:#9da6c0; --blue:#8393ff; --purple:#bb7cff; --cyan:#6de3dc; --red:#ff7892; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 20% -20%,rgba(131,147,255,.18),transparent 35rem),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; }
.loading { min-height:100vh; display:grid; place-content:center; justify-items:center; color:var(--muted); gap:12px; } .loading.inline { min-height:300px; } .loader { width:28px; height:28px; border:3px solid rgba(255,255,255,.12); border-top-color:var(--blue); border-radius:50%; animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.auth-page { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; padding:28px; } .auth-card { width:min(440px,100%); padding:42px; border:1px solid var(--line); border-radius:28px; background:rgba(17,20,35,.9); box-shadow:0 24px 100px rgba(0,0,0,.3); position:relative; z-index:2; } .logo-mark,.brand-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; border:1px solid rgba(131,147,255,.55); background:linear-gradient(135deg,#283360,#191b32); color:var(--cyan); font-size:21px; } .kicker { color:var(--cyan); font-weight:800; font-size:11px; letter-spacing:.14em; } .auth-card h1 { margin:20px 0 12px; font-size:42px; line-height:1; letter-spacing:-.05em; } .auth-card p { color:var(--muted); line-height:1.7; } .login-button,.primary-button { display:inline-flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 18px; border:0; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#0b0c14; font-weight:800; cursor:pointer; } .login-button { width:100%; margin-top:22px; } .login-button.disabled { opacity:.5; pointer-events:none; } .back-link { display:block; margin-top:24px; color:var(--muted); font-size:13px; } .auth-orbit { position:absolute; width:520px; height:520px; border:1px solid rgba(131,147,255,.18); border-radius:50%; box-shadow:0 0 120px rgba(131,147,255,.12),inset 0 0 100px rgba(187,124,255,.08); } .shield { position:absolute; inset:0; display:grid; place-items:center; font-size:100px; opacity:.28; }
.shell { min-height:100vh; } .topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid var(--line); background:rgba(8,9,18,.82); backdrop-filter:blur(18px); position:sticky; top:0; z-index:5; } .brand { display:flex; align-items:center; gap:11px; font-weight:850; letter-spacing:.12em; } .brand span:last-child { font-size:14px; } .brand small { display:block; color:var(--blue); font-size:9px; letter-spacing:.22em; } .top-actions { display:flex; align-items:center; gap:20px; } .site-link,.logout { color:var(--muted); font-size:13px; } .user-chip { display:flex; align-items:center; gap:9px; font-size:13px; } .user-chip img { width:30px; height:30px; border-radius:50%; } .layout { display:grid; grid-template-columns:270px minmax(0,1fr); min-height:calc(100vh - 76px); } .sidebar { padding:28px 16px; border-right:1px solid var(--line); display:flex; flex-direction:column; } .side-label { color:#68718d; font-size:10px; font-weight:800; letter-spacing:.12em; padding:0 12px 12px; } .guild { width:100%; display:flex; gap:10px; align-items:center; padding:10px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--text); text-align:left; cursor:pointer; } .guild:hover,.guild.active { border-color:rgba(131,147,255,.32); background:rgba(131,147,255,.1); } .guild img { width:36px; height:36px; border-radius:10px; } .guild span { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; } .guild small { display:block; margin-top:2px; color:var(--muted); font-size:10px; } .dot { width:7px; height:7px; border-radius:50%; background:var(--red); } .dot.on { background:var(--cyan); box-shadow:0 0 10px var(--cyan); } .empty-side { padding:12px; color:var(--muted); font-size:12px; } .side-bottom { display:grid; gap:10px; margin-top:auto; padding:20px 12px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.content { width:min(1120px,100%); margin:0 auto; padding:48px 44px 80px; } .page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:30px; } .page-head h1 { margin:8px 0 6px; font-size:36px; letter-spacing:-.05em; } .page-head p { margin:0; color:var(--muted); } .status-badge { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid rgba(109,227,220,.25); border-radius:999px; color:var(--cyan); font-size:12px; white-space:nowrap; } .status-badge i { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); } .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:26px; } .stats>div { padding:19px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); } .stats span { display:block; color:var(--muted); font-size:12px; } .stats strong { display:block; margin-top:8px; font-size:24px; } .stats small { color:var(--muted); font-size:12px; font-weight:500; } .tabs { display:flex; gap:5px; padding:5px; margin-bottom:16px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.035); } .tab { padding:11px 14px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; } .tab.active { background:rgba(131,147,255,.18); color:var(--text); } .panel { padding:24px; margin-bottom:16px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); } .panel-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:22px; } .panel h2 { margin:0 0 5px; font-size:18px; } .panel p { margin:0; color:var(--muted); font-size:13px; } .pill { display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(109,227,220,.1); color:var(--cyan); font-size:11px; white-space:nowrap; } .pill.purple { background:rgba(187,124,255,.12); color:var(--purple); }
.switch-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .switch-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px; border:1px solid var(--line); border-radius:13px; cursor:pointer; } .switch-row:hover { border-color:rgba(131,147,255,.35); } .switch-row b,.switch-row small { display:block; } .switch-row b { font-size:13px; } .switch-row small,.field small { margin-top:4px; color:var(--muted); font-size:11px; } .switch-row input { display:none; } .switch-row i { width:38px; height:22px; position:relative; flex:none; border-radius:99px; background:#303549; transition:.2s; } .switch-row i:after { content:""; width:16px; height:16px; position:absolute; top:3px; left:3px; border-radius:50%; background:#aeb5cc; transition:.2s; } .switch-row input:checked+i { background:linear-gradient(135deg,var(--blue),var(--purple)); } .switch-row input:checked+i:after { left:19px; background:#fff; } .field { display:grid; gap:6px; max-width:430px; } .field label { font-size:13px; font-weight:750; } input,select,textarea { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:10px; outline:none; background:#0c0f1c; color:var(--text); } input:focus,select:focus,textarea:focus { border-color:var(--blue); } textarea { resize:vertical; line-height:1.6; } .form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .save-bar { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:4px 4px 0; color:var(--muted); font-size:12px; } .secondary-button { padding:13px 16px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; } .success-text { color:var(--cyan); } .danger-text { color:var(--red); } .alert { margin-bottom:18px; padding:15px 17px; border:1px solid rgba(131,147,255,.28); border-radius:12px; background:rgba(131,147,255,.1); color:var(--muted); font-size:13px; } .alert.danger { border-color:rgba(255,120,146,.35); background:rgba(255,120,146,.1); color:#ffc5cf; } .install { text-align:center; padding:56px 24px; } .install-icon { font-size:52px; } .install h2 { margin-top:14px; } .install p { max-width:570px; margin:0 auto 24px; line-height:1.7; } .actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; } code { padding:3px 6px; border-radius:5px; background:rgba(255,255,255,.09); color:var(--cyan); } .steps { display:grid; gap:10px; } .steps>div { display:flex; align-items:center; gap:15px; padding:15px; border:1px solid var(--line); border-radius:12px; } .steps b { color:var(--blue); font-size:12px; } .steps strong,.steps small { display:block; } .steps small { margin-top:3px; color:var(--muted); font-size:12px; } .notice { margin-top:20px; padding:14px 16px; border-left:3px solid var(--cyan); border-radius:9px; background:rgba(109,227,220,.08); color:var(--muted); font-size:12px; } .notice b { color:var(--text); } .coverage { display:flex; flex-wrap:wrap; gap:9px; } .coverage span { padding:9px 11px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:12px; }
@media(max-width:900px) { .layout { grid-template-columns:1fr; } .sidebar { border-right:0; border-bottom:1px solid var(--line); padding:16px; } .side-label { padding-bottom:8px; } #guild-list { display:flex; gap:8px; overflow:auto; } .guild { min-width:210px; } .side-bottom { display:none; } .content { padding:32px 22px 60px; } }
@media(max-width:640px) { .topbar { padding:0 16px; } .site-link,.logout { display:none; } .user-chip span { display:none; } .page-head { align-items:flex-start; flex-direction:column; } .stats { grid-template-columns:repeat(2,1fr); } .switch-grid,.form-grid { grid-template-columns:1fr; } .tabs { overflow:auto; } .tab { white-space:nowrap; } .save-bar { align-items:flex-start; flex-direction:column; } .auth-card { padding:30px 24px; } .auth-card h1 { font-size:36px; } }
.check-list { display:grid; gap:8px; }
.check-row { display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; }
.check-row>span:nth-child(2) { flex:1; }
.check-row b,.check-row small { display:block; }
.check-row b { font-size:13px; }
.check-row small { margin-top:3px; color:var(--muted); font-size:11px; }
.check-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; font-weight:800; }
.check-icon.ok { background:rgba(109,227,220,.12); color:var(--cyan); }
.check-icon.warn { background:rgba(255,190,100,.14); color:#ffc36e; }
.check-ok,.check-warn { font-size:11px; font-weight:700; }
.check-ok { color:var(--cyan); }
.check-warn { color:#ffc36e; }
.resource-grid { grid-template-columns:repeat(3,1fr); }
.log-select { width:min(260px,45%); }
.log-toolbar { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--muted); font-size:12px; }
.log-toolbar span { color:var(--text); font-weight:700; }
.log-list { display:grid; gap:8px; }
.log-item { display:flex; gap:12px; padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.log-avatar { width:30px; height:30px; display:grid; place-items:center; flex:none; border-radius:9px; background:rgba(131,147,255,.14); color:var(--blue); font-weight:800; }
.log-body { min-width:0; flex:1; }
.log-line { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.log-line b { font-size:12px; }
.log-line time { color:var(--muted); font-size:10px; white-space:nowrap; }
.log-body p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.empty-state { padding:28px 12px; color:var(--muted); text-align:center; font-size:12px; }
.embed-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.embed-field { display:grid; gap:4px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.03); }
.embed-field.inline { grid-column:span 1; }
.embed-field b { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.embed-field span { color:var(--text); font-size:12px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.log-description { color:var(--text) !important; }
.log-meta { margin-top:10px; color:var(--muted); font-size:10px; }
@media(max-width:900px) { .resource-grid { grid-template-columns:1fr; } }
@media(max-width:640px) { .log-select { width:100%; } .log-line { align-items:flex-start; flex-direction:column; gap:3px; } .embed-fields { grid-template-columns:1fr; } .embed-field.inline { grid-column:auto; } }