* { margin:0; padding:0; box-sizing:border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
html, body { width:100%; height:100%; overflow:hidden; background:#f5f7fa; }

.bg-layer { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; background:url('https://backend.appmiaoda.com/projects/supabase316942472787832832/storage/v1/object/public/netdisk-files/uploads/1781344361090_idlefish-msg-1768485714255.png.jpg') no-repeat center center/cover; filter:brightness(0.7); }

.app-container { position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; }

.navbar { display:flex; align-items:center; justify-content:space-between; padding:14px 32px; background:#ffffff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:1px solid #e8ecf1; flex-shrink:0; height:76px; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.navbar .logo img { height:44px; width:auto; display:block; }
.nav-actions { display:flex; align-items:center; gap:18px; }

.capsule-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 30px; background:#2b7aff; color:#ffffff; font-size:15px; font-weight:600; border:none; border-radius:60px; cursor:pointer; transition:all 0.25s ease; box-shadow:0 4px 16px rgba(43,122,255,0.25); user-select:none; white-space:nowrap; }
.capsule-btn:hover { background:#1a6ae6; transform:scale(1.02); }

.main-content { flex:1; display:flex; align-items:center; justify-content:center; }
.center-area { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.center-area .capsule-btn { padding:14px 48px; font-size:20px; }

.center-code-box { border:2px solid #000000; border-radius:16px; padding:24px 48px; background:rgba(255,255,255,0.85); min-width:200px; text-align:center; font-size:28px; font-weight:bold; color:#000000; }

.nav-user-capsule { display:flex; align-items:center; gap:12px; background:#f0f2f5; border-radius:60px; padding:6px 18px 6px 8px; box-shadow:0 2px 8px rgba(0,0,0,0.10); cursor:pointer; border:1px solid #d0d4dc; }
.nav-user-capsule .avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #ffffff; }
.nav-user-capsule .nickname { color:#1a1a1a; font-weight:500; font-size:14px; }

.dropdown-menu { position:fixed; top:76px; right:32px; background:#1e1e1e; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.5); min-width:160px; z-index:1000; overflow:hidden; }
.dropdown-item { padding:12px 20px; color:#eee; font-size:14px; cursor:pointer; transition:background 0.2s; border-bottom:1px solid #333; }
.dropdown-item:hover { background:#2a2a2a; }
.dropdown-item:last-child { border-bottom:none; }

.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:2000; }
.square-modal { width:280px; height:280px; background:#ffffff; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }
.square-modal p { font-size:18px; margin-bottom:32px; color:#1a1a1a; }
.modal-actions { display:flex; gap:20px; }
.modal-btn { padding:10px 28px; border-radius:8px; border:none; font-size:16px; cursor:pointer; }
.confirm-btn { background:#2b7aff; color:#ffffff; }
.cancel-btn { background:#ffffff; color:#000000; border:1px solid #cccccc; }

.full-width { width:100%; }

.capsule-input { width:100%; padding:14px 20px; border:2px solid #ddd; border-radius:60px; font-size:16px; margin-bottom:16px; background:#f9f9f9; color:#1a1a1a; }
.capsule-input:focus { outline:none; border-color:#2b7aff; }

.admin-login-body { background:#0b0e14; display:flex; align-items:center; justify-content:center; height:100%; }
.admin-login-container { background:#1e1e1e; padding:40px 32px; border-radius:24px; width:360px; box-shadow:0 12px 40px rgba(0,0,0,0.6); }
.admin-login-container h2 { color:#eee; text-align:center; margin-bottom:24px; }

.social-login-icon { width:56px; height:56px; border-radius:50%; background:#ffffff; display:flex; align-items:center; justify-content:center; margin:16px auto 0; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:transform 0.2s; }
.social-login-icon img { width:40px; height:40px; }
.social-login-icon:hover { transform:scale(1.08); }

.login-msg { color:#ff6b6b; text-align:center; margin-top:12px; font-size:14px; }

.admin-body { background:#0b0e14; overflow:hidden; }
.admin-wrapper { display:flex; height:100vh; background:#14181f; }
.admin-sidebar { width:200px; background:#1a1e26; padding:20px 0; border-right:1px solid #2a2e36; flex-shrink:0; }
.sidebar-item { padding:14px 24px; color:#b0b8c4; cursor:pointer; transition:all 0.2s; border-left:3px solid transparent; font-size:14px; }
.sidebar-item.active { background:#262c38; color:#ffffff; border-left-color:#2b7aff; }
.sidebar-item:hover { background:#222832; color:#e0e8f0; }
.admin-content { flex:1; padding:24px 32px; overflow-y:auto; color:#e0e8f0; }
.admin-panel { display:none; }
.admin-panel.active { display:block; }
.admin-panel h3 { margin-bottom:16px; color:#ffffff; font-weight:500; }
.admin-panel h4 { margin:20px 0 12px; color:#b0b8c4; font-weight:400; }
.admin-panel p { color:#b0b8c4; }

table { width:100%; border-collapse:collapse; font-size:14px; color:#d4d8e0; }
th, td { padding:10px 8px; border-bottom:1px solid #2a2e36; text-align:left; }
th { color:#8a92a0; font-weight:500; }
td img { width:32px; height:32px; border-radius:50%; object-fit:cover; }

select, button { padding:8px 16px; border-radius:60px; border:none; background:#2b7aff; color:#ffffff; cursor:pointer; font-size:14px; }
select { background:#1a1e26; color:#d4d8e0; border:1px solid #3a3e46; min-width:160px; }
#genCodeBtn, #genTokenBtn { margin-left:12px; padding:8px 24px; }
#bindWechatIcon { margin:16px 0; }
#apiDocContent { background:#1e1e1e; padding:20px; border-radius:8px; font-family:monospace; font-size:13px; white-space:pre-wrap; color:#d4d4d4; max-height:600px; overflow-y:auto; }