/* XCMG-HUB appearance control, adapted to XEMACH's typography and layout. */
:root{color-scheme:dark;--accent:var(--yellow)}
.paper{--ink:var(--black);--accent:#806100;--green:#16783e}
.theme-switcher{position:relative;display:none;border:0;padding:0;flex-shrink:0;z-index:40}
html[data-theme] .theme-switcher{display:block}
.theme-trigger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--line);list-style:none;color:var(--ink);cursor:pointer}
.theme-trigger:after,.theme-switcher[open]>.theme-trigger:after{content:none}.theme-trigger::-webkit-details-marker{display:none}
.theme-trigger:hover,.theme-switcher[open] .theme-trigger{border-color:var(--accent);color:var(--accent)}
.theme-switcher svg{width:21px;height:21px;flex-shrink:0}
.theme-symbol{display:none}
html[data-theme-preference=system] .theme-symbol-system,html[data-theme-preference=light] .theme-symbol-light,html[data-theme-preference=dark] .theme-symbol-dark{display:block}
.theme-menu{position:absolute;right:0;top:calc(100% + 10px);width:210px;padding:8px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 32px #0002}
.theme-menu-title{display:block;padding:8px 10px;font-size:12px;color:var(--muted)}
.theme-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;border:0;background:none;text-align:left;color:var(--ink);font-size:13px;cursor:pointer}
.theme-menu button:hover,.theme-menu button[aria-pressed=true]{background:var(--bg);color:var(--accent)}
.theme-check{margin-left:auto;visibility:hidden}.theme-menu button[aria-pressed=true] .theme-check{visibility:visible}
.theme-trigger:focus-visible,.theme-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.category-card{--ink:#f6f6f2;--accent:#f5c400;color:#f6f6f2}
.login-story{--ink:#f6f6f2;--accent:#f5c400;color:#f6f6f2}

/* Header actions follow their DOM/tab order: menu, enquiry, login, appearance. */
.header{gap:18px}
.header .nav{margin:0 auto;gap:20px}
.header>.btn{display:inline-flex;justify-content:center;flex-shrink:0;min-height:44px}
.header>.account{padding-inline:16px}
.header .theme-trigger{display:flex;align-items:center;justify-content:center;height:44px;width:44px}
.header .theme-trigger svg{margin:0;display:none}
html[data-theme-preference=system] .header .theme-symbol-system,html[data-theme-preference=light] .header .theme-symbol-light,html[data-theme-preference=dark] .header .theme-symbol-dark{display:block}
.header .theme-menu{right:0}
@media(max-width:1250px){
  .header{gap:12px}
  .header .brand img{width:140px}
  .header .nav{gap:14px}
  .header>.btn{padding-inline:12px;gap:10px}
}
@media(max-width:1100px){
  .header{height:72px;gap:10px}
  .header .brand{margin-right:auto}
  .header .menu-button{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;width:40px;height:44px;padding:0;border:0;font-size:0}
  .header .menu-button:before{content:'';width:18px;height:13px;border-block:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat}
  .header .menu-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .header .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:22px var(--space);border-bottom:1px solid var(--line);max-height:calc(100dvh - 110px);overflow:auto}
  .header .nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .header .nav a,.header .nav-company summary{padding:13px 0}
  .header .nav .mobile-only{display:block}
  .header .company-menu{position:static;width:100%;box-shadow:none;margin-top:5px}
}
@media(max-width:540px){
  .header{padding-inline:12px;gap:6px}
  .header .brand img{width:84px}
  .header>.btn{font-size:11px;padding:6px 8px;gap:0;line-height:1.35}
  .header>.btn.primary{width:auto;min-width:64px;white-space:nowrap;text-align:center}
  .header>.btn.primary>span{display:none}
  .header>.account{min-width:44px}
  .header .menu-button{width:32px}
  .header .theme-trigger{width:36px}
}
@media(max-width:360px){
  .header{padding-inline:10px;gap:4px}
  .header .brand img{width:64px}
  .header>.account{min-width:42px;padding-inline:6px}
  .header .theme-trigger{width:32px}
}

/* Light theme: porcelain, graphite and the same industrial yellow. Photos keep their original colors. */
html[data-theme=light]{color-scheme:light;--bg:#f5f6f2;--panel:#fff;--ink:#182126;--muted:#57636b;--line:#d1d8d4;--accent:#806100;--green:#176b40;--paper:#eceee7}
html[data-theme=light] .header{background:rgba(250,251,248,.97)}
html[data-theme=light] .brand img{filter:brightness(0)}
html[data-theme=light] .topline{background:#ecefe9}
html[data-theme=light] .btn:not(.primary):hover{background:#182126;color:#fff}
html[data-theme=light] .btn.primary:hover{background:#ffe16a;color:#151b1e}
html[data-theme=light] .hero:after{background:linear-gradient(90deg,#f5f6f2 3%,rgba(245,246,242,.97) 28%,rgba(245,246,242,.72) 48%,rgba(245,246,242,.05) 85%),linear-gradient(0deg,#f5f6f2,transparent 35%)}
html[data-theme=light] .hero-foot{color:#344248}
html[data-theme=light] .hero .btn:not(.primary){background:#ffffffb3}
html[data-theme=light] .hero .btn:not(.primary):hover{background:#182126;color:#fff}
html[data-theme=light] .sketch-item{background:#fff;box-shadow:0 3px 12px #23342904}
html[data-theme=light] .sketch-item img{filter:none;opacity:.85}
html[data-theme=light] .sketch-item:hover,html[data-theme=light] .sketch-item[aria-current=true]{background:var(--yellow);color:#151b1e}
html[data-theme=light] .portal-mini{background:#fff;box-shadow:16px 16px 0 #e1e6df}
html[data-theme=light] .founder-hero .portrait{background:#e6ebe5}
html[data-theme=light] .inquiry-modal .generated-draft{background:#f1f4ee}
html[data-theme=light] .dock-row.channel{background:#e6f5eb;color:#176537}
html[data-theme=light] .qr-popover{background:#fff}
html[data-theme=light] .floating-review{background:#f8faf5;color:#47555c;border-color:#bfc8c2;box-shadow:0 5px 20px #0001}
html[data-theme=light] .demo-notice{background:#fff4ca;color:#614b0b;border-color:#e3cf87}
html[data-theme=light] .demo-label{color:#775a00}
html[data-theme=light] .portal-side{background:#edf1e9}
html[data-theme=light] .portal-side a.active{background:#faefb9;color:#705300}
html[data-theme=light] .portal-main{background:#f5f6f2}
html[data-theme=light] .route{background:radial-gradient(ellipse at center,#e4ede5,#f8faf6)}
html[data-theme=light] .port{background:#fff}
html[data-theme=light] .pill{background:#e1f1e5;color:#176b40}
html[data-theme=light] .pill.amber{background:#fff0be;color:#735400}
html[data-theme=light] .filter-options{scrollbar-color:#a0afa4 #eef2e9}
html[data-theme=light] input::placeholder,html[data-theme=light] textarea::placeholder{color:#64736b;opacity:1}
html[data-theme=light] .social-links a:hover{color:#806100;border-color:#806100}
html[data-theme=light] .paper .content-body a{color:#775b00}
@media(max-width:850px){html[data-theme=light] .hero:after{background:linear-gradient(90deg,rgba(245,246,242,.97),rgba(245,246,242,.5)),linear-gradient(0deg,#f5f6f2,transparent 80%)}}
@media(max-width:540px){html[data-theme=light] .hero:after{background:linear-gradient(90deg,rgba(245,246,242,.99),rgba(245,246,242,.66)),linear-gradient(0deg,#f5f6f2,transparent 80%)}}

@media(prefers-color-scheme:light){/* Light theme: porcelain, graphite and the same industrial yellow. Photos keep their original colors. */
html:not([data-theme]){color-scheme:light;--bg:#f5f6f2;--panel:#fff;--ink:#182126;--muted:#57636b;--line:#d1d8d4;--accent:#806100;--green:#176b40;--paper:#eceee7}
html:not([data-theme]) .header{background:rgba(250,251,248,.97)}
html:not([data-theme]) .brand img{filter:brightness(0)}
html:not([data-theme]) .topline{background:#ecefe9}
html:not([data-theme]) .btn:not(.primary):hover{background:#182126;color:#fff}
html:not([data-theme]) .btn.primary:hover{background:#ffe16a;color:#151b1e}
html:not([data-theme]) .hero:after{background:linear-gradient(90deg,#f5f6f2 3%,rgba(245,246,242,.97) 28%,rgba(245,246,242,.72) 48%,rgba(245,246,242,.05) 85%),linear-gradient(0deg,#f5f6f2,transparent 35%)}
html:not([data-theme]) .hero-foot{color:#344248}
html:not([data-theme]) .hero .btn:not(.primary){background:#ffffffb3}
html:not([data-theme]) .hero .btn:not(.primary):hover{background:#182126;color:#fff}
html:not([data-theme]) .sketch-item{background:#fff;box-shadow:0 3px 12px #23342904}
html:not([data-theme]) .sketch-item img{filter:none;opacity:.85}
html:not([data-theme]) .sketch-item:hover,html:not([data-theme]) .sketch-item[aria-current=true]{background:var(--yellow);color:#151b1e}
html:not([data-theme]) .portal-mini{background:#fff;box-shadow:16px 16px 0 #e1e6df}
html:not([data-theme]) .founder-hero .portrait{background:#e6ebe5}
html:not([data-theme]) .inquiry-modal .generated-draft{background:#f1f4ee}
html:not([data-theme]) .dock-row.channel{background:#e6f5eb;color:#176537}
html:not([data-theme]) .qr-popover{background:#fff}
html:not([data-theme]) .floating-review{background:#f8faf5;color:#47555c;border-color:#bfc8c2;box-shadow:0 5px 20px #0001}
html:not([data-theme]) .demo-notice{background:#fff4ca;color:#614b0b;border-color:#e3cf87}
html:not([data-theme]) .demo-label{color:#775a00}
html:not([data-theme]) .portal-side{background:#edf1e9}
html:not([data-theme]) .portal-side a.active{background:#faefb9;color:#705300}
html:not([data-theme]) .portal-main{background:#f5f6f2}
html:not([data-theme]) .route{background:radial-gradient(ellipse at center,#e4ede5,#f8faf6)}
html:not([data-theme]) .port{background:#fff}
html:not([data-theme]) .pill{background:#e1f1e5;color:#176b40}
html:not([data-theme]) .pill.amber{background:#fff0be;color:#735400}
html:not([data-theme]) .filter-options{scrollbar-color:#a0afa4 #eef2e9}
html:not([data-theme]) input::placeholder,html:not([data-theme]) textarea::placeholder{color:#64736b;opacity:1}
html:not([data-theme]) .social-links a:hover{color:#806100;border-color:#806100}
html:not([data-theme]) .paper .content-body a{color:#775b00}
@media(max-width:850px){html:not([data-theme]) .hero:after{background:linear-gradient(90deg,rgba(245,246,242,.97),rgba(245,246,242,.5)),linear-gradient(0deg,#f5f6f2,transparent 80%)}}
@media(max-width:540px){html:not([data-theme]) .hero:after{background:linear-gradient(90deg,rgba(245,246,242,.99),rgba(245,246,242,.66)),linear-gradient(0deg,#f5f6f2,transparent 80%)}}
}