:root {
      --canvas: #fffbf4;
      --white: #ffffff;
      --yellow: #fed629;
      --yellow-soft: #fff2be;
      --ink: #291f18;
      --muted: #6c6158;
      --accent-orange: #ea6500;
      --accent-orange-fill: #ef8225;
      --rail-slot-bg: #ffffff;
      --rail-slot-active-bg: #fff2be;
      --shadow-card: 0px 0px 4px rgba(0, 0, 0, 0.25);
      --font: "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
      --font-ui: Inter, "Noto Sans SC", system-ui, sans-serif;
      /* Desktop-3 · Group 309（Figma 506-4302） */
      --rail-edge: 0px;
      --rail-w: 56px;
      --rail-total: calc(var(--rail-edge) + var(--rail-w));
      --rail-inset-x: 8px;
      --rail-icon-inset: 16px;
      --rail-top-pad: 96px;
      --rail-btn: 40px;
      --rail-slot-gap: 10px;
      --topbar-h: 80px;
      --desk-pad-left: 16px;
      --apps-content-max: 1352px;
      --status-confirmed-bg: #dbfce7;
      --status-confirmed-text: #00a63e;
      --status-pending-bg: #fef9c2;
      --status-pending-text: #a65f00;
      --status-done-bg: #cfd7e2;
      --status-done-text: #1447e6;
      --reject-stroke: #e7000b;
      --reject-text: #ff5050;
    }

    * {
      box-sizing: border-box;
    }

    html {
      height: 100%;
      overflow: hidden;
    }

    body {
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
      background: #e8e4dc;
      font-family: var(--font);
      color: var(--ink);
    }

    .figma-icon {
      display: block;
      flex-shrink: 0;
      object-fit: contain;
    }

    .figma-icon--16 {
      width: 16px;
      height: 16px;
    }

    .figma-icon--20 {
      width: 20px;
      height: 20px;
    }

    .figma-icon--24 {
      width: 24px;
      height: 24px;
    }

    .figma-icon--32 {
      width: 32px;
      height: 32px;
    }

    .figma-icon--36 {
      width: 36px;
      height: 36px;
    }

    .app-shell {
      margin-left: var(--rail-total);
      min-width: 0;
      height: 100vh;
      height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
      background: var(--canvas);
    }

    .topbar {
      min-width: 0;
      height: var(--topbar-h);
      min-height: var(--topbar-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid var(--yellow);
      background: var(--white);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
    }

    .brand__lockup {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .brand__text {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand__title {
      font-weight: 600;
      font-size: 28px;
      line-height: 28px;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand__sub {
      font-size: 14px;
      line-height: 28px;
      font-weight: 400;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .topbar__actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      border: none;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      display: grid;
      place-items: center;
      padding: 0;
    }

    .workspace {
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .apps-scroll {
      flex: 1;
      min-height: 0;
      overflow: auto;
      padding: 16px var(--desk-pad-left) 32px var(--desk-pad-left);
    }

    .apps-canvas {
      width: 100%;
      max-width: var(--apps-content-max);
      margin: 0 auto;
    }

    /* 统计卡片 323×168，间距 20（Figma 72/415/758/1101） */
    .apps-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
    }

    .apps-stat {
      flex: 1 1 280px;
      max-width: 323px;
      min-height: 168px;
      background: var(--white);
      border-radius: 32px;
      box-shadow: var(--shadow-card);
      display: grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: auto minmax(48px, 1fr);
      column-gap: 12px;
      row-gap: 8px;
      padding: 20px 20px 16px;
      align-items: start;
    }

    .apps-stat__icon-wrap {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent-orange);
      display: grid;
      place-items: center;
      grid-column: 1;
      grid-row: 1;
    }

    .apps-stat__icon-wrap .figma-icon--24 {
      width: 24px;
      height: 24px;
    }

    .apps-stat__label {
      margin: 0;
      font-weight: 600;
      font-size: 20px;
      line-height: 20px;
      color: #000;
      grid-column: 2;
      grid-row: 1;
      align-self: center;
    }

    .apps-stat__num {
      grid-column: 1 / -1;
      grid-row: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 48px;
      line-height: 1;
      color: #000;
      min-height: 72px;
    }

    /* 搜索行 + 下拉（Figma y=294 / 296） */
    .apps-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px 24px;
      margin-bottom: 16px;
    }

    .apps-search {
      position: relative;
      flex: 1 1 320px;
      max-width: 638px;
      min-width: 200px;
    }

    .apps-search__field {
      width: 100%;
      height: 42px;
      border: 2px solid var(--accent-orange);
      border-radius: 44px;
      background: var(--white);
      padding: 0 52px 0 24px;
      font-family: var(--font);
      font-size: 12px;
      line-height: 20px;
      color: var(--ink);
      outline: none;
    }

    .apps-search__field::placeholder {
      color: var(--muted);
    }

    .apps-search__icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      pointer-events: none;
    }

    /* 全部医院 / 全部状态：橙色胶囊触发器 + 自定义下拉（对齐日程页周选择器） */
    .apps-filter {
      position: relative;
      flex-shrink: 0;
    }

    .apps-filter--narrow .apps-filter__menu {
      min-width: 140px;
    }

    .apps-select-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 36px 6px 14px;
      border: 1px solid #ea6500;
      border-radius: 51px;
      background: #ef8225;
      color: #ffffff;
      font-family: var(--font);
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      cursor: pointer;
    }

    .apps-filter__trigger {
      margin: 0;
      text-align: left;
    }

    .apps-filter__trigger:focus-visible {
      outline: 2px solid var(--yellow);
      outline-offset: 2px;
    }

    .apps-select-wrap--narrow {
      border-radius: 38px;
    }

    .apps-select-wrap__icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 1;
    }

    .apps-select-wrap .figma-icon--24 {
      filter: none;
      pointer-events: none;
    }

    .apps-filter__label {
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      padding: 4px 0;
    }

    .apps-select-wrap .apps-select-chevron {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      transition: transform 0.15s ease;
    }

    .apps-filter--open .apps-select-chevron {
      transform: translateY(-50%) rotate(180deg);
    }

    .apps-filter__menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 50;
      min-width: 100%;
      max-height: 280px;
      overflow-y: auto;
      margin: 0;
      padding: 8px;
      border-radius: 16px;
      border: 1px solid var(--yellow);
      background: var(--white);
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .apps-filter__menu[hidden] {
      display: none;
    }

    .apps-filter__option {
      width: 100%;
      padding: 8px 14px;
      border: 1px solid transparent;
      border-radius: 25px;
      background: var(--white);
      color: var(--ink);
      font-family: var(--font);
      font-size: 14px;
      line-height: 18px;
      font-weight: 400;
      text-align: left;
      cursor: pointer;
    }

    .apps-filter__option:hover {
      background: var(--yellow-soft);
      border-color: rgba(234, 101, 0, 0.35);
    }

    .apps-filter__option--active {
      background: var(--accent-orange-fill);
      border-color: #ea6500;
      color: #ffffff;
      font-weight: 600;
    }

    .apps-filter__option:focus-visible {
      outline: 2px solid var(--yellow);
      outline-offset: 1px;
    }

    /* 分段：全部 / 待处理…（Figma Group 301） */
    .apps-segments {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      padding: 4px;
      margin-bottom: 16px;
      background: var(--white);
      border-radius: 44px;
      box-shadow: var(--shadow-card);
    }

    .apps-seg {
      position: relative;
      border: none;
      background: transparent;
      border-radius: 44px;
      padding: 5px 14px;
      font-family: var(--font);
      font-size: 16px;
      line-height: 20px;
      font-weight: 400;
      color: var(--ink);
      cursor: pointer;
      min-width: 60px;
    }

    /* 「待处理」与角标 4px 间距，其后分段整体右移 */
    .apps-seg[data-status-filter="pending"] {
      margin-right: 16px;
    }

    .apps-seg__inner {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .apps-seg__txt {
      flex-shrink: 0;
    }

    .apps-seg--active {
      background: var(--yellow);
      font-weight: 400;
    }

    .apps-seg__badge {
      position: static;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--yellow);
      font-size: 11px;
      line-height: 1;
      font-weight: 600;
      color: var(--ink);
      flex-shrink: 0;
    }

    .apps-seg--active .apps-seg__badge {
      background: #fee783;
    }

    /* 预约卡片（Figma Frame 293 等，圆角 32） */
    .apps-cards {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .app-card {
      position: relative;
      width: 100%;
      max-width: var(--apps-content-max);
      min-height: 329px;
      background: var(--white);
      border-radius: 32px;
      box-shadow: var(--shadow-card);
      overflow: hidden;
    }

    .app-card__head {
      position: relative;
      min-height: 120px;
      background: var(--yellow);
      padding: 17px 20px 16px;
      display: grid;
      grid-template-columns: 68px 1fr;
      column-gap: 16px;
      align-items: start;
    }

    .app-card__avatar {
      grid-column: 1;
      grid-row: 1;
      width: 68px;
      height: 68px;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      align-self: start;
    }

    .app-card__head-main {
      grid-column: 2;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .app-card__head-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 12px;
      min-width: 0;
    }

    .app-card__patient {
      font-weight: 600;
      font-size: 20px;
      line-height: 28px;
      color: var(--ink);
      margin: 0;
    }

    .app-card__head-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      line-height: 22px;
      color: var(--muted);
      min-height: 24px;
    }

    .app-card__head-row .app-card__v {
      font-weight: 500;
      color: var(--ink);
    }

    .app-card__status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 10px;
      min-height: 32px;
      border-radius: 27px;
      font-size: 16px;
      line-height: 22px;
      font-weight: 400;
      flex-shrink: 0;
    }

    .app-card__status--confirmed {
      background: var(--status-confirmed-bg);
      color: var(--status-confirmed-text);
    }

    .app-card__status--pending {
      background: var(--status-pending-bg);
      color: var(--status-pending-text);
    }

    .app-card__status--done {
      background: var(--status-done-bg);
      color: var(--status-done-text);
    }

    .app-card__status--cancelled {
      background: #e8e4dc;
      color: #6c6158;
      border: 1px solid #bfb7af;
    }

    .app-card__body {
      padding: 16px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .app-card__row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      line-height: 22px;
      color: var(--muted);
      min-height: 24px;
    }

    .app-card__row strong,
    .app-card__row .app-card__v {
      font-weight: 500;
      color: var(--ink);
    }

    .app-card__row .app-card__v {
      font-weight: 500;
    }

    .app-card__note {
      margin-top: 4px;
      padding: 13px 16px;
      background: var(--yellow-soft);
      border-radius: 32px;
      font-size: 16px;
      line-height: 22px;
      color: var(--muted);
    }

    .app-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
    }

    .app-card__footer--center-actions {
      justify-content: center;
    }

    .app-card__footer--center-actions .app-card__actions {
      justify-content: center;
      width: 100%;
    }

    .app-card__footer--empty {
      display: none;
    }

    .app-card__worklist {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      line-height: 22px;
      color: var(--muted);
    }

    .app-card__link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      border: 1px solid var(--accent-orange);
      border-radius: 26px;
      background: transparent;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: var(--ink);
      cursor: pointer;
      text-decoration: none;
    }

    .app-card__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .app-card__btn-confirm {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      box-sizing: border-box;
      min-height: 44px;
      padding: 10px 40px;
      border: 1px solid var(--accent-orange);
      border-radius: 42px;
      background: var(--accent-orange-fill);
      font-family: var(--font);
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      color: var(--white);
      cursor: pointer;
    }

    .app-card__btn-confirm .figma-icon--36 {
      filter: brightness(0) invert(1);
    }

    .app-card__btn-reject {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-sizing: border-box;
      min-height: 44px;
      padding: 10px 24px;
      border: 1px solid var(--reject-stroke);
      border-radius: 42px;
      background: transparent;
      font-family: var(--font);
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;
      color: var(--reject-text);
      cursor: pointer;
    }

    .app-card__btn-reject .figma-icon--16 {
      width: 20px;
      height: 20px;
    }

    .app-card__overlay {
      position: absolute;
      inset: 0;
      border-radius: 32px;
      background: rgba(217, 217, 217, 0.61);
      pointer-events: none;
      z-index: 2;
    }

    /* 黄区与「已完成」气泡不被蒙层盖住，白区保持变灰 */
    .app-card--dimmed .app-card__head {
      position: relative;
      z-index: 3;
    }

    .app-card--dimmed .app-card__body {
      position: relative;
      z-index: 1;
    }

    .app-card--hidden {
      display: none !important;
    }

    .apps-empty {
      display: none;
      text-align: center;
      padding: 48px 16px;
      font-size: 16px;
      color: var(--muted);
    }

    .apps-empty--visible {
      display: block;
    }

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

    @media (max-width: 1100px) {
      .app-card__btn-confirm,
      .app-card__btn-reject {
        padding: 10px 24px;
        flex: 1 1 auto;
      }
    }