/* LIORIN visual theme: warm white surfaces, jade accents and spacious cards. */
:root {
  --bg-deep:#101f22; --bg-panel:#172c30; --bg-card:#1b3236;
  --border:#31494d; --border-active:#56847f;
  --text:#d2e1df; --text-dim:#9db7b3; --text-bright:#f1f8f6;
  --accent:#66d4bd; --accent-dim:#397f71;
  --xgo:#66d4bd; --xgo-dim:#397f71; --xgo-glow:rgba(102,212,189,.12);
  --rig:#b0b8f2; --rig-dim:#686f9f; --rig-glow:rgba(176,184,242,.12);
  --garage:#e1b779; --garage-dim:#9c7b49; --garage-glow:rgba(225,183,121,.12);
  --imager:#66d4bd; --imager-dim:#397f71;
}
html[data-theme="light"] {
  --bg-deep:#f4f6f3; --bg-panel:#fff; --bg-card:#fff;
  --border:#dbe3df; --border-active:#97b6ad;
  --text:#344c47; --text-dim:#6b7e78; --text-bright:#183b32;
  --accent:#087f72; --accent-dim:#a6d1c6;
  --xgo:#087f72; --xgo-dim:#a6d1c6; --xgo-glow:rgba(8,127,114,.08);
  --rig:#626fbc; --rig-dim:#c4c9e8; --rig-glow:rgba(98,111,188,.08);
  --garage:#a56d22; --garage-dim:#e7d3b3; --garage-glow:rgba(165,109,34,.08);
  --imager:#087f72; --imager-dim:#a6d1c6;
}
body { background:var(--bg-deep); }
body::before,body::after { display:none; }
.main-container { max-width:1240px; padding:24px 36px 10px; }
.header { grid-template-columns:1fr auto; gap:25px; padding:12px 0 28px; margin-bottom:40px; }
.header-left { grid-column:1; grid-row:1; }
.header-right { grid-column:2; grid-row:1; }
.header-center { grid-column:1/-1; grid-row:2; text-align:left; padding-top:28px; }
.header-center .title { font-family:inherit; font-size:38px; font-weight:650; letter-spacing:-1px; text-shadow:none; line-height:1.35; }
.header-center .subtitle { font-size:11px; letter-spacing:2px; margin-top:12px; }
.brand { text-decoration:none; color:var(--text-bright); font-size:26px; font-weight:800; letter-spacing:3px; gap:12px; }
.brand-symbol { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; background:var(--accent); color:var(--bg-panel); font-size:31px; font-weight:850; letter-spacing:-4px; padding-right:4px; }
.brand small { display:block; font-size:8px; font-weight:500; letter-spacing:2px; color:var(--text-dim); margin-top:4px; }
.status-dot { border-radius:50%; animation:none; box-shadow:none; }
.lang-switch,.theme-toggle { border-radius:9px; overflow:hidden; height:35px; }
.lang-btn { padding:8px 12px; }
.lang-btn.active { background:var(--accent); color:var(--bg-panel); }
#viewCategory { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.category-card { border:1px solid var(--border); border-radius:20px; padding:30px 26px; min-height:295px; margin:0; display:flex; flex-direction:column; background:var(--bg-panel); box-shadow:0 5px 16px rgba(22,61,46,.025); }
.category-card::before { height:5px; left:26px; right:auto; top:0; width:52px; border-radius:0 0 5px 5px; }
.category-card::after { content:'↗'; position:absolute; top:27px; right:23px; bottom:auto; width:auto; height:auto; border:0; color:var(--text-dim); font-size:21px; }
.category-card:hover { transform:translateY(-5px); border-color:var(--border-active); }
.category-card .cat-name { font-family:inherit; font-size:27px; font-weight:650; letter-spacing:-.5px; margin:4px 0 14px; }
.category-card .cat-desc { font-size:13px; line-height:1.85; max-width:none; margin:0 0 25px; }
.cat-products { margin-top:auto; padding-top:16px; display:flex; gap:8px; flex-wrap:wrap; overflow:visible; }
.cat-products img { width:46px; height:46px; border:1px solid var(--border); border-radius:10px; background:#fff; opacity:1; filter:none; object-fit:contain; }
.cat-products img:hover { transform:scale(1.12); }
.cat-products-fade { display:none; }
.tips-area { gap:22px; margin-top:34px; }
.tip-card { border-radius:17px; border:1px solid var(--border); padding:24px 26px; background:var(--bg-panel); box-shadow:none; }
.tip-card::before,.tip-card::after,.tip-header::before { display:none; }
.tip-header { display:block; }
.tip-icon { font-family:inherit; font-size:16px; font-weight:600; letter-spacing:0; margin-bottom:18px; }
.tip-icon::before,.tip-icon::after { content:none; }
.tip-list li { color:var(--text-dim); font-size:12px; line-height:1.8; margin-bottom:9px; }
.tip-list li::before { border-radius:50%; color:var(--accent); }
.site-footer { max-width:1168px; margin:26px auto 0; border-top:1px solid var(--border); padding:22px 0 30px; display:flex; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:1.5px; color:var(--text-dim); }
.section-header h2 { font-family:inherit; font-weight:600; font-size:17px; letter-spacing:0; }
.section-dot { border-radius:50%; box-shadow:none!important; }
.device-grid { gap:18px; }
.device-card { border-radius:17px; padding:20px; }
.device-card.selected { border:2px solid var(--accent); padding:19px; box-shadow:0 5px 20px var(--xgo-glow); }
.device-card .device-name { font-family:inherit; font-weight:600; font-size:16px; letter-spacing:0; margin:12px 0 8px; }
.device-img-swap { height:155px; border-radius:12px; background:#fff; }
.device-card:hover .device-img-photo { opacity:1; transform:scale(1.04); }
.device-card:hover .device-img-line { opacity:0; }
.device-type-badge,.device-version,.detail-type-tag,.version-badge { border-radius:6px; }
.detail-panel { border-radius:20px; padding:30px; }
.detail-header .detail-img { border-radius:14px; background:var(--bg-card); }
.detail-info .detail-name { font-family:inherit; font-size:26px; font-weight:650; letter-spacing:-.5px; }
.detail-info .detail-desc { font-size:14px; line-height:1.8; }
.soul-section,.flash-section,.changelog,.test-panel,.hw-test-panel,.imager-banner { border-radius:14px; }
.soul-inject-btn { border-radius:12px; text-shadow:none!important; box-shadow:none!important; }
.soul-config-btn,.soul-log-btn,.config-done-btn,.config-x,.back-btn,.flash-btn,.modal-btn,.ib-dl-btn,.type-filter-btn { border-radius:8px; }
.config-box,.modal,.serial-log-content { border-radius:18px; }
.flash-option,.beta-toggle-row,.feature-item,.func-test-card { border-radius:9px; }
.soul-overlay,.garage-overlay { background:var(--bg-deep); }
.soul-grid-bg,.soul-scan { display:none; }
input,select,button { font-family:inherit; }
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
html[data-theme="light"] .servo-input,html[data-theme="light"] .motor-speed { background:#fff; }
html[data-theme="light"] .log-console,html[data-theme="light"] .test-console,html[data-theme="light"] .serial-log-body { background:#eef3f0; color:#344c47; }
@media(max-width:900px) {
  .main-container { padding:20px 24px; }
  #viewCategory { grid-template-columns:1fr; gap:16px; }
  .category-card { min-height:210px; }
  .cat-products { margin-top:0; }
  .category-card .cat-desc { margin-bottom:10px; }
  .site-footer { margin:10px 24px 0; }
}
@media(max-width:600px) {
  .main-container { padding:16px; }
  .header { gap:18px; padding-top:2px; margin-bottom:24px; }
  .header-center { padding-top:15px; }
  .header-center .title { font-size:27px; letter-spacing:-.5px; }
  .header-center .subtitle { letter-spacing:1px; font-size:9px; line-height:1.7; }
  .brand { font-size:21px; gap:9px; }
  .brand-symbol { width:36px; height:36px; font-size:26px; border-radius:10px; }
  .header-right { gap:8px; }
  .status-indicator { display:none; }
  .lang-btn { padding:8px; }
  .theme-toggle { width:51px; }
  .category-card { padding:25px 22px; border-radius:16px; }
  .category-card .cat-name { font-size:25px; }
  .tips-area { grid-template-columns:1fr; margin-top:22px; }
  .tip-card { padding:22px; }
  .site-footer { flex-direction:column; margin:0 16px; line-height:1.8; }
  .device-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .device-card { padding:12px; }
  .device-card.selected { padding:11px; }
  .device-img-swap { height:110px; }
  .device-card .device-name { font-size:14px; }
  .detail-panel { padding:18px; }
  .detail-header { flex-direction:column; }
  .config-box { max-height:85vh; overflow-y:auto; }
  .flash-option { flex-wrap:wrap; }
  .flash-option .opt-desc { flex-basis:100%; padding-left:28px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
#viewCategory .category-card + .category-card { margin-top:0; }
.tip-card .tip-header { min-height:0; padding:0; background:none; }
.tip-card .tip-header::before { display:none; }
html[data-theme="light"] .tip-card { background:var(--bg-panel); box-shadow:none; }
.tip-icon { color:var(--text-bright); text-shadow:none; }