:root {

      color-scheme: light dark;

      --content-large: 980px;

      --card-large: 468px;

      --page: #ffffff;

      --nav: rgba(255, 255, 255, 0.88);

      --glass: rgba(246, 247, 249, 0.92);

      --glass-border: rgba(0, 0, 0, 0.08);

      --text: #1d1d1f;

      --secondary: #4f5358;

      --tertiary: #6e7379;

      --accent: #0071e3;

      --accent-hover: #147ce5;

      --shadow: rgba(0, 0, 0, 0.12);

      --soft-shadow: rgba(0, 0, 0, 0.10);

      --header-border: rgba(0, 0, 0, 0.08);

      --tab-platter: rgba(232, 234, 237, 0.96);

      --tab-border: rgba(0, 0, 0, 0.09);

      --tab-text: rgba(29, 29, 31, 0.68);

      --tab-active-bg: #ffffff;

      --tab-active-text: #111113;

      --tab-shadow: rgba(0, 0, 0, 0.12);

      --card-bg-start: rgba(246, 247, 249, 0.98);

      --card-bg-end: rgba(238, 240, 243, 0.94);

      --card-hover-start: rgba(250, 251, 252, 1);

      --card-hover-end: rgba(241, 243, 246, 0.98);

      --card-glow: rgba(255, 255, 255, 0.78);

      --card-inset: rgba(255, 255, 255, 0.88);

      --meta-border: rgba(0, 0, 0, 0.07);

      --meta-separator: rgba(0, 0, 0, 0.22);

      --status-pending: #c42121;

      --status-processing: #0066cc;

      --status-completed: #17823b;

      --status-repaired: #8a6500;

      --status-other: #6e7379;

      --active-index: 0;

      font-family:

        -apple-system,

        BlinkMacSystemFont,

        "SF Pro TC",

        "SF Pro Display",

        "SF Pro Text",

        "PingFang TC",

        "Noto Sans TC",

        "Segoe UI",

        sans-serif;

    }

    @media (prefers-color-scheme: dark) {

      :root {

        --page: rgb(28, 28, 31);

        --nav: rgba(29, 29, 31, 0.86);

        --glass: rgba(255, 255, 255, 0.13);

        --glass-border: rgba(255, 255, 255, 0.18);

        --text: rgb(245, 245, 247);

        --secondary: #b8b8bd;

        --tertiary: #a1a1a6;

        --accent: #2997ff;

        --accent-hover: #46a6ff;

        --shadow: rgba(0, 0, 0, 0.38);

        --soft-shadow: rgba(0, 0, 0, 0.28);

        --header-border: rgba(255, 255, 255, 0.08);

        --tab-platter: rgba(51, 51, 54, 0.9);

        --tab-border: rgba(255, 255, 255, 0.13);

        --tab-text: rgba(245, 245, 247, 0.72);

        --tab-active-bg: rgb(245, 245, 247);

        --tab-active-text: rgb(29, 29, 31);

        --tab-shadow: rgba(0, 0, 0, 0.28);

        --card-bg-start: rgba(255, 255, 255, 0.19);

        --card-bg-end: rgba(255, 255, 255, 0.12);

        --card-hover-start: rgba(255, 255, 255, 0.23);

        --card-hover-end: rgba(255, 255, 255, 0.14);

        --card-glow: rgba(255, 255, 255, 0.16);

        --card-inset: rgba(255, 255, 255, 0.22);

        --meta-border: rgba(255, 255, 255, 0.07);

        --meta-separator: rgba(255, 255, 255, 0.26);

        --status-pending: #ff6961;

        --status-processing: #2997ff;

        --status-completed: #30d158;

        --status-repaired: #ffd60a;

        --status-other: #b8b8bd;

      }

    }

    * {

      box-sizing: border-box;

      -webkit-tap-highlight-color: transparent;

    }

    html,

    body {

      margin: 0;

      min-height: 100%;

      background: var(--page);

      color: var(--text);

    }

    body {

      overflow-x: hidden;

      font-family: inherit;

      -webkit-font-smoothing: antialiased;

      text-rendering: optimizeLegibility;

    }

    .app {

      min-height: 100%;

      background: var(--page);

    }

    .section-content {

      width: var(--content-large);

      max-width: 100%;

      margin-inline: auto;

    }

    .fixed-header {

      position: sticky;

      top: 0;

      z-index: 50;

      padding-top: max(0.75rem, env(safe-area-inset-top));

      background: var(--nav);

      backdrop-filter: blur(30px) saturate(180%);

      -webkit-backdrop-filter: blur(30px) saturate(180%);

      box-shadow: 0 1px 0 var(--header-border);

    }

    .hero {

      padding: 34px 0 26px;

      text-align: center;

      animation: heroIn 720ms cubic-bezier(.2, .8, .2, 1) both;

    }

    .brandline {

      margin: 0;

      color: var(--accent);

      font-size: 17px;

      line-height: 1.47;

      font-weight: 600;

      letter-spacing: 0;

      margin-bottom: 14px;

    }

    h1 {

      margin: 0;

      color: var(--text);

      font-size: clamp(68px, 8vw, 96px);

      line-height: .95;

      font-weight: 700;

      letter-spacing: 0;

    }

    .date {

      margin-top: 20px;

      color: var(--secondary);

      font-size: 21px;

      line-height: 1.38;

      font-weight: 400;

    }

    .nav-wrap {

      padding: 0 0 10px;

    }

    .tab-platter {

      position: relative;

      width: min(100%, 35rem);

      height: 46px;

      margin-inline: auto;

      padding: 4px;

      border: 1px solid var(--tab-border);

      border-radius: 999px;

      background: var(--tab-platter);

      box-shadow:

        0 14px 36px var(--soft-shadow),

        inset 0 1px var(--card-inset);

      overflow: hidden;

      -webkit-mask-image: -webkit-radial-gradient(white, black);

      backdrop-filter: blur(22px) saturate(170%);

      -webkit-backdrop-filter: blur(22px) saturate(170%);

    }

    .tab-indicator {

      position: absolute;

      top: 4px;

      left: 4px;

      height: calc(100% - 8px);

      width: calc((100% - 8px) / 5);

      border-radius: 999px;

      background: var(--tab-active-bg);

      box-shadow:

        0 6px 14px var(--tab-shadow),

        inset 0 1px var(--card-inset);

      will-change: transform, width;

      transform: translate3d(calc(var(--active-index) * 100%), 0, 0);

      transition: transform 360ms cubic-bezier(.2, .8, .2, 1);

    }

    .tabs {

      position: relative;

      z-index: 1;

      display: flex;

      height: 100%;

      gap: 0;

    }

    .tab {

      flex: 1 1 0;

      min-width: 0;

      border: 0;

      border-radius: 999px;

      padding: 0 4px;

      background: transparent;

      color: var(--tab-text);

      font: inherit;

      font-size: 14px;

      line-height: 1;

      font-weight: 500;

      letter-spacing: 0;

      white-space: nowrap;

      cursor: pointer;

      transition:

        color 220ms ease,

        transform 180ms cubic-bezier(.2, .8, .2, 1);

    }

    .tab.active {

      color: var(--tab-active-text);

    }

    .tab:active {

      transform: scale(0.97);

    }

    .viewport {

      position: relative;

      background: var(--page);

    }

    .scroll-container {

      display: flex;

      width: 100%;

      overflow-x: auto;

      overflow-y: hidden;

      scroll-snap-type: x mandatory;

      scrollbar-width: none;

      scroll-behavior: auto;

      -webkit-overflow-scrolling: touch;

      overscroll-behavior-x: contain;

      background: var(--page);

    }

    .scroll-container::-webkit-scrollbar {

      display: none;

    }

    .scroll-container > .section-content {

      flex: 0 0 100%;

      width: 100%;

      max-width: none;

      scroll-snap-align: start;

      scroll-snap-stop: always;

      padding-top: 24px;

      padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;

    }

    .list {

      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 16px;

      width: var(--content-large);

      max-width: 100%;

      margin: 0 auto;

      padding: 0 0 28px;

      list-style: none;

    }

    .item {

      position: relative;

      width: min(100%, var(--card-large));

      padding: 16px 20px;

      border: 1px solid var(--glass-border);

      border-radius: 22px;

      background:

        linear-gradient(

          180deg,

          var(--card-bg-start),

          var(--card-bg-end)

        );

      box-shadow:

        0 14px 34px var(--shadow),

        inset 0 1px var(--card-inset);

      backdrop-filter: blur(36px) saturate(170%);

      -webkit-backdrop-filter: blur(36px) saturate(170%);

      overflow: hidden;

      text-align: left;

      animation: cardIn 280ms cubic-bezier(.2, .8, .2, 1) both;

      transition:

        transform 200ms cubic-bezier(.2, .8, .2, 1),

        background 200ms ease,

        border-color 200ms ease;

    }

    .item::before {

      position: absolute;

      inset: -1px;

      border-radius: inherit;

      background:

        radial-gradient(

          18rem 8rem at 50% -26%,

          var(--card-glow),

          transparent 72%

        );

      pointer-events: none;

      content: "";

    }

    .item:hover {

      transform: translateY(-1px);

      background:

        linear-gradient(

          180deg,

          var(--card-hover-start),

          var(--card-hover-end)

        );

    }

    .card-top {

      position: relative;

      display: flex;

      justify-content: space-between;

      align-items: flex-start;

      gap: 12px;

    }

    .card-main {

      flex: 1;

      min-width: 0;

    }

    .title-row {

      display: flex;

      align-items: baseline;

      gap: 10px;

      flex-wrap: wrap;

    }

    @keyframes heroIn {

      from {

        opacity: 0;

        transform: translateY(18px);

      }

      to {

        opacity: 1;

        transform: translateY(0);

      }

    }

    @keyframes cardIn {

      from {

        opacity: 0;

        transform: translateY(8px) scale(0.992);

      }

      to {

        opacity: 1;

        transform: translateY(0) scale(1);

      }

    }

    .case-id {

      position: relative;

      margin-bottom: 4px;

      color: var(--tertiary);

      font-size: 13px;

      line-height: 1.38;

      font-weight: 500;

      letter-spacing: 0;

    }

    .room {

      position: relative;

      display: inline-block;

      margin: 0;

      color: var(--text);

      font-size: 30px;

      line-height: 1.1;

      font-weight: 700;

      letter-spacing: 0;

      white-space: normal;

    }

    .description {

      position: relative;

      display: inline;

      margin: 0;

      color: var(--text);

      font-size: 16px;

      line-height: 1.35;

      font-weight: 500;

      letter-spacing: 0;

      overflow-wrap: anywhere;

    }

    .status-line {

      position: relative;

      flex-shrink: 0;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      margin: 0;

      padding: 4px 10px;

      border-radius: 6px;

      background: color-mix(in srgb, currentColor 12%, transparent);

      font-size: 12px;

      line-height: 1.2;

      font-weight: 600;

      white-space: nowrap;

    }

    .status-pending { color: var(--status-pending); }

    .status-processing { color: var(--status-processing); }

    .status-completed { color: var(--status-completed); }

    .status-repaired { color: var(--status-repaired); }

    .status-other { color: var(--status-other); }

    .meta {

      position: relative;

      display: flex;

      flex-direction: row;

      align-items: center;

      justify-content: flex-start;

      gap: 12px;

      width: 100%;

      margin-top: 12px;

      padding-top: 8px;

      border-top: 1px solid var(--meta-border);

      color: var(--secondary);

      font-size: 13px;

      line-height: 1.35;

      font-weight: 400;

      white-space: nowrap;

      overflow-x: auto;

      scrollbar-width: none;

    }

    .meta::-webkit-scrollbar {

      display: none;

    }

    .meta-separator {

      color: var(--meta-separator);

    }

    .load-more-wrap {

      display: flex;

      justify-content: center;

      width: 100%;

      padding: 4px 0 32px;

    }

    .load-more {

      min-height: 36px;

      border: 1px solid var(--glass-border);

      border-radius: 999px;

      padding: 8px 16px;

      background: var(--glass);

      color: var(--text);

      font: inherit;

      font-size: 14px;

      cursor: pointer;

      backdrop-filter: blur(18px);

      -webkit-backdrop-filter: blur(18px);

    }

    .empty,

    .loading,

    .error {

      display: block;

      width: var(--content-large);

      max-width: 100%;

      margin: 0 auto;

      padding: 8px 0;

      color: var(--secondary);

      font-size: 14px;

      line-height: 1.42;

      text-align: center;

      animation: cardIn 240ms cubic-bezier(.2, .8, .2, 1) both;

    }

    .error {

      color: var(--status-pending);

    }

    @media (min-width: 735px) and (max-width: 1023px) {

      :root {

        --content-large: 720px;

        --card-large: 520px;

      }

      .section-content {

        width: min(100% - 64px, var(--content-large));

      }

      .fixed-header {

        padding-top: max(0.75rem, env(safe-area-inset-top));

      }

      .hero {

        padding: 42px 0 28px;

      }

      .brandline {

        font-size: 15px;

        line-height: 1.45;

        margin-bottom: 12px;

      }

      h1 {

        font-size: 56px;

        line-height: 1;

      }

      .date {

        margin-top: 16px;

        font-size: 18px;

      }

      .nav-wrap {

        padding: 0 32px 10px;

      }

      .tab-platter {

        width: min(100%, 34rem);

      }

      .scroll-container > .section-content {

        flex: 0 0 100vw;

        width: 100vw;

        padding-top: 22px;

        padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;

      }

      .list {

        width: min(100% - 64px, var(--content-large));

        gap: 15px;

        padding-bottom: 44px;

      }

      .item {

        width: min(100%, var(--card-large));

      }

      .empty,

      .loading,

      .error {

        width: min(100% - 64px, var(--card-large));

      }

    }

    @media (max-width: 734px) {

      html,

      body {

        min-width: 100vw;

        min-height: 100dvh;

      }

      body {

        width: 100vw;

        overflow-x: hidden;

      }

      .app {

        width: 100vw;

        min-height: 100dvh;

      }

      .section-content {

        width: 100%;

      }

      .fixed-header {

        padding-top: max(0.5rem, env(safe-area-inset-top));

      }

      .hero {

        width: 100%;

        padding: 26px 16px 18px;

        text-align: left;

      }

      .brandline {

        margin-bottom: 10px;

        font-size: 12px;

        line-height: 1.4;

        font-weight: 600;

      }

      h1 {

        font-size: 34px;

        line-height: 1.08;

      }

      .date {

        margin-top: 12px;

        font-size: 15px;

        line-height: 1.35;

      }

      .nav-wrap {

        position: relative;

        padding: 0 0 8px;

      }

      .nav-wrap::before,

      .nav-wrap::after {

        position: absolute;

        top: 0;

        bottom: 8px;

        z-index: 3;

        width: 28px;

        pointer-events: none;

        content: "";

      }

      .nav-wrap::before {

        left: 0;

        background: linear-gradient(90deg, var(--nav), color-mix(in srgb, var(--nav) 0%, transparent));

      }

      .nav-wrap::after {

        right: 0;

        background: linear-gradient(270deg, var(--nav), color-mix(in srgb, var(--nav) 0%, transparent));

      }

      .tab-platter {

        width: 100vw;

        height: 42px;

        margin: 0;

        padding: 0 16px;

        border: 0;

        border-radius: 0;

        background: transparent;

        box-shadow: none;

        overflow-x: auto;

        overflow-y: hidden;

        -webkit-mask-image: none;

        scrollbar-width: none;

      }

      .tab-platter::-webkit-scrollbar {

        display: none;

      }

      .tab-indicator {

        display: none;

      }

      .tabs {

        display: inline-flex;

        width: max-content;

        min-width: 100%;

        height: 42px;

        gap: 8px;

        padding: 3px 0;

      }

      .tab {

        flex: 0 0 auto;

        min-width: 86px;

        padding: 0 14px;

        border-radius: 999px;

        background: var(--glass);

        color: var(--tab-text);

        font-size: 13px;

      }

      .tab.active {

        background: var(--tab-active-bg);

        color: var(--tab-active-text);

        box-shadow: 0 6px 14px var(--tab-shadow);

      }

      .viewport {

        width: 100vw;

        min-height: 100dvh;

      }

      .scroll-container {

        width: 100vw;

        overflow-x: auto;

        overflow-y: visible;

        scroll-behavior: auto;

      }

      .scroll-container > .section-content {

        flex: 0 0 100vw;

        width: 100vw;

        max-width: 100vw;

        padding: 14px 0 calc(120px + env(safe-area-inset-bottom)) !important;

      }

      .list {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 16px calc(120px + env(safe-area-inset-bottom)) !important;

        gap: 12px !important;

        overflow: visible !important;

        list-style: none;

      }

      .item {

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 15px 16px !important;

        border-radius: 16px !important;

      }

      .card-top {

        gap: 10px;

      }

      .title-row {

        gap: 8px;

      }

      .case-id {

        margin-bottom: 3px;

        font-size: 12px;

      }

      .room {

        font-size: 24px;

        line-height: 1.12;

      }

      .description {

        font-size: 15px;

        line-height: 1.36;

      }

      .status-line {

        padding: 4px 8px;

        font-size: 12px;

      }

      .meta {

        gap: 9px;

        margin-top: 10px;

        padding-top: 7px;

        font-size: 12px;

      }

      .load-more-wrap {

        width: 100%;

        margin: 0;

        padding: 2px 16px 28px;

      }

      .load-more {

        width: 100%;

      }

      .empty,

      .loading,

      .error {

        width: 100%;

        max-width: none;

        padding: 8px 16px;

        text-align: left;

      }

    }

    .refresh-state {

      margin-top: 12px;

      color: var(--tertiary);

      font-size: 12px;

      line-height: 1.35;

      font-weight: 400;

    }

    body.is-refreshing .refresh-state {

      color: var(--accent);

    }

    .tab-scroll {

      position: relative;

      overflow-x: auto;

      overflow-y: hidden;

      scrollbar-width: none;

    }

    .tab-scroll::-webkit-scrollbar {

      display: none;

    }

    .nav-wrap {

      position: relative;

    }

    .nav-wrap::before,

    .nav-wrap::after {

      position: absolute;

      top: 0;

      bottom: 0;

      z-index: 4;

      width: 34px;

      pointer-events: none;

      content: "";

    }

    .nav-wrap::before {

      left: 0;

      background: linear-gradient(90deg, var(--nav), color-mix(in srgb, var(--nav) 0%, transparent));

    }

    .nav-wrap::after {

      right: 0;

      background: linear-gradient(270deg, var(--nav), color-mix(in srgb, var(--nav) 0%, transparent));

    }

    .tab-platter {

      width: min(100%, 36rem);

      height: 42px;

      padding: 0;

      border: 0;

      border-radius: 0;

      background: transparent;

      box-shadow: inset 0 -1px var(--header-border);

      overflow: visible;

      -webkit-mask-image: none;

      backdrop-filter: none;

      -webkit-backdrop-filter: none;

    }

    .tab-indicator {

      display: none;

    }

    .tabs {

      display: flex;

      min-width: 100%;

      height: 42px;

      gap: 0;

    }

    .tab {

      position: relative;

      flex: 1 0 auto;

      min-width: 0;

      padding: 0 18px;

      border-radius: 0;

      background: transparent;

      color: var(--tab-text);

      font-size: 15px;

      line-height: 1.2;

      font-weight: 600;

      transform: none;

      transition:

        color 180ms ease,

        opacity 180ms ease;

    }

    .tab::after {

      position: absolute;

      right: 18px;

      bottom: 0;

      left: 18px;

      height: 2px;

      background: var(--accent);

      opacity: 0;

      transform: scaleX(0.44);

      transform-origin: center;

      transition:

        opacity 220ms ease,

        transform 260ms cubic-bezier(.2, .8, .2, 1);

      content: "";

    }

    .tab.active {

      color: var(--text);

    }

    .tab.active::after {

      opacity: 1;

      transform: scaleX(1);

    }

    .tab:active {

      transform: none;

      opacity: 0.72;

    }

    .scroll-container > .section-content {

      opacity: 0.2;

      transform: translateX(12px);

      transition:

        opacity 260ms ease,

        transform 320ms cubic-bezier(.2, .8, .2, 1);

    }

    :root[data-direction="backward"] .scroll-container > .section-content {

      transform: translateX(-12px);

    }

    .scroll-container > .section-content.active-panel {

      opacity: 1;

      transform: translateX(0);

    }

    .list {

      width: min(100% - 40px, 560px);

      gap: 12px;

      padding-bottom: 40px;

    }

    .item {

      width: 100%;

      max-width: 560px;

      padding: 14px 16px;

      border-radius: 14px;

      box-shadow:

        0 6px 18px color-mix(in srgb, var(--shadow) 58%, transparent),

        inset 0 1px var(--card-inset);

    }

    .item:hover {

      transform: translateY(-0.5px);

    }

    .case-id {

      font-size: 12px;

      line-height: 1.3;

      font-weight: 500;

    }

    .room {

      font-size: 24px;

      line-height: 1.2;

      font-weight: 600;

    }

    .description {

      font-size: 15px;

      line-height: 1.36;

      font-weight: 400;

    }

    .status-line {

      padding: 3px 8px;

      border-radius: 7px;

      font-size: 11px;

      line-height: 1.25;

      font-weight: 600;

    }

    .status-registered { color: var(--status-other); }

    .meta {

      gap: 10px;

      margin-top: 10px;

      padding-top: 7px;

      font-size: 12px;

      line-height: 1.35;

    }

    @media (min-width: 735px) and (max-width: 1023px) {

      .tab-platter {

        width: min(100%, 34rem);

      }

      .list,

      .item {

        max-width: 520px;

      }

    }

    @media (max-width: 734px) {

      .refresh-state {

        margin-top: 10px;

        font-size: 11px;

      }

      .nav-wrap::before,

      .nav-wrap::after {

        bottom: 0;

      }

      .tab-platter {

        width: 100vw;

        height: 40px;

        padding: 0;

        box-shadow: inset 0 -1px var(--header-border);

      }

      .tab-scroll {

        padding: 0 16px;

      }

      .tabs {

        width: max-content;

        min-width: 100%;

        height: 40px;

      }

      .tab {

        min-width: 112px;

        padding: 0 14px;

        font-size: 14px;

      }

      .tab::after {

        right: 14px;

        left: 14px;

      }

      .list {

        width: min(100% - 32px, 430px) !important;

        margin: 0 auto !important;

        padding: 0 0 calc(118px + env(safe-area-inset-bottom)) !important;

        gap: 11px !important;

      }

      .item {

        width: 100% !important;

        max-width: none !important;

        padding: 13px 14px !important;

        border-radius: 14px !important;

      }

      .room {

        font-size: 22px;

      }

      .description {

        font-size: 14px;

      }

      .status-line {

        font-size: 11px;

      }

      .empty,

      .loading,

      .error {

        width: min(100% - 32px, 430px);

        margin: 0 auto;

        padding: 8px 0;

      }

    }

    @media (prefers-reduced-motion: reduce) {

      *,

      *::before,

      *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

      }

    }