:root {
      --orange: #f3661f;
      --orange-dark: #d84d0a;
      --orange-soft: #fff0e8;
      --ink: #17191a;
      --graphite: #565c5f;
      --muted: #747a7d;
      --line: #dfe1df;
      --paper: #f6f5f1;
      --white: #ffffff;
      --success: #2f8657;
      --danger: #c94c3c;
      --level-low: #ff3b30;
      --level-low-soft: #ffe4df;
      --level-mid: #ffcc00;
      --level-mid-soft: #fff4d2;
      --level-high: #00c853;
      --level-high-soft: #e7f8ee;
      --shadow-soft: 0 16px 42px rgba(26, 31, 32, 0.09);
      --shadow-card: 0 22px 54px rgba(26, 31, 32, 0.13), 0 3px 9px rgba(26, 31, 32, 0.07);
      --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
      color-scheme: light;
      color: var(--ink);
      background: var(--paper);
      font-family: "Avenir Next", "Source Han Sans CN", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif;
      font-synthesis: none;
    }

    * {
      box-sizing: border-box;
    }

    html {
      height: 100%;
      min-width: 320px;
      background: var(--paper);
    }

    body {
      height: 100%;
      min-height: 0;
      margin: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 92% 2%, rgba(243, 102, 31, 0.13), transparent 28rem),
        radial-gradient(circle at 2% 96%, rgba(243, 102, 31, 0.05), transparent 24rem),
        var(--paper);
    }

    button {
      font: inherit;
    }

    button:focus-visible {
      outline: 3px solid rgba(243, 102, 31, 0.24);
      outline-offset: 3px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .page-shell {
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
    }

    .site-header {
      position: relative;
      z-index: 10;
      color: var(--white);
      border-bottom: 1px solid rgba(255, 255, 255, 0.13);
      background:
        radial-gradient(circle at 88% 0, rgba(243, 102, 31, 0.07), transparent 19rem),
        linear-gradient(90deg, #687475 0%, #596463 32%, #000000 100%);
      box-shadow: 0 12px 26px rgba(23, 25, 26, 0.11), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    }

    .header-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .header-title {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .header-copy {
      display: grid;
      gap: 5px;
    }

    .power-bank-image {
      width: 58px;
      height: 58px;
      padding: 5px;
      flex: 0 0 auto;
      object-fit: contain;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 17px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06) 52%, rgba(0, 0, 0, 0.16)),
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.22), transparent 1.65rem);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset -5px -6px 14px rgba(0, 0, 0, 0.16),
        0 12px 20px rgba(0, 0, 0, 0.25);
      filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16))
        drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.2))
        drop-shadow(0 12px 12px rgba(0, 0, 0, 0.32));
      backdrop-filter: blur(7px) saturate(1.14);
      -webkit-backdrop-filter: blur(7px) saturate(1.14);
    }

    .header-title h1 {
      margin: 0;
      font-size: clamp(21px, 2.6vw, 28px);
      line-height: 1.1;
      letter-spacing: -0.035em;
      text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2),
        0 3px 0 rgba(0, 0, 0, 0.52),
        0 7px 13px rgba(0, 0, 0, 0.5);
    }

    .header-title p {
      margin: 0;
      color: #c3c9cb;
      font-size: 12px;
      line-height: 1.5;
      text-shadow: 0 2px 2px #000, 0 4px 8px rgba(0, 0, 0, 0.55);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .connection-state {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 34px;
      padding: 0;
      border: 0;
      color: #c0c6c8;
      background: transparent;
      font-size: 12px;
      font-weight: 700;
      text-shadow: none;
    }

    .state-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #92999b;
      box-shadow: none;
      transition: background 0.25s, box-shadow 0.25s;
    }

    .connection-state.is-connected {
      color: #7ce0a8;
      background: transparent;
    }

    .connection-state.is-connected .state-dot {
      background: #43b774;
      box-shadow: none;
    }

    .button {
      min-height: 50px;
      padding: 0 21px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid var(--ink);
      border-radius: 0;
      color: var(--ink);
      background: transparent;
      box-shadow: 0 8px 18px rgba(23, 25, 26, 0.08);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
    }

    .button:hover:not(:disabled) {
      transform: translateY(-3px);
      box-shadow: 0 13px 25px rgba(23, 25, 26, 0.14);
    }

    .button:disabled {
      opacity: 0.5;
      cursor: wait;
    }

    .button-primary {
      color: var(--white);
      border-color: var(--orange);
      background: linear-gradient(145deg, #ff7a35, var(--orange) 58%, #df510d);
      box-shadow: 0 18px 38px rgba(197, 72, 9, 0.2);
    }

    .button-primary:hover:not(:disabled) {
      border-color: var(--orange-dark);
      background: var(--orange-dark);
    }

    .site-header .button {
      min-width: 82px;
      min-height: 38px;
      padding: 0 16px;
      gap: 0;
      font-size: 12px;
      border-radius: 4px;
      background: var(--orange);
      box-shadow: none;
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: background-color;
      transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
    }

    .site-header .button:hover:not(:disabled) {
      border-color: var(--orange-dark);
      background: var(--orange-dark);
      box-shadow: none;
      filter: none;
      transform: translateZ(0);
    }

    .site-header .button:active:not(:disabled) {
      background: #bd4108;
      box-shadow: none;
      filter: none;
    }

    .main-content {
      height: calc(100vh - 76px);
      padding: 16px 0;
    }

    .main-content > .page-shell {
      height: 100%;
    }

    .device-panel {
      position: relative;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(23, 25, 26, 0.12);
      background: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow-card);
    }

    .tabs {
      min-height: 50px;
      padding: 7px 18px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 50px;
      border-bottom: 1px solid var(--line);
      background: #fbfbfa;
    }

    .tab-button {
      position: relative;
      min-height: 34px;
      padding: 0 18px;
      border: 1px solid var(--orange);
      border-radius: 5px;
      color: var(--orange-dark);
      background: var(--orange-soft);
      box-shadow: none;
      font-size: 13px;
      font-weight: 750;
      cursor: pointer;
      transform: none;
      transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .tab-button::after {
      display: none;
    }

    .tab-button:hover {
      color: var(--orange-dark);
      background: #ffe1d1;
      transform: none;
    }

    .tab-button[aria-selected="true"] {
      color: var(--white);
      border-color: var(--orange);
      background: var(--orange);
      box-shadow: 0 5px 12px rgba(243, 102, 31, 0.2);
      transform: none;
    }

    .tab-button[aria-selected="true"]::after {
      display: none;
    }

    .tab-panel {
      min-height: 0;
      flex: 1 1 auto;
      padding: 16px 18px;
      overflow: hidden;
    }

    .tab-panel[hidden] {
      display: none;
    }

    #details-panel:not([hidden]) {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    #records-panel:not([hidden]) {
      display: flex;
      flex-direction: column;
    }

    .section-intro {
      margin-bottom: 16px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
    }

    .section-intro h2 {
      margin: 0;
      font-size: 20px;
      letter-spacing: -0.025em;
    }

    .section-intro p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .last-updated {
      color: #969b9d;
      font-size: 11px;
      white-space: nowrap;
    }

    .battery-summary {
      min-height: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      flex: 0 0 96px;
    }

    .battery-summary-item {
      position: relative;
      min-width: 0;
      padding: 15px 18px 13px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-left: 3px solid var(--orange);
      background: linear-gradient(135deg, var(--white), #faf9f6);
      box-shadow: 0 9px 22px rgba(23, 25, 26, 0.065);
    }

    .battery-level-item,
    .battery-health-item {
      padding-right: 104px;
    }

    .battery-summary-item::after {
      content: "";
      position: absolute;
      top: -34px;
      right: -24px;
      width: 86px;
      height: 86px;
      border: 13px solid rgba(243, 102, 31, 0.045);
      border-radius: 50%;
      pointer-events: none;
    }

    .battery-summary-item dt {
      position: relative;
      z-index: 1;
      color: var(--muted);
      font-size: 11px;
    }

    .battery-summary-item dd {
      position: relative;
      z-index: 1;
      margin: 7px 0 0;
      color: var(--ink);
      font-size: clamp(22px, 2.5vw, 30px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .battery-summary-item small {
      position: absolute;
      right: 15px;
      bottom: 13px;
      color: #a2a6a7;
      font: 700 8px ui-monospace, SFMono-Regular, Consolas, monospace;
      letter-spacing: 0.11em;
    }

    .battery-visual {
      --level-color: #a8afb1;
      --level-soft: #edf0ef;
      position: absolute;
      right: 18px;
      top: 50%;
      width: 76px;
      height: 44px;
      padding: 10px 13px 10px 10px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      overflow: visible;
      border: 1px solid color-mix(in srgb, var(--level-color), #151718 42%);
      border-radius: 15px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.48) 45%, rgba(26, 31, 32, 0.1)),
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.95), transparent 1.8rem),
        color-mix(in srgb, var(--level-soft), transparent 24%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset -3px -5px 12px rgba(23, 25, 26, 0.1),
        inset 3px 4px 10px rgba(255, 255, 255, 0.48),
        0 12px 24px color-mix(in srgb, var(--level-color), transparent 72%),
        0 7px 14px rgba(23, 25, 26, 0.14);
      transform: translateY(-50%);
      z-index: 1;
      backdrop-filter: blur(7px) saturate(1.2);
      -webkit-backdrop-filter: blur(7px) saturate(1.2);
    }

    .battery-visual::before {
      content: "";
      position: absolute;
      inset: -11px -10px;
      z-index: 0;
      background: var(--level-color);
      opacity: 0.12;
      pointer-events: none;
      mask: url("./images/battery.png") center / contain no-repeat;
      -webkit-mask: url("./images/battery.png") center / contain no-repeat;
      filter: drop-shadow(0 8px 10px rgba(23, 25, 26, 0.18));
    }

    .battery-visual::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -8px;
      width: 8px;
      height: 18px;
      border: 1px solid color-mix(in srgb, var(--level-color), #151718 38%);
      border-left: 0;
      border-radius: 0 8px 8px 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.42)),
        color-mix(in srgb, var(--level-color), transparent 44%);
      box-shadow:
        inset -2px -2px 4px rgba(23, 25, 26, 0.12),
        4px 6px 10px rgba(23, 25, 26, 0.11);
      transform: translateY(-50%);
    }

    .battery-visual-segment {
      position: relative;
      z-index: 1;
      display: block;
      min-width: 0;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 7px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2)),
        rgba(255, 255, 255, 0.18);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -7px 10px rgba(23, 25, 26, 0.05);
      opacity: 0.5;
      transition: background 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
    }

    .battery-visual.is-low .battery-visual-segment:nth-child(1),
    .battery-visual.is-medium .battery-visual-segment:nth-child(-n + 2),
    .battery-visual.is-high .battery-visual-segment:nth-child(-n + 3) {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--level-color), #ffffff 14%), var(--level-color) 58%, color-mix(in srgb, var(--level-color), #17191a 10%)),
        var(--level-color);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -8px 10px rgba(23, 25, 26, 0.1),
        0 0 14px color-mix(in srgb, var(--level-color), transparent 48%);
      opacity: 1;
    }

    .health-visual {
      --level-color: #a8afb1;
      --level-soft: #edf0ef;
      position: absolute;
      right: 18px;
      top: 50%;
      width: 58px;
      height: 52px;
      display: grid;
      place-items: center;
      overflow: visible;
      background: transparent;
      transform: translateY(-50%);
      z-index: 1;
      filter:
        drop-shadow(0 12px 20px color-mix(in srgb, var(--level-color), transparent 76%))
        drop-shadow(0 7px 12px rgba(23, 25, 26, 0.13));
    }

    .health-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.16) 42%, rgba(23, 25, 26, 0.1)),
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.96), transparent 1.35rem),
        linear-gradient(180deg, color-mix(in srgb, var(--level-color), #ffffff 12%), var(--level-color) 66%, color-mix(in srgb, var(--level-color), #17191a 10%));
      clip-path: path("M29 49 C12 36 4 28 4 17 C4 9 10 4 17 4 C22 4 26 7 29 12 C32 7 36 4 41 4 C48 4 54 9 54 17 C54 28 46 36 29 49 Z");
      pointer-events: none;
      box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset -7px -8px 15px rgba(23, 25, 26, 0.12),
        inset 5px 6px 13px rgba(255, 255, 255, 0.42);
    }

    .health-visual::after {
      content: "";
      position: absolute;
      inset: 5px 7px 13px 9px;
      z-index: 1;
      background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.88), transparent 1.15rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 48%);
      clip-path: path("M20 29 C11 22 8 18 8 13 C8 9 11 7 15 7 C18 7 20 9 22 12 C24 9 26 7 29 7 C33 7 36 9 36 13 C36 18 32 22 22 30 Z");
      opacity: 0.86;
      pointer-events: none;
    }

    .health-visual-mark {
      position: relative;
      z-index: 2;
      width: 27px;
      height: 27px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.66)),
        rgba(255, 255, 255, 0.82);
      mask: url("./images/health.png") center / contain no-repeat;
      -webkit-mask: url("./images/health.png") center / contain no-repeat;
      filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
        drop-shadow(0 5px 6px rgba(23, 25, 26, 0.13));
    }

    .battery-visual.is-low,
    .health-visual.is-low {
      --level-color: var(--level-low);
      --level-soft: var(--level-low-soft);
    }

    .battery-visual.is-medium,
    .health-visual.is-medium {
      --level-color: var(--level-mid);
      --level-soft: var(--level-mid-soft);
    }

    .battery-visual.is-high,
    .health-visual.is-high {
      --level-color: var(--level-high);
      --level-soft: var(--level-high-soft);
    }

    .details-columns {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(300px, 0.78fr) minmax(500px, 1.22fr);
      gap: 14px;
      flex: 1 1 auto;
    }

    .identity-card,
    .cells-card {
      min-height: 0;
      overflow: hidden;
      border-color: rgba(23, 25, 26, 0.1);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 248, 242, 0.94)),
        radial-gradient(circle at 96% 0, rgba(243, 102, 31, 0.08), transparent 12rem);
      box-shadow:
        0 14px 30px rgba(23, 25, 26, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .details-columns .card-heading {
      position: relative;
      min-height: 48px;
      padding: 0 20px;
      overflow: hidden;
      border-bottom: 1px solid rgba(23, 25, 26, 0.08);
      justify-content: flex-start;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(255, 244, 232, 0.54)),
        radial-gradient(circle at 100% 0, rgba(243, 102, 31, 0.1), transparent 9rem);
    }

    .details-columns .card-heading::before {
      content: "";
      width: 8px;
      height: 22px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ff8a47, var(--orange));
      box-shadow: 0 7px 12px rgba(243, 102, 31, 0.24);
    }

    .details-columns .card-heading h3 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #121516;
      letter-spacing: -0.02em;
    }

    .identity-card .identity-list {
      height: calc(100% - 48px);
      padding: 8px 14px 12px;
      display: grid;
      grid-template-rows: repeat(7, minmax(0, 1fr));
      gap: 6px;
    }

    .identity-card .identity-row {
      min-height: 0;
      padding: 0 14px;
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 14px;
      border: 1px solid rgba(23, 25, 26, 0.055);
      border-bottom: 1px solid rgba(23, 25, 26, 0.055);
      border-radius: 14px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(246, 245, 240, 0.62)),
        radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.82), transparent 4rem);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 7px 14px rgba(23, 25, 26, 0.035);
    }

    .identity-card .identity-row dt {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 700;
    }

    .identity-card .identity-row dt::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 4px rgba(243, 102, 31, 0.1);
    }

    .identity-card .identity-row dd {
      font-size: 13px;
      color: #121516;
      text-align: left;
      justify-self: start;
    }

    .cell-table {
      height: calc(100% - 48px);
      min-height: 0;
      display: grid;
      grid-template-rows: 34px;
      grid-auto-rows: 64px;
      align-content: start;
      gap: 7px;
      padding: 9px 0 10px;
      overflow-y: auto;
      background:
        linear-gradient(180deg, #fbfaf6, #f4f2ec),
        radial-gradient(circle at 100% 0, rgba(243, 102, 31, 0.08), transparent 10rem);
    }

    .cell-table.has-rows {
      grid-template-rows: 34px;
    }

    .cell-table-row {
      position: relative;
      min-width: 0;
      padding: 0 18px;
      display: grid;
      grid-template-columns: minmax(120px, 1.5fr) minmax(72px, 0.75fr) minmax(72px, 0.75fr);
      align-items: center;
      gap: 12px;
      font-size: 12px;
    }

    .cell-table-row:not(.cell-table-head) {
      --cell-row-bg: #fbfaf6;
      --cell-row-accent: transparent;
      height: 64px;
      margin: 0 12px;
      padding-left: 56px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--cell-row-accent), #d8d8d1 68%);
      border-radius: 999px;
      background:
        radial-gradient(ellipse at 26px 50%, rgba(255, 255, 255, 0.88), transparent 25px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.14) 48%, rgba(23, 25, 26, 0.05)),
        linear-gradient(90deg, color-mix(in srgb, var(--cell-row-bg), #ffffff 38%), var(--cell-row-bg) 62%, color-mix(in srgb, var(--cell-row-bg), #17191a 5%));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -13px 20px rgba(23, 25, 26, 0.07),
        inset 4px 0 0 color-mix(in srgb, var(--cell-row-accent), transparent 14%),
        0 9px 18px rgba(23, 25, 26, 0.075);
    }

    .cell-table-row:not(.cell-table-head)::before {
      content: "";
      position: absolute;
      left: 9px;
      top: 10px;
      width: 38px;
      height: 42px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.86), transparent 11px),
        linear-gradient(135deg, color-mix(in srgb, var(--cell-row-bg), #ffffff 34%), color-mix(in srgb, var(--cell-row-bg), #17191a 7%));
      box-shadow:
        inset 2px 0 5px rgba(255, 255, 255, 0.64),
        inset -5px -4px 9px rgba(23, 25, 26, 0.08);
      opacity: 0.82;
    }

    .cell-table-row:not(.cell-table-head)::after {
      content: "";
      position: absolute;
      left: 52px;
      right: 18px;
      top: 8px;
      height: 15px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
      opacity: 0.58;
      pointer-events: none;
    }

    .cell-table-row.temp-low {
      --cell-row-bg: #eef9f2;
      --cell-row-accent: var(--level-high);
    }

    .cell-table-row.temp-medium {
      --cell-row-bg: #fff8dc;
      --cell-row-accent: var(--level-mid);
    }

    .cell-table-row.temp-high {
      --cell-row-bg: #fff0ec;
      --cell-row-accent: var(--level-low);
    }

    .cell-table-row.temp-unknown {
      --cell-row-bg: #fbfaf6;
      --cell-row-accent: #e7e3dc;
    }

    .cell-table-row:last-child {
      border-bottom: 0;
    }

    .cell-table-head {
      height: 34px;
      margin: 0 12px 1px;
      padding-left: 56px;
      color: #874116;
      border: 1px solid rgba(243, 102, 31, 0.22);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 236, 224, 0.68)),
        linear-gradient(90deg, rgba(243, 102, 31, 0.18), rgba(255, 255, 255, 0.55));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 8px 16px rgba(243, 102, 31, 0.08);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .cell-table-head [role="columnheader"],
    .cell-table-row [role="cell"] {
      justify-self: start;
      text-align: left;
    }

    .cell-table-row [role="cell"] {
      position: relative;
      z-index: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-weight: 700;
    }

    .overview-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
      gap: 20px;
    }

    .info-card {
      border: 1px solid var(--line);
      background: var(--white);
      box-shadow: var(--shadow-soft);
    }

    .card-heading {
      min-height: 64px;
      padding: 0 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-bottom: 1px solid var(--line);
    }

    .card-heading h3 {
      margin: 0;
      font-size: 15px;
    }

    .card-index {
      color: var(--orange);
      font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace;
      letter-spacing: 0.13em;
    }

    .identity-list {
      margin: 0;
      padding: 4px 22px;
    }

    .identity-row {
      min-height: 66px;
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      align-items: center;
      gap: 20px;
      border-bottom: 1px solid #ececea;
    }

    .identity-row:last-child {
      border-bottom: 0;
    }

    .identity-row dt {
      color: var(--muted);
      font-size: 13px;
    }

    .identity-row dd {
      min-width: 0;
      margin: 0;
      overflow-wrap: anywhere;
      font-size: 15px;
      font-weight: 700;
      text-align: right;
    }

    .value-placeholder {
      color: #a5aaac;
      font-weight: 500;
    }

    .battery-card {
      position: relative;
      overflow: hidden;
      color: var(--white);
      border-color: #1d2426;
      background:
        radial-gradient(circle at 80% 14%, rgba(243, 102, 31, 0.34), transparent 13rem),
        linear-gradient(145deg, #111617, #263033);
      box-shadow: 0 28px 58px rgba(23, 25, 26, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .battery-card::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.12;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(135deg, #000, transparent 84%);
      pointer-events: none;
    }

    .battery-card .card-heading {
      position: relative;
      z-index: 1;
      border-color: rgba(255, 255, 255, 0.12);
    }

    .battery-card .card-index {
      color: #ff8a4d;
    }

    .battery-body {
      position: relative;
      z-index: 1;
      min-height: 268px;
      padding: 28px 26px;
      display: grid;
      grid-template-columns: 148px minmax(0, 1fr);
      align-items: center;
      gap: 26px;
    }

    .battery-gauge {
      --battery-progress: 0deg;
      position: relative;
      width: 148px;
      height: 148px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(var(--orange) var(--battery-progress), rgba(255, 255, 255, 0.12) 0);
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
    }

    .battery-gauge::before {
      content: "";
      position: absolute;
      inset: 11px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      background: #1a2022;
      box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.25);
    }

    .gauge-value {
      position: relative;
      display: flex;
      align-items: baseline;
      gap: 2px;
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -0.05em;
    }

    .gauge-value small {
      color: #aeb5b7;
      font-size: 13px;
      font-weight: 600;
    }

    .battery-facts {
      margin: 0;
      display: grid;
      gap: 21px;
    }

    .battery-facts div {
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .battery-facts div:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .battery-facts dt {
      margin-bottom: 7px;
      color: #929b9e;
      font-size: 11px;
    }

    .battery-facts dd {
      margin: 0;
      font-size: 17px;
      font-weight: 750;
    }

    .cell-card {
      margin-top: 20px;
    }

    .cell-layout {
      display: grid;
      grid-template-columns: minmax(250px, 0.58fr) minmax(0, 1.42fr);
    }

    .cell-identity {
      margin: 0;
      padding: 18px 22px;
      border-right: 1px solid var(--line);
    }

    .cell-identity .identity-row {
      grid-template-columns: 96px minmax(0, 1fr);
    }

    .cell-status {
      padding: 22px;
    }

    .status-title {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .cell-units {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .cell-unit {
      padding: 14px;
      border: 1px solid #e5e6e3;
      background: #fbfbf9;
      box-shadow: 0 8px 18px rgba(23, 25, 26, 0.045), inset 0 1px 0 var(--white);
    }

    .cell-unit h4 {
      margin: 0 0 11px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
    }

    .cell-unit h4::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 4px var(--orange-soft);
    }

    .cell-status-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .metric {
      min-height: 76px;
      padding: 13px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #e8e9e6;
      background: #f7f7f4;
      transition: border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
    }

    .metric:hover {
      border-color: rgba(243, 102, 31, 0.35);
      box-shadow: 0 12px 24px rgba(23, 25, 26, 0.08);
      transform: translateY(-2px);
    }

    .metric-label {
      color: var(--muted);
      font-size: 11px;
    }

    .metric-value {
      overflow-wrap: anywhere;
      font: 750 14px ui-monospace, SFMono-Regular, Consolas, monospace;
    }

    .records-wrap {
      min-height: 0;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      overflow: auto;
      border: 1px solid var(--line);
      padding: 9px 12px 12px;
      background:
        linear-gradient(180deg, #fbfaf6, #f4f2ec),
        radial-gradient(circle at 100% 0, rgba(243, 102, 31, 0.08), transparent 10rem);
      box-shadow:
        0 14px 30px rgba(23, 25, 26, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .records-summary {
      min-height: 58px;
      margin: 0 0 12px;
      padding: 0;
      flex: 0 0 auto;
    }

    .records-summary-item {
      min-height: 58px;
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border: 1px solid rgba(243, 102, 31, 0.2);
      border-left: 3px solid var(--orange);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 244, 232, 0.7)),
        radial-gradient(circle at 100% 0, rgba(243, 102, 31, 0.1), transparent 10rem);
      box-shadow:
        0 9px 22px rgba(23, 25, 26, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .records-summary-item dt {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .records-summary-item dd {
      margin: 0;
      font: 800 18px ui-monospace, SFMono-Regular, Consolas, monospace;
      letter-spacing: -0.02em;
    }

    .records-table {
      width: 100%;
      flex: 0 0 auto;
      border-collapse: separate;
      border-spacing: 0 7px;
      font-size: 12px;
    }

    .records-table th,
    .records-table td {
      padding: 0 18px;
      text-align: left;
    }

    .records-table th {
      height: 34px;
      color: #874116;
      border-top: 1px solid rgba(243, 102, 31, 0.22);
      border-bottom: 1px solid rgba(243, 102, 31, 0.22);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 236, 224, 0.68)),
        linear-gradient(90deg, rgba(243, 102, 31, 0.18), rgba(255, 255, 255, 0.55));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 8px 16px rgba(243, 102, 31, 0.08);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .records-table th:first-child {
      border-left: 1px solid rgba(243, 102, 31, 0.22);
      border-radius: 999px 0 0 999px;
      padding-left: 22px;
    }

    .records-table th:last-child {
      border-right: 1px solid rgba(243, 102, 31, 0.22);
      border-radius: 0 999px 999px 0;
    }

    .records-table td {
      height: 48px;
      border-top: 1px solid rgba(23, 25, 26, 0.055);
      border-bottom: 1px solid rgba(23, 25, 26, 0.055);
      background: rgba(255, 255, 255, 0.72);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
      font-weight: 650;
    }

    .records-table td:first-child {
      border-left: 1px solid rgba(23, 25, 26, 0.055);
      border-radius: 13px 0 0 13px;
      color: var(--graphite);
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    }

    .records-table td:last-child {
      border-right: 1px solid rgba(23, 25, 26, 0.055);
      border-radius: 0 13px 13px 0;
    }

    .records-table tbody tr:last-child td {
      border-bottom: 1px solid rgba(23, 25, 26, 0.055);
    }

    .record-status {
      color: var(--danger);
      font-weight: 700;
    }

    .empty-state {
      flex: 1 1 220px;
      min-height: 220px;
      padding: 26px 24px 22px;
      display: grid;
      place-items: center;
      text-align: center;
    }

    .empty-state[hidden] {
      display: none;
    }

    .empty-visual {
      position: relative;
      width: 88px;
      height: 88px;
      margin: 0 auto 22px;
      display: grid;
      place-items: center;
      border: 1px solid #e3e4e1;
      border-radius: 50%;
      color: var(--orange);
      background: #f8f8f5;
      box-shadow: inset 0 0 0 10px var(--white);
    }

    .empty-visual svg {
      width: 34px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .empty-state h3 {
      margin: 0;
      font-size: 18px;
    }

    .empty-state p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    @media (max-width: 920px) {
      .overview-grid {
        grid-template-columns: 1fr;
      }

      .cell-layout {
        grid-template-columns: 1fr;
      }

      .cell-identity {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .cell-units {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      html,
      body {
        height: auto;
        min-height: 100%;
        overflow: auto;
      }

      .page-shell {
        width: calc(100% - 28px);
      }

      .header-inner {
        min-height: 76px;
      }

      .header-title {
        gap: 6px;
      }

      .header-title h1 {
        font-size: 20px;
      }

      .header-title p {
        max-width: 190px;
        font-size: 10px;
      }

      .header-actions {
        gap: 12px;
      }

      .header-actions .button {
        min-height: 38px;
        padding: 0 14px;
      }

      .connection-state span:last-child {
        display: none;
      }

      .main-content {
        height: auto;
        padding: 24px 0 40px;
      }

      .main-content > .page-shell,
      .device-panel {
        height: auto;
      }

      .tabs {
        min-height: 50px;
        padding: 7px 12px;
        gap: 8px;
      }

      .tab-panel {
        padding: 16px 14px;
        overflow: visible;
      }

      .details-columns {
        grid-template-columns: 1fr;
      }

      .identity-card {
        min-height: 400px;
      }

      .cells-card {
        min-height: 290px;
      }

      .records-wrap {
        min-height: 360px;
      }

      #records-panel .section-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
      }

      .identity-row {
        min-height: 62px;
        grid-template-columns: 118px minmax(0, 1fr);
      }

      .battery-body {
        grid-template-columns: 122px minmax(0, 1fr);
        gap: 20px;
      }

      .battery-gauge {
        width: 122px;
        height: 122px;
      }

      .gauge-value {
        font-size: 29px;
      }

      .cell-status-grid {
        grid-template-columns: 1fr;
      }

      .metric {
        min-height: 76px;
      }

      .records-wrap {
        overflow-x: auto;
      }

      .records-table {
        min-width: 760px;
      }

    }

    @media (max-width: 440px) {
      .header-inner {
        padding: 13px 0 16px;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 16px;
      }

      .header-title,
      .header-actions {
        width: 100%;
      }

      .header-title p {
        max-width: none;
      }

      .header-actions {
        justify-content: space-between;
      }

      .connection-state span:last-child {
        display: inline;
      }

      .battery-summary {
        grid-template-columns: 1fr;
        flex-basis: auto;
      }

      .battery-summary-item {
        min-height: 86px;
      }

      .cell-table {
        overflow-x: auto;
      }

      .cell-table-row {
        min-width: 500px;
      }

      .battery-body {
        grid-template-columns: 1fr;
        justify-items: center;
      }

      .battery-facts {
        width: 100%;
      }

      .identity-row,
      .cell-identity .identity-row {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 15px 0;
      }

      .identity-row dd {
        text-align: left;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }