/* 演示飞鼠商业化双主题视觉层：不改变触摸命中与手势协议。 */
:root {
  --brand-accent-ink: #14200c;
  --brand-radius: 14px;
  --brand-ease: 160ms cubic-bezier(.2,.8,.2,1);
  font-family: "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #161b17;
  --muted: #687169;
  --panel: #fff;
  --line: rgba(28,47,34,.12);
  --accent: #9fe83b;
  --theme-bg: #eef1ec;
  --theme-bg-strong: #e7ebe5;
  --theme-surface: rgba(255,255,255,.86);
  --theme-solid: #fff;
  --theme-soft: #f4f6f2;
  --theme-raised: #fafcf9;
  --theme-text: #161b17;
  --theme-text-soft: #687169;
  --theme-text-faint: #89928b;
  --theme-line: rgba(28,47,34,.12);
  --theme-line-strong: rgba(28,47,34,.19);
  --theme-shadow: 0 14px 36px rgba(42,58,47,.10);
  --theme-shadow-small: 0 5px 14px rgba(42,58,47,.08);
  background: #eef1ec;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f5f1;
  --muted: #9ba59e;
  --panel: #121713;
  --line: rgba(225,239,228,.11);
  --accent: #a7f33f;
  --theme-bg: #090c0a;
  --theme-bg-strong: #070908;
  --theme-surface: rgba(18,23,19,.90);
  --theme-solid: #151a16;
  --theme-soft: #101411;
  --theme-raised: #1a201b;
  --theme-text: #f1f5f1;
  --theme-text-soft: #9ba59e;
  --theme-text-faint: #717b74;
  --theme-line: rgba(225,239,228,.11);
  --theme-line-strong: rgba(225,239,228,.18);
  --theme-shadow: 0 18px 44px rgba(0,0,0,.28);
  --theme-shadow-small: 0 6px 18px rgba(0,0,0,.22);
  background: #090c0a;
}

body {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 84% 0%, rgba(167,243,63,.09), transparent 30%),
    linear-gradient(155deg, var(--theme-bg), var(--theme-bg-strong));
  transition: color var(--brand-ease), background var(--brand-ease);
}
body.pairing-mode {
  background:
    radial-gradient(circle at 78% 8%, rgba(167,243,63,.14), transparent 27%),
    radial-gradient(circle at 8% 88%, rgba(93,166,255,.06), transparent 30%),
    linear-gradient(155deg, var(--theme-bg), var(--theme-bg-strong));
}

.shell { max-width: 760px; }
.mobile-brand { min-width: 0; display: flex; align-items: center; gap: 10px; }

.mobile-brand-mark {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--brand-accent-ink);
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
}
.mobile-brand-mark::before { content: ""; width: 17px; height: 19px; border: 2px solid currentColor; border-radius: 5px; }
.mobile-brand-mark i, .mobile-brand-mark i::after { position: absolute; content: ""; border-radius: 50%; }
.mobile-brand-mark i { width: 8px; height: 8px; border: 2px solid currentColor; }
.mobile-brand-mark i::after { width: 2px; height: 2px; inset: 1px; background: currentColor; }
.mobile-brand-mark-small { width: 25px; height: 25px; border-radius: 7px; }
.mobile-brand-mark-small::before { width: 13px; height: 15px; border-width: 1.5px; border-radius: 4px; }
.mobile-brand-mark-small i { width: 6px; height: 6px; border-width: 1.5px; }
.mobile-brand-mark-small i::after { width: 1.5px; height: 1.5px; inset: .75px; }

h1 { color: var(--theme-text); font-size: 23px; font-weight: 680; letter-spacing: -.045em; }

