/* Shared user appearance: backgrounds are mounted only in the outer page. */
html.cc-animated-background { background:#040906; }
html.cc-animated-background body { position:relative; isolation:isolate; background-image:none; background-color:transparent; }
html.cc-animated-background .app-topbar { background-image:none; background-color:transparent; }
#cc-animated-background { position:fixed; z-index:-1; inset:0; overflow:hidden; pointer-events:none; background:#040906; contain:strict; }
.cc-background-orb { --cc-bg-unit:max(.0694444444vw,.1111111111vh); position:absolute; top:0; left:0; width:calc(600 * var(--cc-bg-unit)); height:calc(600 * var(--cc-bg-unit)); border-radius:50%; background:radial-gradient(circle,rgba(var(--cc-orb-center,151,215,177),.92) 0%,rgba(var(--cc-orb-rgb,46,175,98),.92) 12%,rgba(var(--cc-orb-rgb,46,175,98),.86) 32%,rgba(var(--cc-orb-rgb,46,175,98),.44) 55%,rgba(var(--cc-orb-rgb,46,175,98),.13) 78%,rgba(var(--cc-orb-rgb,46,175,98),0) 100%); will-change:transform; }
.cc-background-orb:nth-child(1) { transform:translate3d(calc(50vw + (var(--cc-bg-x0,330) - 1020) * var(--cc-bg-unit)),calc(50vh + (var(--cc-bg-y0,300) - 750) * var(--cc-bg-unit)),0); }
.cc-background-orb:nth-child(2) { transform:translate3d(calc(50vw + (var(--cc-bg-x1,1110) - 1020) * var(--cc-bg-unit)),calc(50vh + (var(--cc-bg-y1,300) - 750) * var(--cc-bg-unit)),0); }
.cc-background-orb:nth-child(3) { transform:translate3d(calc(50vw + (var(--cc-bg-x2,720) - 1020) * var(--cc-bg-unit)),calc(50vh + (var(--cc-bg-y2,660) - 750) * var(--cc-bg-unit)),0); }
.cc-background-tiles { position:absolute; inset:0; background:url('/assets/backgrounds/honeycomb-motion-tiles.svg?v=aeeb04833990') center/cover no-repeat; }
.cc-background-shade { position:absolute; inset:0; background:radial-gradient(ellipse at 12% 2%,rgba(21,57,37,.1),transparent 65%),radial-gradient(ellipse at 50% 46%,transparent 30%,rgba(2,6,4,.66) 100%); }
.appearance-trigger { display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; padding:7px; border:1px solid var(--line-bright); border-radius:8px; background:#0a1119; color:var(--text); cursor:pointer; }
.appearance-trigger:hover { border-color:var(--accent); color:var(--accent-readable,var(--accent)); }
.appearance-trigger svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.appearance-dialog { width:min(390px,calc(100% - 28px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid #34424c; border-radius:10px; background:#0e151d; color:#eef2f6; box-shadow:0 24px 80px #0009; font:400 13px var(--body,Inter,'Segoe UI',sans-serif); color-scheme:dark; }
.appearance-dialog::backdrop { background:rgba(3,7,10,.54); backdrop-filter:blur(6px); }
.appearance-card { padding:22px; }
.appearance-card header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.appearance-card h2 { margin:0; font:700 23px var(--heading,'Roboto Condensed',sans-serif); }
.appearance-card header button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid #303d48; border-radius:6px; background:#15202a; color:#d6dfe8; font-size:22px; cursor:pointer; }
.appearance-colors { display:grid; gap:0; }
.appearance-colors label { display:grid; grid-template-columns:minmax(0,1fr) auto 42px; gap:12px; align-items:center; min-height:56px; border-top:1px solid #29343f; }
.appearance-colors output { color:#a4b4c2; font:500 11px ui-monospace,Consolas,monospace; }
.appearance-colors input[type=color] { box-sizing:border-box; width:42px; height:32px; min-height:0; padding:3px; border:1px solid #455360; border-radius:6px; background:#15202a; cursor:pointer; }
.appearance-colors input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.appearance-colors input[type=color]::-webkit-color-swatch { border:0; border-radius:3px; }
.appearance-motion { display:flex; gap:10px; align-items:center; margin:16px 0 22px; cursor:pointer; }
.appearance-motion input { width:16px; height:16px; margin:0; accent-color:var(--cc-button); }
.appearance-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.appearance-card footer button { min-height:36px; padding:7px 15px; border:1px solid #35424d; border-radius:5px; background:#17212c; color:#dce5ed; font:600 12px var(--body,Inter,sans-serif); cursor:pointer; }
.appearance-card footer .appearance-done { border-color:var(--cc-button); background:var(--cc-button); color:var(--cc-button-ink); }
html.cc-custom-colors .app-navigation a.active { border-color:rgba(var(--accent-rgb),.45); background:var(--accent-soft); color:var(--accent-readable); }
html.cc-custom-colors .auth-button.is-authenticated { border-color:rgba(var(--accent-rgb),.45); background:var(--accent-soft); color:var(--accent-readable); }
html.cc-custom-colors :is(.primary-link,.petition-sign-button,.home-primary-link,.avatar-save-button:not(:disabled)) { border-color:var(--cc-button); background:var(--cc-button); color:var(--cc-button-ink); }
html.cc-custom-colors :is(.primary-link,.petition-sign-button,.home-primary-link,.avatar-save-button):hover:not(:disabled) { border-color:var(--cc-button-hover); background:var(--cc-button-hover); color:var(--cc-button-hover-ink); }
html.cc-custom-colors .replay-analyzer :is(#select-files,#analyze-files,.primary):not(:disabled),html.cc-custom-colors .mv-shell .mv-search-form button[type=submit] { border-color:var(--cc-button); background:var(--cc-button); color:var(--cc-button-ink); }
html.cc-custom-colors .replay-analyzer :is(#select-files,#analyze-files,.primary):hover:not(:disabled),html.cc-custom-colors .mv-shell .mv-search-form button[type=submit]:hover:not(:disabled) { border-color:var(--cc-button-hover); background:var(--cc-button-hover); color:var(--cc-button-hover-ink); }
html.cc-custom-colors .mv-shell .mv-tabs button[aria-current=page] { border-color:rgba(var(--accent-rgb),.45); background:var(--accent-soft); color:var(--accent-readable); box-shadow:inset 3px 0 var(--accent); }
html.cc-custom-colors ::selection { background:var(--accent); color:var(--accent-ink); }
@media(max-width:700px) { html.cc-custom-colors .header-actions { grid-template-columns:34px 62px 34px minmax(64px,1fr) max-content; gap:5px; } }
@media(prefers-reduced-motion:reduce) { .cc-background-orb { will-change:auto; } }