:root { --friends-bg:#f8fafc; --friends-panel:#fff; --friends-text:#1f2937; --friends-muted:#64748b; --friends-line:#e2e8f0; --friends-accent:#3b9fe4 }
@media(prefers-color-scheme:dark) { :root { --friends-bg:#0f1117; --friends-panel:#181b23; --friends-text:#e2e8f0; --friends-muted:#94a3b8; --friends-line:#303440; --friends-accent:#7dc5f6 } }
.friends-standalone { margin:0; background:var(--friends-bg); color:var(--friends-text); font:14px/1.6 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; display:flex; min-height:100vh }
.friends-standalone * { box-sizing:border-box }
.friends-standalone a { color:inherit; text-decoration:none }
.friends-sidebar { width:224px; flex-shrink:0; background:var(--friends-panel); border-right:1px solid var(--friends-line); padding:26px 16px; display:flex; flex-direction:column }
.friends-brand { display:flex; align-items:center; gap:8px; font-size:20px; font-weight:700; letter-spacing:-.6px; margin:0 12px 34px }
.friends-brand img { flex-shrink:0 }
.friends-nav-caption { margin:0 12px 8px; color:var(--friends-muted); font-size:12px }
.friends-sidebar nav a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; margin-bottom:4px; color:var(--friends-muted) }
.friends-sidebar nav a.active { color:var(--friends-accent); background:color-mix(in srgb,var(--friends-accent) 10%,transparent) }
.friends-sidebar nav a:hover { background:var(--friends-bg) }
.friends-sidebar svg { width:18px; height:18px }
.friends-sidebar-footer { margin-top:auto; padding:24px 12px 0; color:var(--friends-muted); font-size:12px }
.friends-shell { flex:1; min-width:0 }
.friends-header { display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:0 32px; background:var(--friends-panel); border-bottom:1px solid var(--friends-line) }
.friends-main { padding:32px; max-width:1600px; margin:auto }
.friends-page-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px }
.friends-page-heading h1 { margin:0; font-size:26px; letter-spacing:-.6px }
.friends-page-heading p { margin:6px 0 0; color:var(--friends-muted); font-size:13px }
.friends-standalone button,.friends-standalone input { font:inherit; background:var(--friends-panel); color:var(--friends-text); border:1px solid var(--friends-line); border-radius:8px; padding:7px 14px }
.friends-standalone button { cursor:pointer; white-space:nowrap }
.friends-standalone button:hover { border-color:var(--friends-accent) }
.friends-standalone button:disabled { opacity:.5; cursor:wait }
.friends-standalone input { width:72px; padding:5px 9px }
.friends-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:20px }
.friends-card { background:var(--friends-panel); padding:24px; border:1px solid var(--friends-line); border-radius:12px; box-shadow:0 1px 3px #00000004 }
.friends-card h2 { margin:0 0 18px; font-size:16px }
.friends-summary { display:flex; gap:20px; margin-bottom:24px }
.friends-summary .friends-card { flex:1; padding:18px 24px }
.friends-number { font-size:28px; font-weight:650; margin:4px 0 0; font-variant-numeric:tabular-nums }
.friends-muted { color:var(--friends-muted); font-size:12px }
.friends-line { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 }
.friends-progress { height:7px; background:var(--friends-line); border-radius:9px; overflow:hidden; margin:8px 0 }
.friends-progress span { display:block; height:100%; background:var(--friends-accent); border-radius:9px }
.friends-divider { border-top:1px solid var(--friends-line); margin:18px 0 }
.friends-table-wrap { overflow:auto; background:var(--friends-panel); border:1px solid var(--friends-line); border-radius:12px }
.friends-table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap }
.friends-table th { color:var(--friends-muted); font-weight:500; background:var(--friends-bg) }
.friends-table td,.friends-table th { padding:14px 18px; border-bottom:1px solid var(--friends-line) }
.friends-table tr:last-child td { border-bottom:none }
.friends-code { font:12px ui-monospace,monospace; max-width:230px; overflow:hidden; text-overflow:ellipsis }
#friends-message:not(:empty) { padding:12px 16px; border:1px solid var(--friends-line); background:var(--friends-panel); border-radius:10px; margin-bottom:20px; color:var(--friends-muted) }
.friends-tools { display:flex; align-items:center; gap:12px; font:12px/1.4 system-ui,sans-serif; margin-inline:12px; white-space:nowrap; color:inherit }
.friends-tools a { color:inherit; opacity:.75; text-decoration:none }
.friends-tools a:hover { opacity:1 }
.friends-source-link { display:inline-block; margin-inline-start:12px; color:inherit; font-size:12px; opacity:.65; text-decoration:none }
.friends-source-link:hover { opacity:1; text-decoration:underline }
@media(max-width:640px) { .friends-sidebar .friends-brand { flex-direction:column; gap:6px; font-size:10px } }
.friends-tools .friends-balance { font-variant-numeric:tabular-nums; font-weight:600; margin-inline-start:2px }
.friends-native-controls > .me-1 { display:none }
@media(max-width:950px) { .friends-tools { gap:8px; font-size:11px }.friends-tools a:last-of-type { display:none }.friends-sidebar { width:185px }.friends-main { padding:22px } }
@media(max-width:640px) { .friends-sidebar { width:68px; padding:24px 8px }.friends-brand { font-size:12px; margin:0 0 24px; text-align:center }.friends-sidebar nav a { justify-content:center; padding:12px 4px }.friends-sidebar nav span,.friends-nav-caption,.friends-sidebar-footer { display:none }.friends-main { padding:20px 14px }.friends-header { padding:0 16px }.friends-page-heading h1 { font-size:22px }.friends-summary { gap:10px }.friends-summary .friends-card { padding:12px }.friends-tools a { display:none }.friends-tools { margin-inline:4px }.friends-tools .friends-balance { max-width:112px; overflow:hidden; text-overflow:ellipsis }.friends-grid { grid-template-columns:minmax(0,1fr) }.friends-card { padding:16px }.friends-line { flex-wrap:wrap; gap:4px 8px } }