.theme-toggle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 11px;
  color: var(--theme-text-soft);
  background: var(--theme-surface);
  box-shadow: none;
  touch-action: manipulation;
  transition: color var(--brand-ease), border-color var(--brand-ease), background var(--brand-ease), transform 90ms ease;
}
.theme-toggle-glyph { width: 14px; height: 14px; border: 1.8px solid currentColor; border-radius: 50%; box-shadow: inset -4px -1px 0 currentColor; transform: rotate(-24deg); }
:root[data-theme="dark"] .theme-toggle-glyph { border-color: var(--accent); box-shadow: inset -4px -1px 0 var(--accent); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle-landscape { width: 32px; height: 32px; min-width: 32px; border-radius: 10px; }

.status, .mode-menu-trigger {
  height: 34px;
  color: var(--theme-text-soft);
  border-color: var(--theme-line);
  background: var(--theme-surface);
  box-shadow: none;
  backdrop-filter: blur(18px);
}
.status[data-state="online"] { color: var(--theme-text); }
.status[data-state="online"] .status-dot { box-shadow: 0 0 0 4px rgba(167,243,63,.15); }
.mode-menu-trigger[aria-expanded="true"] { color: var(--theme-text); border-color: rgba(132,191,50,.38); background: var(--theme-solid); }
.mode-menu-trigger[aria-expanded="true"] .mode-menu-chevron { color: var(--accent); }
.mode-menu { border-color: var(--theme-line); background: var(--theme-solid); box-shadow: var(--theme-shadow); }
.mode-menu-item { color: var(--theme-text-soft); }
.mode-menu-item:hover { color: var(--theme-text); background: var(--theme-soft); }
.mode-menu-item[aria-checked="true"] { color: var(--theme-text); border-color: rgba(132,191,50,.22); background: rgba(159,232,59,.10); }

.pair-panel { border-color: var(--theme-line); border-radius: 20px; background: var(--theme-surface); box-shadow: var(--theme-shadow-small); }
.pair-copy strong { color: var(--theme-text); }
.pair-copy span, .pair-privacy, .pair-field { color: var(--theme-text-soft); }
.pair-copy .pair-eyebrow { color: #6d972f; }
:root[data-theme="dark"] .pair-copy .pair-eyebrow { color: #b9ef73; }
.pair-field input, .quick-text { color: var(--theme-text); border-color: var(--theme-line); background: var(--theme-solid); box-shadow: inset 0 1px 2px rgba(31,48,36,.04); }
.pair-field input:focus, .quick-text:focus { border-color: rgba(126,177,48,.72); box-shadow: 0 0 0 3px rgba(159,232,59,.14); }
.enter-key { color: var(--theme-text); border-color: var(--theme-line); background: var(--theme-raised); }

.control-surface {
  border-color: var(--theme-line);
  border-radius: 26px;
  background: radial-gradient(circle at 50% 40%, rgba(159,232,59,.065), transparent 40%), linear-gradient(145deg, rgba(255,255,255,.11), transparent 45%), var(--theme-surface);
  box-shadow: var(--theme-shadow-small);
}
.control-surface.ready { border-color: rgba(126,177,48,.26); }
.control-ring {
  border-color: rgba(126,177,48,.30);
  background:
    radial-gradient(
      circle closest-side,
      transparent 0 65.5%,
      rgba(159,232,59,.13) 66% 67%,
      var(--theme-raised) 67.5% 97%,
      rgba(126,177,48,.13) 97.5% 99%,
      transparent 99.5%
    ),
    var(--theme-solid);
  box-shadow: inset 0 0 28px rgba(85,112,91,.07), var(--theme-shadow);
}
.utility-key, .ring-key, .extension-key { color: var(--theme-text-soft); border-color: var(--theme-line); background: var(--theme-raised); box-shadow: var(--theme-shadow-small); }
.ring-key {
  background: linear-gradient(145deg, var(--theme-raised), var(--theme-soft));
  filter: drop-shadow(0 1px 1px rgba(126,177,48,.18)) drop-shadow(0 3px 6px rgba(42,58,47,.10));
  box-shadow: none;
}
.ring-zoom-sector {
  color: var(--theme-text-soft);
  background: linear-gradient(180deg, var(--theme-raised), var(--theme-soft));
  filter: drop-shadow(0 1px 1px rgba(126,177,48,.16)) drop-shadow(0 3px 6px rgba(42,58,47,.09));
}
.extension-key {
  background: linear-gradient(145deg, var(--theme-raised), var(--theme-soft));
  filter: drop-shadow(0 1px 1px rgba(126,177,48,.13)) drop-shadow(0 4px 8px rgba(42,58,47,.10));
  box-shadow: none;
}
.ring-scroll-label { color: var(--theme-text-faint); }
.utility-key-primary { color: #3f6416; border-color: rgba(126,177,48,.26); background: rgba(159,232,59,.14); }
:root[data-theme="dark"] .utility-key-primary { color: #cffa91; }
.trackpad {
  color: var(--theme-text-faint);
  border-color: var(--theme-line-strong);
  background: radial-gradient(circle at 50% 40%, rgba(159,232,59,.035), transparent 54%), var(--theme-solid);
  box-shadow:
    inset 0 0 24px rgba(48,72,54,.08),
    0 0 0 4px var(--theme-solid),
    0 0 0 5px rgba(126,177,48,.20),
    var(--theme-shadow-small);
}
:root[data-theme="dark"] .control-ring {
  border-color: rgba(167,243,63,.28);
  box-shadow: inset 0 0 30px rgba(167,243,63,.045), var(--theme-shadow);
}
:root[data-theme="dark"] .ring-key,
:root[data-theme="dark"] .ring-zoom-sector,
:root[data-theme="dark"] .extension-key {
  filter: drop-shadow(0 0 1px rgba(167,243,63,.20)) drop-shadow(0 4px 8px rgba(0,0,0,.28));
}
:root[data-theme="dark"] .trackpad {
  box-shadow:
    inset 0 0 26px rgba(0,0,0,.62),
    0 0 0 4px var(--theme-bg-strong),
    0 0 0 5px rgba(167,243,63,.22),
    var(--theme-shadow-small);
}
.control-help { color: var(--theme-text-faint); }

body.landscape-touchpad-mode { background: var(--theme-bg); }
.landscape-touchpad {
  --landscape-accent: #91d731;
  --landscape-accent-rgb: 145,215,49;
  color: var(--theme-text);
  background: radial-gradient(circle at 52% 112%, rgba(var(--landscape-accent-rgb),.075), transparent 43%), linear-gradient(155deg, var(--theme-bg), var(--theme-bg-strong));
}
:root[data-theme="dark"] .landscape-touchpad { --landscape-accent: #a7f33f; --landscape-accent-rgb: 167,243,63; }
.landscape-touchpad[data-control-mode="presentation"] { --landscape-accent: #f36f67; --landscape-accent-rgb: 243,111,103; }
.landscape-touchpad[data-control-mode="coding"] { --landscape-accent: #4caed6; --landscape-accent-rgb: 76,174,214; }
.landscape-touchpad[data-control-mode="design"] { --landscape-accent: #a67bdc; --landscape-accent-rgb: 166,123,220; }
:root[data-theme="dark"] .landscape-touchpad[data-control-mode="presentation"] { --landscape-accent: #ff766e; --landscape-accent-rgb: 255,118,110; }
:root[data-theme="dark"] .landscape-touchpad[data-control-mode="coding"] { --landscape-accent: #55d3ff; --landscape-accent-rgb: 85,211,255; }
:root[data-theme="dark"] .landscape-touchpad[data-control-mode="design"] { --landscape-accent: #c29cff; --landscape-accent-rgb: 194,156,255; }
.landscape-brand strong { color: var(--theme-text); font-weight: 660; letter-spacing: .02em; }
.landscape-connection, .landscape-gesture-status { color: var(--theme-text-faint); }
.landscape-connection[data-state="online"] { color: var(--theme-text-soft); }
.landscape-mode-menu-control { display: flex; align-items: center; gap: 6px; }

.landscape-command-key { color: var(--theme-text-soft); border-color: var(--theme-line); border-radius: var(--brand-radius); background: var(--theme-raised); box-shadow: var(--theme-shadow-small); font-weight: 620; }
.landscape-command-key-primary { color: rgb(var(--landscape-accent-rgb)); border-color: rgba(var(--landscape-accent-rgb),.24); background: rgba(var(--landscape-accent-rgb),.10); }
.landscape-command-key-danger { color: #ce554e; border-color: rgba(206,85,78,.20); background: rgba(206,85,78,.08); }
:root[data-theme="dark"] .landscape-command-key-danger { color: #ffb1ac; background: rgba(86,34,31,.52); }

.landscape-trackpad-area, .pure-trackpad-area {
  color: var(--theme-text-faint);
  border-color: var(--theme-line);
  background: radial-gradient(circle at 50% 45%, rgba(var(--landscape-accent-rgb),.035), transparent 48%), linear-gradient(150deg, rgba(255,255,255,.11), transparent 43%), var(--theme-solid);
  box-shadow: inset 0 0 32px rgba(47,64,52,.055), var(--theme-shadow-small);
}
:root[data-theme="dark"] .landscape-trackpad-area, :root[data-theme="dark"] .pure-trackpad-area { box-shadow: inset 0 0 34px rgba(0,0,0,.28), var(--theme-shadow-small); }
.landscape-trackpad-area.active { box-shadow: inset 0 0 28px rgba(var(--landscape-accent-rgb),.035), 0 0 0 3px rgba(var(--landscape-accent-rgb),.07); }
.landscape-trackpad-mode, .pure-gesture-labels { color: var(--theme-text-faint); }
.pure-gesture-labels span { background: rgba(118,139,123,.07); }

.pure-mouse-side-button, .pure-scroll-strip { color: var(--theme-text-soft); }
.pure-mouse-side-button { border-color: var(--theme-line-strong); background: var(--theme-raised); box-shadow: var(--theme-shadow-small); }
.pure-scroll-strip {
  border-color: rgba(var(--landscape-accent-rgb),.28);
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--landscape-accent-rgb),.22), transparent 46%),
    linear-gradient(155deg, rgba(var(--landscape-accent-rgb),.14), rgba(255,255,255,.02) 52%),
    var(--theme-raised);
  box-shadow:
    0 10px 24px rgba(35,55,42,.14),
    inset 0 1px rgba(255,255,255,.48),
    inset 0 -1px rgba(45,66,51,.12);
}
:root[data-theme="dark"] .pure-scroll-strip {
  border-color: rgba(var(--landscape-accent-rgb),.32);
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--landscape-accent-rgb),.18), transparent 47%),
    linear-gradient(155deg, rgba(var(--landscape-accent-rgb),.10), rgba(255,255,255,.015) 55%),
    #18211f;
  box-shadow:
    0 12px 28px rgba(0,0,0,.32),
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -1px rgba(0,0,0,.34);
}
.pure-scroll-strip-rail { border-color: rgba(var(--landscape-accent-rgb),.24); background: rgba(var(--landscape-accent-rgb),.13); box-shadow: inset 0 1px 4px rgba(48,64,52,.22), 0 0 0 3px rgba(var(--landscape-accent-rgb),.045); }
.pure-scroll-strip-rail::after { background: var(--theme-line-strong); }
.pure-scroll-strip-speed, .pure-scroll-strip-arrow { color: var(--theme-text-faint); }
:root[data-theme="light"] .pure-mouse-side-button { --pure-mouse-key-rgb: 85,139,41; }
:root[data-theme="light"] .pure-mouse-side-button-right { --pure-mouse-key-rgb: 132,92,177; }

.computer-keyboard { border-color: var(--theme-line); background: var(--theme-soft); box-shadow: var(--theme-shadow-small); }
.computer-keyboard-header { color: var(--theme-text-faint); }
.computer-keyboard-header strong { color: var(--theme-text); }
.computer-keyboard-navigation { border-color: var(--theme-line); background: var(--theme-solid); }
.computer-key { color: var(--theme-text); border-color: var(--theme-line); background: var(--theme-raised); box-shadow: 0 2px 5px rgba(40,56,45,.09), inset 0 1px rgba(255,255,255,.28); }
:root[data-theme="dark"] .computer-key { box-shadow: 0 3px 8px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.035); }
.computer-key small { color: var(--theme-text-faint); }
.computer-key-special { color: var(--theme-text-soft); background: var(--theme-soft); }
.computer-key-enter, .computer-key-space, .computer-key-backspace { color: rgb(var(--landscape-accent-rgb)); border-color: rgba(var(--landscape-accent-rgb),.25); background: rgba(var(--landscape-accent-rgb),.08); }
.computer-key-close { color: var(--theme-text-faint); background: var(--theme-soft); }

/* “动能光迹”：借鉴高速划动的即时感，但保持品牌化和精密操作的克制。 */
.kinetic-feedback { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: inherit; pointer-events: none; }
.kinetic-trail {
  position: absolute;
  left: var(--landscape-touch-x, 50%);
  top: var(--landscape-touch-y, 50%);
  width: var(--kinetic-trail-length, 54px);
  height: var(--kinetic-trail-width, 4px);
  border-radius: 999px;
  opacity: 0;
  transform-origin: 100% 50%;
  transform: translate(-100%,-50%) rotate(var(--kinetic-angle, 0deg));
  background: linear-gradient(90deg, transparent, rgba(var(--landscape-accent-rgb),.18) 35%, rgba(var(--landscape-accent-rgb),.72) 78%, rgba(255,255,255,.92));
  filter: drop-shadow(0 0 5px rgba(var(--landscape-accent-rgb),.34));
  transition: opacity 90ms ease-out, width 80ms linear;
}
.landscape-trackpad-area.kinetic-moving .kinetic-trail { opacity: var(--kinetic-opacity, .55); }
.landscape-trackpad-area.scroll-touch .kinetic-trail { --kinetic-trail-width: 3px; }
.landscape-trackpad-area.pinch-touch .kinetic-trail { background: linear-gradient(90deg, transparent, rgba(194,156,255,.24), rgba(194,156,255,.9), #fff); }
.landscape-trackpad-area.triple-touch .kinetic-trail { height: 6px; filter: drop-shadow(0 0 8px rgba(var(--landscape-accent-rgb),.48)); }
.kinetic-impact {
  position: absolute;
  left: var(--landscape-touch-x, 50%);
  top: var(--landscape-touch-y, 50%);
  width: 26px;
  height: 26px;
  border: 2px solid rgba(var(--landscape-accent-rgb),.82);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.35);
  box-shadow: 0 0 14px rgba(var(--landscape-accent-rgb),.24);
}
.landscape-trackpad-area.kinetic-impact-active .kinetic-impact { animation: kinetic-impact 280ms cubic-bezier(.16,.8,.28,1); }
@keyframes kinetic-impact { 0% { opacity: .95; transform: translate(-50%,-50%) scale(.3); } 65% { opacity: .46; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.1); } }

@media (orientation: landscape) {
  .pure-trackpad-area::before { border-color: rgba(var(--landscape-accent-rgb),.13); background: radial-gradient(circle at 46% 42%, rgba(var(--landscape-accent-rgb),.035), transparent 54%), rgba(120,140,126,.025); box-shadow: inset 0 0 28px rgba(55,73,60,.04); }
  .pure-mouse-side-button { background: radial-gradient(circle at 50% 16%, rgba(var(--landscape-accent-rgb),.055), transparent 48%), var(--theme-raised); box-shadow: var(--theme-shadow-small); }
  .landscape-zone-labels { color: var(--theme-text-faint); }
}

@media (max-width: 390px) {
  .shell { padding-right: 12px; padding-left: 12px; gap: 10px; }
  .mobile-brand { gap: 7px; }
  .mobile-brand-mark { width: 29px; height: 29px; border-radius: 8px; }
  h1 { font-size: 21px; }
  .theme-toggle { width: 32px; height: 32px; min-width: 32px; }
  .status { padding-right: 8px; padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle, .kinetic-trail { transition: none; }
  .landscape-trackpad-area.kinetic-impact-active .kinetic-impact { animation-duration: 1ms; }
}