/* V51 / AUTOLOUNGE original-site color alignment.
 * Grounded in the 2026-11-02 official-home-ja.html and official-global-header-v3.css
 * sent in AUTOLOUNGE_V50_SOURCE_BUNDLE.tar.gz.
 * Scope: palette, page backgrounds, main cards, main CTA colors only.
 * IMPORTANT: Does not repaint approved photography or change product text, SEO or navigation.
 * Never override official .topbar .nav-actions active states or mobile dock.
 */
:root{
 --bg:#050607;
 --bg2:#0a0c0e;
 --panel:rgba(255,255,255,.045);
 --line:rgba(255,255,255,.12);
 --text:#f4f6f7;
 --muted:#a9afb5;
 --metal:#d9dde0;
 --champagne:#c9b98d;
 --champagne-2:#8c7b53;
 --max:1220px;
 --radius:22px;
 --shadow:0 30px 80px rgba(0,0,0,.45);
 --ink:var(--text);
 --soft:var(--muted);
 --gold:var(--champagne);
 color-scheme:dark;
}
html{background:var(--bg)}
html body{
 color:var(--text);
 background:
  radial-gradient(1200px 700px at 75% -10%,rgba(255,255,255,.07),transparent 60%),
  linear-gradient(180deg,#050607 0%,#090b0d 38%,#050607 100%) !important;
 background-attachment:scroll;
}
/* Remove the obsolete brown/orange section wash, preserving existing spacing and geometry. */
body>main{background:transparent}
body main>.hero,
body main>.section,
body main>.section:nth-child(even){background:transparent !important;border-color:var(--line)}
body main>.hero{background-color:transparent!important}
body main .hero .wrap.hero-grid{
 background:var(--panel)!important;
 border:1px solid var(--line)!important;
 box-shadow:var(--shadow);
 border-radius:var(--radius);
}
body main .hero-grid>figure.hero-image,
body main .hero-image figcaption{
 background:var(--bg2)!important;
 border-color:var(--line)!important;
}
body main .hero-image figcaption{color:var(--muted)!important}
/* Use the homepage's low-contrast translucent surface, not a warm brown panel. */
body main .point,
body main .panel,
body main .device-card,
body main .gallery .card,
body main .product-grid .card,
body main .art-preview,
body main .cta{
 background:var(--panel)!important;
 border:1px solid var(--line)!important;
 border-radius:var(--radius);
 color:var(--text);
}
body main .cta{box-shadow:var(--shadow)}
body main .kicker,
body main .tag,
body main .smallnav a,
body main .product-grid .more,
body main .hero-full-image-link{color:var(--champagne)!important}
body main .point::before{color:var(--champagne)}
body main h1,
body main h2,
body main h3{color:var(--text)!important}
body main .lead,
body main .note,
body main .intro,
body main .panel p,
body main .product-grid p,
body main .gallery .body p,
body main .device-card figcaption,
body main .secondary{color:var(--muted)!important}
body main .smallnav a{border-color:var(--line)!important}
/* Current model follows the official site's silver active-language treatment. */
body main .smallnav a.active,
body main .smallnav a[aria-current="page"]{
 color:#101112!important;
 background:linear-gradient(120deg,#f1f2f0,#bfc4c7 45%,#f4f5f3)!important;
 border-color:rgba(255,255,255,.22)!important;
}
/* Main action buttons use the verified official homepage's exact base and silver treatments. */
body main a.button{
 color:var(--text)!important;
 background:rgba(255,255,255,.04)!important;
 border:1px solid rgba(255,255,255,.18)!important;
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
 box-shadow:none!important;
}
body main a.button.light{
 color:#080909!important;
 background:linear-gradient(120deg,#f2f2ee 0%,#c7c8c3 45%,#f6f6f4 72%,#aaa89f 100%)!important;
 border-color:transparent!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 36px rgba(255,255,255,.08)!important;
}
body main a.button:hover{filter:none;background:rgba(255,255,255,.085)!important}
body main a.button.light:hover{
 background:linear-gradient(120deg,#f2f2ee 0%,#c7c8c3 45%,#f6f6f4 72%,#aaa89f 100%)!important;
 filter:brightness(1.04)
}
body main a:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
/* V50's official header/footer/mobile-dock CSS remains authoritative and unchanged. */