/* ============================================================
   Xvisuallive — Global Theme Tokens（品牌配色唯一控制点）
   ------------------------------------------------------------
   换风格 / 客户选主色：只改下面这几个变量值即可，整站生效。
   本文件是静态 CSS，不经过 CMS 模板引擎，花括号安全。
   通过 header.html 的一行 <link> 引入，被所有页面加载。
   实际 URL：/static/default/web/css/theme.css
   ============================================================ */
:root{
  --brand:             #D42B2B;      /* 主品牌色：按钮/强调/链接 hover */
  --brand-dark:        #B52020;      /* 深一档：hover / 按下态 */
  --brand-light:       #FBF0F0;      /* 浅底：淡背景 / 标签底色 */
  --brand-on-dark:     #ff6b6b;      /* 深色背景上用的亮版 */
  --brand-rgb:         212, 43, 43;  /* 供 rgba(var(--brand-rgb), α) 使用 */
  --brand-on-dark-rgb: 255, 107, 107;/* footer 等深色区 rgba 用 */
}


/* ============================================================
   Language Switcher（多语言切换器，header 共享，纯 CSS 悬停）
   ============================================================ */
.lang-switch{position:relative;display:inline-flex;align-items:center;}
/* 胶囊按钮：一眼是语言选择控件 */
.lang-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  color:#1a1a1a;font:inherit;line-height:1;padding:6px 11px;border-radius:20px;
  border:1px solid rgba(0,0,0,.14);background:#fff;
  transition:background .2s ease,border-color .2s ease;outline:none;user-select:none;}
.lang-toggle:hover{background:#f4f6fa;border-color:rgba(0,0,0,.30);}
.lang-toggle img{width:18px;height:18px;border-radius:50%;object-fit:cover;display:block;flex:none;}
.lang-toggle > span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.lang-toggle svg{width:11px;height:11px;opacity:.75;transition:transform .2s ease;flex:none;}
.lang-switch:hover .lang-toggle svg,
.lang-switch:focus-within .lang-toggle svg{transform:rotate(180deg);}

.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;
  box-shadow:0 14px 38px rgba(0,0,0,.20);padding:6px;z-index:100000;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px;
  color:#243350;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease;}
.lang-opt:hover{background:#f4f6fa;}
.lang-opt.active{color:var(--brand,#D42B2B);background:var(--brand-light,#FBF0F0);}
.lang-opt img{width:18px;height:18px;border-radius:50%;object-fit:cover;display:block;flex:none;}