/* =====================================================
   LogiLab Parts / SWELL Header & Footer Integration
   v0.37.0
   Uses the same visual tokens as the canonical keycaps.
===================================================== */

:root{
  --ll-chrome-key-unit:44px;
  --ll-chrome-key-gap:7px;
  --ll-chrome-sp-key-unit:40px;
  --ll-chrome-radius:6px;
  --ll-chrome-font:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --ll-chrome-key-top:color-mix(in srgb,var(--ll-color-paper) 78%,var(--ll-color-line) 22%);
  --ll-chrome-key-side:color-mix(in srgb,var(--ll-color-line) 70%,var(--ll-color-paper) 30%);
  --ll-chrome-key-base:var(--ll-color-muted);
  --ll-chrome-red-top:color-mix(in srgb,var(--ll-key-3) 74%,white 26%);
  --ll-chrome-red-side:var(--ll-key-3);
  --ll-chrome-red-base:color-mix(in srgb,var(--ll-key-3) 68%,black 32%);
}

/* Canonical three-layer key surface for footer navigation. */
.l-footer__nav li>a{
  box-sizing:border-box!important;border:0!important;border-radius:var(--ll-chrome-radius)!important;
  background:
    linear-gradient(180deg,var(--ll-chrome-key-top),var(--ll-chrome-key-top)) center 5px / calc(100% - 10px) calc(100% - 11px) no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--ll-color-line) 70%,var(--ll-color-paper) 30%),var(--ll-chrome-key-side)) center 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
    var(--ll-chrome-key-base)!important;
  box-shadow:0 4px 7px rgba(34,30,25,.14),inset 0 1px 0 rgba(255,255,255,.18)!important;
  color:var(--ll-color-text)!important;font-family:var(--ll-chrome-font)!important;font-weight:700!important;text-decoration:none!important;
  transition:transform .08s ease,box-shadow .08s ease,filter .08s ease!important;
}

/* ---------------- FOOTER ---------------- */
.l-footer__inner{
  background:var(--ll-color-sub-bg)!important;border-top:1px solid var(--ll-color-line)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 -3px 10px rgba(34,30,25,.05)!important;
}
.l-footer__foot{background:transparent!important;color:var(--ll-color-text)!important}
.l-footer__nav{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:7px!important;margin-bottom:18px!important}
.l-footer__nav li{margin:0!important;border:0!important}
.l-footer__nav li>a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;padding:0 12px!important;
  font-size:9px!important;line-height:1!important;letter-spacing:.03em!important;
}
.l-footer__nav li>a i{display:none!important}
.l-footer__nav li>a:hover{transform:translateY(2px)!important;box-shadow:0 2px 4px rgba(34,30,25,.12)!important;filter:brightness(.97)}
.l-footer__nav li:last-child>a{
  color:var(--ll-key-3-text)!important;
  background:
    linear-gradient(180deg,var(--ll-chrome-red-top),var(--ll-key-3)) center 5px / calc(100% - 10px) calc(100% - 11px) no-repeat,
    linear-gradient(180deg,var(--ll-key-3),var(--ll-chrome-red-side)) center 2px / calc(100% - 4px) calc(100% - 4px) no-repeat,
    var(--ll-chrome-red-base)!important;
}
.l-footer__nav li>a::before,.l-footer__nav li>a::after{content:none!important;display:none!important}
.l-footer__foot .copyright{margin-top:0!important;color:var(--ll-color-muted)!important;font-family:var(--ll-chrome-font)!important;font-size:9px!important;font-weight:700!important;letter-spacing:.08em!important}

@media(max-width:959px){
  .l-footer__nav{gap:6px!important;margin-bottom:16px!important}
  .l-footer__nav li>a{min-height:36px!important;padding:0 10px!important;font-size:8px!important}
  .l-footer__foot .copyright{font-size:8px!important}
}