.fanvue-admin {
  --fv-line: #383b41;
  --fv-surface: #191b1f;
  --fv-surface-raised: #202328;
  padding: 1.5rem 0;
}
.fanvue-admin [hidden] { display: none !important; }
.fanvue-heading { margin-bottom: 1.2rem; }
.fanvue-heading h2 { margin-bottom: .35rem; font-size: 1.2rem; }
.fanvue-heading p { max-width: 740px; margin-bottom: 0; font-size: .86rem; }
.fanvue-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); gap: 1rem; align-items: start; }
.fanvue-panel { padding: clamp(1rem, 2.1vw, 1.45rem); border: 1px solid var(--fv-line); border-radius: 13px; background: var(--fv-surface); }
.fanvue-panel h3 { font-size: .96rem; letter-spacing: -.02em; margin: 0 0 .9rem; }
.fanvue-panel p:last-child { margin-bottom: 0; }
.fanvue-state { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; color: #d8d9dc; font-size: .76rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.fanvue-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #92969d; }
.fanvue-state[data-state="connected"]::before { background: #9fdbb0; }
.fanvue-state[data-state="needs-reconnect"]::before { background: #ffcc26; }
.fanvue-state[data-state="error"]::before { background: #f0a09a; }
.fanvue-account { padding: 1rem; border: 1px solid #393d44; border-radius: 10px; background: var(--fv-surface-raised); margin-bottom: 1rem; }
.fanvue-account-name { margin: 0; color: var(--sx-text); font-size: 1.12rem; font-weight: 750; letter-spacing: -.03em; overflow-wrap: anywhere; }
.fanvue-account-handle { margin: .12rem 0 .9rem; color: var(--sx-muted); font: .76rem var(--font-mono); overflow-wrap: anywhere; }
.fanvue-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; margin: 0; }
.fanvue-meta div { padding-top: .6rem; border-top: 1px solid #393d44; }
.fanvue-meta dt { color: var(--sx-muted); font: .62rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.fanvue-meta dd { margin: .18rem 0 0; color: #e2e2e3; font-size: .8rem; font-weight: 650; overflow-wrap: anywhere; }
.fanvue-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.fanvue-actions .btn { min-width: 132px; }
.fanvue-note { padding: .8rem .9rem; border-left: 2px solid var(--sx-yellow); background: #222328; color: #c5c7ca; font-size: .79rem; }
.fanvue-setup-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: fv-steps; }
.fanvue-setup-list li { position: relative; padding-left: 2rem; color: #c3c5c9; font-size: .8rem; counter-increment: fv-steps; }
.fanvue-setup-list li::before { content: counter(fv-steps, decimal-leading-zero); position: absolute; left: 0; top: .03rem; color: var(--sx-yellow); font: .67rem var(--font-mono); }
.fanvue-callback { display: flex; gap: .5rem; margin-top: .55rem; }
.fanvue-callback code { flex: 1; min-width: 0; padding: .62rem .7rem; color: #e8d38a; background: #121417; border: 1px solid #393d44; border-radius: 8px; font: .72rem var(--font-mono); overflow-wrap: anywhere; }
.fanvue-scopes { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.fanvue-scopes li { padding: .33rem .52rem; border: 1px solid #4c452d; border-radius: 6px; background: #29261d; color: #f1d97e; font: .68rem var(--font-mono); overflow-wrap: anywhere; }
.fanvue-config-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.fanvue-config-list li { padding: .3rem .45rem; border-radius: 5px; background: #282a2f; color: #d8d9dc; font: .68rem var(--font-mono); overflow-wrap: anywhere; }
.fanvue-empty { padding: 1.1rem; border: 1px dashed #4a4d53; border-radius: 10px; color: var(--sx-muted); font-size: .84rem; }
.fanvue-loading-line { display: flex; gap: .7rem; align-items: center; color: var(--sx-muted); font-size: .82rem; }
.fanvue-loading-line .spinner-border { width: 1rem; height: 1rem; border-width: 2px; }
.fanvue-error { margin-top: .85rem; }
.fanvue-feedback { min-height: 1.35rem; margin: .7rem 0 0; color: var(--sx-muted); font-size: .76rem; }
.fanvue-feedback[data-kind="success"] { color: var(--sx-positive) !important; }
.fanvue-feedback[data-kind="error"] { color: var(--sx-negative) !important; }
.fanvue-subhead { margin: 1.05rem 0 .5rem; color: #d5d6d9; font-size: .76rem; font-weight: 750; }
@media (max-width: 767.98px) {
  .fanvue-layout { grid-template-columns: minmax(0, 1fr); }
  .fanvue-meta { grid-template-columns: minmax(0,1fr); }
  .fanvue-callback { align-items: stretch; flex-direction: column; }
  .fanvue-actions .btn { flex: 1 1 100%; }
}