:root {
  --blue-800: #086bc6;
  --blue-700: #087fe3;
  --blue-600: #0a91f4;
  --blue-500: #32a6f7;
  --blue-100: #e9f5ff;
  --ink: #17202f;
  --muted: #778397;
  --canvas: #f3f6fa;
  --line: #e8edf3;
  --success: #36ca8b;
  --warning: #ff9d3e;
  --danger: #f35462;
  --shadow: 0 12px 34px rgba(33, 76, 117, 0.11);
  --home-hero-bg:
    radial-gradient(88% 116% at 102% -8%, rgba(71, 190, 238, 0.58) 0%, rgba(71, 190, 238, 0) 58%),
    radial-gradient(82% 105% at -12% -12%, rgba(36, 54, 139, 0.62) 0%, rgba(36, 54, 139, 0) 64%),
    radial-gradient(112% 72% at 52% 108%, rgba(220, 235, 250, 0.98) 0%, rgba(164, 196, 232, 0.56) 46%, rgba(164, 196, 232, 0) 76%),
    linear-gradient(152deg, #2858a8 0%, #3977c7 42%, #7db3e6 72%, #dceafa 100%);
  --home-hero-overlay:
    radial-gradient(72% 42% at 72% 5%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 69%);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: #eaf0f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.prototype-toolbar {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 24px;
  padding: 10px 26px;
  color: #fff;
  background: #0e263e;
  box-shadow: 0 4px 18px rgba(15, 38, 61, 0.2);
}

.prototype-toolbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--blue-600), #58bbff);
  font-weight: 800;
}

.prototype-toolbar b,
.prototype-toolbar small {
  display: block;
}

.prototype-toolbar b {
  font-size: 14px;
}

.prototype-toolbar small {
  margin-top: 2px;
  color: #9fb5c8;
  font-size: 10px;
}

.prototype-toolbar p {
  margin: 0 auto 0 0;
  color: #b8c8d7;
  font-size: 12px;
}

.prototype-toolbar > button {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.prototype-stage {
  display: grid;
  min-height: calc(100vh - 66px);
  padding: 28px 18px 44px;
  place-items: start center;
  background:
    radial-gradient(circle at 20% 8%, rgba(10, 145, 244, 0.13), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(65, 205, 188, 0.1), transparent 28%),
    #eaf0f6;
}

.phone-frame {
  position: relative;
  width: 430px;
  height: 884px;
  overflow: hidden;
  border: 10px solid #152334;
  border-radius: 48px;
  background: var(--canvas);
  box-shadow: 0 30px 80px rgba(19, 43, 67, 0.24);
}

.phone-screen {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 68px;
  background: var(--canvas);
  scrollbar-width: none;
}

.phone-screen::-webkit-scrollbar {
  display: none;
}

.status-bar {
  position: relative;
  z-index: 4;
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 0;
  color: #fff;
  background: var(--blue-700);
  font-size: 10px;
}

.bottom-nav {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  height: 68px;
  padding-bottom: 3px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  grid-template-columns: repeat(3, 1fr);
}

.bottom-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  border: 0;
  color: #929eae;
  background: transparent;
  font-size: 10px;
}

.bottom-nav button svg {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

.bottom-nav button.active {
  color: var(--blue-700);
  font-weight: 700;
}

.app-page {
  min-height: 770px;
}

.home-hero {
  position: relative;
  min-height: 260px;
  padding: 10px 14px 64px;
  color: #fff;
  background:
    radial-gradient(circle at 58% 112%, rgba(255, 255, 255, 0.17), transparent 38%),
    linear-gradient(180deg, #0788ed 0%, #119cf5 74%, #67bdf7 100%);
}

.home-hero::after {
  position: absolute;
  right: -20px;
  bottom: -40px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
  content: "";
}

.home-command {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
}

.city-button,
.notice-button {
  border: 0;
  color: #fff;
  background: transparent;
}

.city-button {
  padding: 9px 2px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.city-button i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0 3px 6px;
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.search-button {
  display: flex;
  height: 42px;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 0;
  border-radius: 24px;
  color: #a4acb7;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 73, 143, 0.08);
  font-size: 12px;
  text-align: left;
}

.search-button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.notice-button {
  position: relative;
  display: grid;
  width: 34px;
  height: 40px;
  place-items: center;
}

.notice-button svg {
  width: 25px;
  height: 25px;
}

.notice-button b {
  position: absolute;
  top: -2px;
  right: -4px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 2px solid var(--blue-700);
  border-radius: 50%;
  color: #fff;
  background: #ef3340;
  font-size: 9px;
}

.identity-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  margin-top: 21px;
  grid-template-columns: 1fr 1fr;
}

.identity-card {
  position: relative;
  min-width: 0;
  height: 128px;
  overflow: hidden;
  padding: 14px 13px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  color: #fff;
  background: rgba(20, 146, 238, 0.47);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.06);
  text-align: left;
}

.identity-card::after {
  position: absolute;
  right: -8px;
  bottom: -16px;
  color: rgba(255, 255, 255, 0.09);
  font-size: 83px;
  font-weight: 800;
  line-height: 1;
  content: attr(data-mark);
}

.identity-card header,
.identity-card p {
  position: relative;
  z-index: 1;
}

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

.identity-card header > svg {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
}

.identity-card header span {
  overflow: hidden;
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-card header em {
  flex: 0 0 auto;
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.online-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: #62e4a8;
}

.identity-card p {
  display: grid;
  gap: 5px;
  margin: 14px 0 0;
}

.identity-card p span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
}

.identity-card p b {
  color: #baff42;
  font-size: 12px;
}

.identity-card p strong {
  font-size: 12px;
  font-weight: 600;
}

.home-content {
  position: relative;
  z-index: 5;
  margin-top: -48px;
  padding: 0 13px 24px;
}

.service-panel,
.content-panel {
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.service-panel {
  padding: 19px 11px 14px;
}

.service-grid {
  display: grid;
  row-gap: 21px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.service-grid button {
  min-width: 0;
  padding: 0 3px;
  border: 0;
  color: var(--ink);
  background: transparent;
}

.service-grid button:active .service-icon {
  transform: scale(0.94);
}

.service-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 8px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(150deg, #078df0, #4eb4fb);
  box-shadow: 0 7px 15px rgba(8, 143, 240, 0.19);
  transition: transform 0.15s ease;
}

.service-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}

.service-grid button > span:last-child {
  display: block;
  min-height: 31px;
  font-size: 10px;
  line-height: 1.42;
}

.home-section {
  margin-top: 14px;
  padding: 16px 15px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(35, 74, 109, 0.07);
}

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.section-title b,
.section-title small {
  display: block;
}

.section-title b {
  font-size: 16px;
}

.section-title small {
  margin-top: 3px;
  color: #99a3b0;
  font-size: 9px;
}

.section-title button {
  padding: 5px;
  border: 0;
  color: #6f7d8f;
  background: transparent;
  font-size: 10px;
}

.recommend-tabs {
  display: flex;
  gap: 4px;
  margin: -4px 0 13px;
  border-bottom: 1px solid var(--line);
}

.recommend-tabs button {
  position: relative;
  padding: 7px 9px 9px;
  border: 0;
  color: #727e8d;
  background: transparent;
  font-size: 11px;
}

.recommend-tabs button.active {
  color: var(--blue-700);
  font-weight: 700;
}

.recommend-tabs button.active::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 3px;
  border-radius: 3px;
  background: var(--blue-600);
  content: "";
}

.recommend-grid {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(3, 1fr);
}

.recommend-grid button {
  min-width: 0;
  min-height: 78px;
  padding: 10px;
  border: 1px solid #e8f2fb;
  border-radius: 12px;
  color: var(--ink);
  background: linear-gradient(145deg, #f5faff, #eef7ff);
  text-align: left;
}

.recommend-grid i {
  display: grid;
  width: 26px;
  height: 26px;
  margin-bottom: 7px;
  place-items: center;
  border-radius: 8px;
  color: var(--blue-700);
  background: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.recommend-grid b,
.recommend-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-grid b {
  font-size: 10px;
}

.recommend-grid small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.news-list {
  display: grid;
  gap: 1px;
}

.news-list button {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.news-list button:first-child {
  padding-top: 3px;
  border-top: 0;
}

.news-type {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 10px;
  font-weight: 700;
}

.news-list span:nth-child(2) {
  min-width: 0;
}

.news-list b,
.news-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-list b {
  font-size: 11px;
}

.news-list small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.news-list em {
  color: #a5afbb;
  font-size: 18px;
  font-style: normal;
}

/* 内页 */

.page-header {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  min-height: 60px;
  align-items: center;
  padding: 8px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  box-shadow: 0 4px 14px rgba(0, 94, 177, 0.16);
  grid-template-columns: 38px 1fr 52px;
}

.page-header > button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 24px;
}

.page-header > div {
  min-width: 0;
  text-align: center;
}

.page-header b,
.page-header small {
  display: block;
}

.page-header b {
  font-size: 15px;
}

.page-header small {
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-header .header-action {
  width: auto;
  justify-self: end;
  padding: 0 4px;
  background: transparent;
  font-size: 10px;
}

.page-body {
  padding: 13px 13px 24px;
}

.summary-card {
  position: relative;
  overflow: hidden;
  padding: 17px;
  border-radius: 17px;
  color: #fff;
  background:
    radial-gradient(circle at 94% 16%, rgba(255, 255, 255, 0.18), transparent 26%),
    linear-gradient(135deg, #087cdb, #23a7f5);
  box-shadow: 0 13px 27px rgba(8, 124, 219, 0.19);
}

.summary-card > small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 9px;
}

.summary-card h2 {
  margin: 5px 0 3px;
  font-size: 19px;
}

.summary-card > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
}

.summary-card footer {
  display: flex;
  gap: 9px;
  margin-top: 15px;
}

.summary-card footer span {
  flex: 1;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.13);
}

.summary-card footer small,
.summary-card footer b {
  display: block;
}

.summary-card footer small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 7px;
}

.summary-card footer b {
  margin-top: 3px;
  font-size: 11px;
}

.subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 17px 2px 9px;
}

.subsection-title b {
  font-size: 14px;
}

.subsection-title small {
  color: var(--muted);
  font-size: 9px;
}

.card-list {
  display: grid;
  gap: 9px;
}

.list-card {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 5px 14px rgba(25, 63, 99, 0.045);
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.list-card > i,
.round-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.list-card > i svg {
  width: 23px;
  height: 23px;
}

.list-card > span {
  min-width: 0;
}

.list-card b,
.list-card p,
.list-card small {
  display: block;
  margin: 0;
}

.list-card b {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-card p {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-card small {
  margin-top: 4px;
  color: #9ba5b2;
  font-size: 8px;
}

.list-card em {
  max-width: 72px;
  padding: 4px 7px;
  border-radius: 8px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.list-card em.warning {
  color: #c86a0c;
  background: #fff2e4;
}

.wide-action,
.primary-action {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  box-shadow: 0 8px 18px rgba(8, 128, 227, 0.18);
  font-size: 11px;
  font-weight: 700;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 11px;
  padding: 4px;
  border-radius: 12px;
  background: #e9eef4;
}

.filter-tabs button {
  flex: 1;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  color: #758192;
  background: transparent;
  font-size: 10px;
}

.filter-tabs button.active {
  color: var(--blue-700);
  background: #fff;
  box-shadow: 0 3px 10px rgba(41, 75, 108, 0.08);
  font-weight: 700;
}

.career-timeline {
  display: grid;
  gap: 0;
  padding: 0 2px;
}

.career-item {
  position: relative;
  display: grid;
  gap: 11px;
  padding: 0 0 16px 25px;
  grid-template-columns: 1fr auto;
}

.career-item::before {
  position: absolute;
  top: 6px;
  bottom: -6px;
  left: 7px;
  width: 2px;
  background: #dceaf6;
  content: "";
}

.career-item:last-child::before {
  bottom: 30px;
}

.career-item::after {
  position: absolute;
  top: 4px;
  left: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--blue-600);
  border-radius: 50%;
  background: #fff;
  content: "";
}

.career-item.current::after {
  background: var(--blue-600);
  box-shadow: 0 0 0 4px #dff2ff;
}

.career-item > div {
  min-width: 0;
  padding: 12px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(30, 72, 108, 0.06);
}

.career-item h3 {
  margin: 0;
  font-size: 12px;
}

.career-item p {
  margin: 5px 0 0;
  color: #657286;
  font-size: 9px;
  line-height: 1.5;
}

.career-item small {
  display: block;
  margin-top: 7px;
  color: #98a3b2;
  font-size: 8px;
}

.career-item > em {
  padding-top: 13px;
  color: var(--blue-700);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.job-card,
.market-card,
.training-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(30, 72, 108, 0.05);
}

.job-card header,
.market-card header,
.training-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.job-card header > span,
.market-card header > span,
.training-card header > span {
  min-width: 0;
}

.job-card h3,
.market-card h3,
.training-card h3 {
  margin: 0;
  font-size: 12px;
}

.job-card header p,
.market-card header p,
.training-card header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.match-badge,
.info-badge {
  padding: 5px 7px;
  border-radius: 8px;
  color: #0b9f68;
  background: #e5fbf2;
  font-size: 8px;
  white-space: nowrap;
}

.job-facts,
.market-facts {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  grid-template-columns: repeat(3, 1fr);
}

.job-facts span,
.market-facts span {
  min-width: 0;
  padding: 8px;
  border-radius: 9px;
  background: #f6f8fb;
}

.job-facts small,
.job-facts b,
.market-facts small,
.market-facts b {
  display: block;
}

.job-facts small,
.market-facts small {
  color: #98a3b1;
  font-size: 7px;
}

.job-facts b,
.market-facts b {
  margin-top: 3px;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag-row i {
  padding: 4px 6px;
  border-radius: 7px;
  color: #657286;
  background: #f0f3f7;
  font-size: 7px;
  font-style: normal;
}

.job-card footer,
.training-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.job-card footer b {
  color: #f06c28;
  font-size: 12px;
}

.small-action {
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--blue-700);
  font-size: 9px;
}

.learning-categories {
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr 1fr;
}

.learning-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e2eef8;
  border-radius: 14px;
  color: var(--ink);
  background: linear-gradient(145deg, #fff, #f3f9ff);
  text-align: left;
}

.learning-card > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, var(--blue-700), #58b9fa);
  font-style: normal;
}

.learning-card > i svg {
  width: 20px;
  height: 20px;
}

.learning-card b,
.learning-card small {
  display: block;
}

.learning-card b {
  margin-top: 9px;
  font-size: 11px;
}

.learning-card small {
  height: 28px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.progress-line {
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 4px;
  background: #e4ebf2;
}

.progress-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue-600);
}

.training-card .training-meta {
  display: grid;
  gap: 7px;
  margin: 11px 0;
  grid-template-columns: repeat(3, 1fr);
}

.training-meta span {
  padding: 7px;
  border-radius: 9px;
  background: #f5f8fb;
}

.training-meta small,
.training-meta b {
  display: block;
}

.training-meta small {
  color: #98a3b1;
  font-size: 7px;
}

.training-meta b {
  margin-top: 3px;
  font-size: 8px;
}

.course-tag {
  padding: 4px 7px;
  border-radius: 8px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 8px;
}

.course-tag.required {
  color: #d3660e;
  background: #fff0de;
}

.calculator-card {
  padding: 15px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #126cb8, #0c95e7);
  box-shadow: 0 12px 26px rgba(15, 119, 196, 0.18);
}

.calculator-card h3 {
  margin: 0;
  font-size: 14px;
}

.calculator-card > p {
  margin: 5px 0 13px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
}

.calculator-form {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.calculator-form label {
  display: block;
  font-size: 8px;
}

.calculator-form select,
.calculator-form input {
  width: 100%;
  height: 35px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  color: #fff;
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  font-size: 10px;
}

.calculator-form select option {
  color: var(--ink);
}

.calculator-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
}

.calculator-result small,
.calculator-result b {
  display: block;
}

.calculator-result small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 8px;
}

.calculator-result b {
  margin-top: 3px;
  font-size: 17px;
}

.calculator-result button {
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--blue-700);
  background: #fff;
  font-size: 9px;
  font-weight: 700;
}

.simple-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.simple-panel h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.simple-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.7;
}

.step-list {
  display: grid;
  gap: 8px;
}

.step-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 10px;
  background: #f6f9fc;
  font-size: 9px;
}

.step-list i {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-600);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.empty-state {
  padding: 50px 25px;
  color: var(--muted);
  text-align: center;
}

.empty-state i {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 18px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 24px;
  font-style: normal;
}

.empty-state b,
.empty-state p {
  display: block;
}

.empty-state b {
  color: var(--ink);
  font-size: 13px;
}

.empty-state p {
  margin: 6px 0 15px;
  font-size: 9px;
}

/* 搜索、通知、我的 */

.search-page {
  padding-top: 2px;
}

.search-box {
  display: flex;
  gap: 8px;
  padding: 11px 13px;
  background: #fff;
}

.search-box label {
  display: flex;
  height: 38px;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 0 11px;
  border-radius: 20px;
  background: #eef2f6;
}

.search-box svg {
  width: 18px;
  height: 18px;
  color: #8995a5;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: none;
  color: var(--ink);
  background: transparent;
  font-size: 11px;
}

.search-box > button {
  border: 0;
  color: var(--blue-700);
  background: transparent;
  font-size: 10px;
}

.search-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 13px;
}

.search-hints button {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #687588;
  background: #fff;
  font-size: 9px;
}

.notification-card {
  display: grid;
  align-items: start;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  grid-template-columns: auto 1fr;
}

.notification-card.unread {
  border-color: #cfe9fb;
  background: #f7fcff;
}

.notification-card > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 10px;
  font-style: normal;
}

.notification-card b {
  font-size: 11px;
}

.notification-card p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.notification-card small {
  color: #a0a9b5;
  font-size: 8px;
}

.mine-hero {
  padding: 22px 17px 28px;
  color: #fff;
  background: linear-gradient(145deg, #087bd7, #14a0f0);
}

.mine-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mine-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 20px;
  font-weight: 800;
}

.mine-user h2 {
  margin: 0;
  font-size: 18px;
}

.mine-user p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
}

.mine-menu {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
}

.mine-menu button {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.mine-menu button:first-child {
  border-top: 0;
}

.mine-menu i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: var(--blue-100);
  font-size: 10px;
  font-style: normal;
}

.mine-menu b {
  font-size: 10px;
}

.mine-menu small {
  color: #98a3b1;
  font-size: 8px;
}

.mine-menu em {
  color: #a5afbb;
  font-size: 17px;
  font-style: normal;
}

.mine-settings-body {
  margin-top: -15px;
}

.about-page-body {
  padding-top: 18px;
}

.about-hero {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 12px 12px 20px;
  text-align: center;
}

.about-hero > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: var(--blue-700);
  font-size: 18px;
  font-weight: 800;
}

.about-hero h2 {
  margin: 10px 0 3px;
  font-size: 15px;
}

.about-hero p {
  margin: 0;
  color: #667085;
  font-size: 7px;
}

.about-version-trigger {
  margin-top: 10px;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  color: #667085;
  background: #eaecf0;
  font-size: 7px;
  user-select: none;
  touch-action: manipulation;
  -webkit-user-select: none;
}

.about-links {
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 15px;
  background: #fff;
}

.about-links button {
  display: grid;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  grid-template-columns: 1fr auto;
  text-align: left;
}

.about-links button:first-child {
  border-top: 0;
}

.about-links b,
.about-links small {
  display: block;
}

.about-links b {
  font-size: 9px;
}

.about-links small {
  margin-top: 2px;
  color: #98a2b3;
  font-size: 7px;
}

.about-links em {
  color: #a5afbb;
  font-size: 17px;
  font-style: normal;
}

.about-copyright {
  margin: 18px 0;
  color: #a0a9b5;
  font-size: 7px;
  text-align: center;
}

.developer-status-grid {
  display: grid;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.developer-status-grid span {
  padding: 9px;
  border-top: 1px solid #eaecf0;
  border-left: 1px solid #eaecf0;
}

.developer-status-grid span:nth-child(-n + 2) {
  border-top: 0;
}

.developer-status-grid span:nth-child(odd) {
  border-left: 0;
}

.developer-status-grid small,
.developer-status-grid b {
  display: block;
}

.developer-status-grid small {
  color: #98a2b3;
  font-size: 6px;
}

.developer-status-grid b {
  margin-top: 3px;
  font-size: 7px;
}

/* 弹层 */

.toast {
  position: fixed;
  z-index: 80;
  bottom: 28px;
  left: 50%;
  max-width: min(360px, calc(100vw - 40px));
  padding: 10px 14px;
  transform: translate(-50%, 18px);
  border-radius: 10px;
  color: #fff;
  opacity: 0;
  background: rgba(15, 28, 43, 0.9);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  pointer-events: none;
  transition: 0.2s ease;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(12, 28, 44, 0.52);
  backdrop-filter: blur(3px);
}

.modal-card {
  width: min(380px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 25px 60px rgba(11, 34, 57, 0.3);
}

.modal-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-card h3 {
  margin: 0;
  font-size: 16px;
}

.modal-card header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.modal-close {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #6e7a8a;
  background: #eef2f6;
  font-size: 18px;
}

.modal-content {
  margin-top: 15px;
}

.detail-grid {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
}

.detail-grid span {
  padding: 10px;
  border-top: 1px solid var(--line);
}

.detail-grid span:nth-child(-n + 2) {
  border-top: 0;
}

.detail-grid span:nth-child(2n) {
  border-left: 1px solid var(--line);
}

.detail-grid small,
.detail-grid b {
  display: block;
}

.detail-grid small {
  color: var(--muted);
  font-size: 8px;
}

.detail-grid b {
  margin-top: 4px;
  font-size: 10px;
}

.form-stack {
  display: grid;
  gap: 10px;
}

.form-stack label {
  display: block;
  color: #5f6d7e;
  font-size: 9px;
}

.form-stack input,
.form-stack select,
.form-stack textarea {
  width: 100%;
  margin-top: 5px;
  padding: 0 10px;
  border: 1px solid #dce3eb;
  border-radius: 10px;
  color: var(--ink);
  outline: none;
  background: #fff;
  font-size: 10px;
}

.form-stack input,
.form-stack select {
  height: 38px;
}

.form-stack textarea {
  min-height: 68px;
  padding-top: 9px;
  padding-bottom: 9px;
  line-height: 1.5;
  resize: vertical;
}

.form-stack input:focus,
.form-stack select:focus,
.form-stack textarea:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px #e4f3ff;
}

.modal-actions {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  grid-template-columns: 1fr 1.5fr;
}

.modal-actions button {
  padding: 10px;
  border: 0;
  border-radius: 10px;
  font-size: 10px;
}

.modal-actions button:first-child {
  color: #647184;
  background: #edf1f5;
}

.modal-actions button:last-child {
  color: #fff;
  background: var(--blue-700);
}

@media (max-width: 620px) {
  .prototype-toolbar {
    display: none;
  }

  .prototype-stage {
    display: block;
    min-height: 100vh;
    padding: 0;
    background: var(--canvas);
  }

  .phone-frame {
    width: 100%;
    height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .modal-card {
    width: 100%;
    max-height: 82vh;
    border-radius: 22px 22px 0 0;
  }
}

@media (max-width: 370px) {
  .identity-grid {
    gap: 8px;
  }

  .identity-card {
    padding: 12px 10px;
  }

  .service-icon {
    width: 49px;
    height: 49px;
  }

  .service-grid button > span:last-child {
    font-size: 9px;
  }
}

/* 多账号切换与船舶经营 App */

.prototype-toolbar .account-switcher {
  display: flex;
  min-width: 238px;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-color: #d0d5dd;
  border-radius: 12px;
  color: #101828;
  background: #fff;
  text-align: left;
}

.account-switch-avatar {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #2563eb;
  font-size: 10px;
  font-weight: 800;
}

.account-switcher > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.account-switcher small,
.account-switcher b {
  display: block;
}

.account-switcher small {
  color: #98a2b3;
  font-size: 8px;
}

.account-switcher b {
  margin-top: 1px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-switcher em {
  color: #98a2b3;
  font-size: 11px;
  font-style: normal;
}

.account-choice-list {
  display: grid;
  gap: 8px;
}

.account-choice-list button {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #eaecf0;
  border-radius: 13px;
  color: #101828;
  background: #fff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.account-choice-list button.active {
  border-color: #b2ccff;
  background: #f5f8ff;
}

.account-choice-list i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.account-choice-list span {
  min-width: 0;
}

.account-choice-list b,
.account-choice-list small {
  display: block;
}

.account-choice-list b {
  font-size: 10px;
}

.account-choice-list small {
  margin-top: 3px;
  overflow: hidden;
  color: #667085;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-choice-list em {
  color: #2563eb;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.operator-focus-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.operator-focus-card {
  position: relative;
  min-width: 0;
  min-height: 166px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  color: #101828;
  background: #fff;
  text-align: left;
}

.operator-focus-card > small {
  color: #667085;
  font-size: 8px;
}

.operator-focus-card h2 {
  margin: 6px 0 4px;
  font-size: 13px;
  line-height: 1.35;
}

.operator-focus-card > p {
  min-height: 26px;
  margin: 0;
  color: #667085;
  font-size: 8px;
  line-height: 1.5;
}

.operator-focus-card footer {
  display: flex;
  gap: 6px;
  margin-top: 13px;
}

.operator-focus-card footer span {
  flex: 1;
  padding: 7px;
  border-radius: 9px;
  background: #f2f4f7;
}

.operator-focus-card footer small,
.operator-focus-card footer b {
  display: block;
}

.operator-focus-card footer small {
  color: #98a2b3;
  font-size: 6px;
}

.operator-focus-card footer b {
  margin-top: 2px;
  font-size: 8px;
}

.operator-focus-card.voyage-summary {
  border: 0;
  color: #fff;
  background: #12355b;
  box-shadow: 0 14px 30px rgba(18, 53, 91, 0.18);
}

.operator-focus-card.voyage-summary::after {
  position: absolute;
  right: -4px;
  bottom: -16px;
  color: rgba(255, 255, 255, 0.055);
  content: "船";
  font-size: 78px;
  font-weight: 850;
}

.operator-focus-card.voyage-summary > small,
.operator-focus-card.voyage-summary > p {
  color: rgba(255, 255, 255, 0.63);
}

.voyage-stage {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 7px;
  border-radius: 8px;
  color: #d1e9ff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 7px;
}

.voyage-stage i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #47cd89;
}

.operator-focus-card.voyage-summary footer {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  color: #d1e9ff;
  font-size: 7px;
}

.vessel-service-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vessel-service-grid button {
  min-height: 82px;
}

.vessel-service-grid button > span:last-of-type {
  font-size: 8px;
}

.vessel-service-grid button > small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #98a2b3;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-metric-grid {
  display: grid;
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 13px;
  grid-template-columns: repeat(4, 1fr);
}

.operator-metric-grid button,
.operator-metric-grid .operator-metric-item {
  min-width: 0;
  padding: 10px 5px;
  border: 0;
  border-left: 1px solid #eaecf0;
  color: #101828;
  background: #fff;
  text-align: center;
}

.operator-metric-grid button:first-child,
.operator-metric-grid .operator-metric-item:first-child {
  border-left: 0;
}

.operator-metric-grid small,
.operator-metric-grid b,
.operator-metric-grid span {
  display: block;
}

.operator-metric-grid small {
  color: #667085;
  font-size: 6px;
}

.operator-metric-grid b {
  margin: 4px 0 3px;
  color: #101828;
  font-size: 14px;
}

.operator-metric-grid span {
  overflow: hidden;
  color: #98a2b3;
  font-size: 5.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-task-list {
  display: grid;
  gap: 1px;
}

.operator-task-list button {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid #eaecf0;
  color: #101828;
  background: transparent;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.operator-task-list button:first-child {
  padding-top: 2px;
  border-top: 0;
}

.operator-task-list > button > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 8px;
  font-style: normal;
}

.operator-task-list > button > i.warning {
  color: #b54708;
  background: #fffaeb;
}

.operator-task-list span {
  min-width: 0;
}

.operator-task-list b,
.operator-task-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-task-list b {
  font-size: 9px;
}

.operator-task-list small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 7px;
}

.operator-task-list em {
  color: #98a2b3;
  font-size: 14px;
  font-style: normal;
}

.port-operation-list {
  display: grid;
  gap: 9px;
}

.port-operation-card {
  padding: 13px;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  background: #fff;
}

.port-operation-card header,
.port-operation-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.port-operation-card header b,
.port-operation-card header small {
  display: block;
}

.port-operation-card header b {
  font-size: 10px;
}

.port-operation-card header small,
.port-operation-card footer small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 7px;
}

.port-operation-card header em {
  padding: 4px 7px;
  border-radius: 8px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 7px;
  font-style: normal;
}

.port-stage-track {
  display: grid;
  margin: 14px 0 11px;
  grid-template-columns: repeat(4, 1fr);
}

.port-stage-track span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #98a2b3;
}

.port-stage-track span::before {
  position: absolute;
  z-index: 0;
  top: 9px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: #eaecf0;
  content: "";
}

.port-stage-track span:first-child::before {
  display: none;
}

.port-stage-track i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #98a2b3;
  background: #f2f4f7;
  font-size: 7px;
  font-style: normal;
}

.port-stage-track b {
  font-size: 7px;
}

.port-stage-track span.done::before,
.port-stage-track span.active::before,
.port-stage-track span.done i,
.port-stage-track span.active i {
  color: #fff;
  background: #2563eb;
}

.port-stage-track span.done,
.port-stage-track span.active {
  color: #175cd3;
}

.port-operation-card footer {
  margin-top: 10px;
}

.port-operation-card footer button {
  padding: 4px;
  border: 0;
  color: #2563eb;
  background: transparent;
  font-size: 7px;
}

@media (max-width: 620px) {
  .prototype-toolbar .account-switcher {
    display: none;
  }
}

/* 船长任职后由船舶账号自动授予的管理能力 */

.vessel-authority-panel {
  border-color: #c7dcff;
  background: #f8fbff;
}

.crew-current-vessel-panel {
  border-color: #84adff;
}

.crew-current-vessel-panel button {
  cursor: pointer;
}

.vessel-authority-panel .section-title {
  align-items: center;
}

.vessel-authority-title > div:first-child {
  min-width: 0;
}

.vessel-current-role {
  display: inline-block;
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid #b8c8de;
  color: #475467;
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.vessel-authority-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  flex-direction: column;
  gap: 2px;
}

.vessel-authority-actions button {
  padding-top: 2px;
}

.crew-current-voyage-entry {
  display: grid;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px solid #c7dcff;
  border-radius: 10px;
  color: #173b6c;
  background: #edf4ff;
  grid-template-columns: auto minmax(0, 1fr) auto;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.crew-current-voyage-entry:hover,
.crew-current-voyage-entry:focus-visible {
  border-color: #528bff;
  background: #e4efff;
  outline: none;
}

.crew-current-voyage-entry:active {
  transform: translateY(1px);
}

.crew-current-voyage-entry small,
.crew-current-voyage-entry b,
.crew-current-voyage-entry strong {
  display: block;
}

.crew-current-voyage-entry small {
  color: #175cd3;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.crew-current-voyage-entry b {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-current-voyage-entry strong {
  color: #175cd3;
  font-size: 8px;
  white-space: nowrap;
}

.crew-current-voyage-entry.empty {
  cursor: default;
  color: #667085;
  background: #f8fafc;
}

.crew-vessel-service-grid button {
  border-color: #d9e7fb;
  background: #fff;
}

.identity-card.empty-vessel-status {
  border-style: dashed;
  border-color: #cfd7e3;
  color: #344054;
  background: #f8fafc;
}

.identity-card.empty-vessel-status::after {
  color: rgba(102, 112, 133, 0.05);
}

.identity-card.empty-vessel-status header > svg {
  color: #667085;
  background: #eef1f5;
}

.identity-card.empty-vessel-status header em,
.identity-card.empty-vessel-status p span {
  color: #98a2b3;
}

.identity-card.empty-vessel-status p b,
.identity-card.empty-vessel-status p strong {
  color: #667085;
}

.authorization-explain {
  display: grid;
  align-items: center;
  gap: 8px;
  grid-template-columns: 1fr auto 1fr;
}

.authorization-explain > span {
  min-width: 0;
  min-height: 112px;
  padding: 12px;
  border: 1px solid #d1e0f5;
  border-radius: 13px;
  background: #f8fbff;
}

.authorization-explain > span i {
  display: grid;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #2563eb;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.authorization-explain > span b,
.authorization-explain > span small {
  display: block;
}

.authorization-explain > span b {
  font-size: 9px;
  line-height: 1.45;
}

.authorization-explain > span small {
  margin-top: 5px;
  color: #667085;
  font-size: 7px;
  line-height: 1.45;
}

.authorization-explain > em {
  color: #2563eb;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.authorization-rule {
  margin-top: 12px;
  padding: 12px;
  border-left: 3px solid #2563eb;
  border-radius: 0 10px 10px 0;
  background: #f2f4f7;
}

.authorization-rule b {
  font-size: 9px;
}

.authorization-rule p {
  margin: 5px 0 0;
  color: #667085;
  font-size: 8px;
  line-height: 1.65;
}

.vessel-access-empty {
  margin-top: 14px;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
}

.vessel-access-empty > i svg {
  width: 28px;
  height: 28px;
}

/* 完整产品原型统一使用现代工作台视觉语言 */

:root {
  --blue-800: #175cd3;
  --blue-700: #2563eb;
  --blue-600: #3b82f6;
  --blue-500: #60a5fa;
  --blue-100: #eff6ff;
  --ink: #101828;
  --muted: #667085;
  --canvas: #f6f8fc;
  --line: #eaecf0;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

body {
  color: var(--ink);
  background: #f5f5f5;
  -webkit-font-smoothing: antialiased;
}

.prototype-toolbar {
  min-height: 64px;
  color: #101828;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.toolbar-mark {
  background: var(--blue-700);
  box-shadow: none;
}

.prototype-toolbar small,
.prototype-toolbar p {
  color: #98a2b3;
}

.prototype-toolbar > button {
  border-color: #d0d5dd;
  color: #344054;
  background: #fff;
}

.prototype-stage {
  min-height: calc(100vh - 64px);
  padding-top: 30px;
  background: #e9edf5;
}

.phone-frame {
  width: 400px;
  height: 840px;
  border-width: 8px;
  border-color: #101828;
  background: var(--canvas);
  box-shadow: 0 28px 70px rgba(16, 24, 40, 0.22);
}

.phone-screen {
  background: var(--canvas);
}

.status-bar {
  height: 37px;
  padding: 8px 22px 0;
  color: #344054;
  background: var(--canvas);
  font-size: 9px;
}

.bottom-nav {
  height: 68px;
  border-top-color: #eaecf0;
  background: rgba(255, 255, 255, 0.98);
}

.bottom-nav button {
  color: #98a2b3;
}

.bottom-nav button.active {
  color: var(--blue-700);
}

.app-page {
  min-height: 735px;
}

.app-home-top {
  padding: 7px 17px 15px;
  color: #101828;
  background: var(--canvas);
}

.app-home-bar {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  gap: 9px;
}

.home-role-avatar,
.home-message-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
}

.home-role-switch {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.home-role-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: var(--blue-700);
  font-size: 12px;
  font-weight: 850;
}

.home-role-copy {
  min-width: 0;
}

.home-role-cue {
  display: inline-grid;
  width: 18px;
  height: 22px;
  flex: 0 0 auto;
  margin-left: -3px;
  place-items: center;
  color: rgba(255, 255, 255, 0.82);
}

.home-role-cue svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.app-home-bar small,
.app-home-bar b {
  display: block;
}

.app-home-bar small {
  color: #98a2b3;
  font-size: 9px;
}

.app-home-bar b {
  margin-top: 2px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-message-button {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #475467;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  font-size: 13px;
  font-weight: 800;
}

.home-message-button svg {
  width: 17px;
  height: 17px;
}

.home-message-button i {
  position: absolute;
  top: -3px;
  right: -2px;
  display: grid;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid var(--canvas);
  border-radius: 999px;
  color: #fff;
  background: #f04438;
  font-size: 7px;
  font-style: normal;
}

.app-home-greeting {
  margin-top: 17px;
}

.app-home-greeting small {
  color: #98a2b3;
  font-size: 9px;
}

.app-home-greeting h1 {
  margin: 4px 0 3px;
  font-size: 21px;
  letter-spacing: -0.035em;
}

.app-home-greeting p {
  margin: 0;
  color: #667085;
  font-size: 10px;
  line-height: 1.5;
}

.home-search-line {
  display: grid;
  width: 100%;
  height: 40px;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 0 11px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  color: #98a2b3;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.home-search-line svg {
  width: 17px;
  height: 17px;
}

.home-search-line span {
  font-size: 9px;
}

.home-search-line em {
  color: #b3bbc6;
  font-size: 16px;
  font-style: normal;
}

.home-content {
  margin-top: 0;
  padding: 0 14px 24px;
}

.compact-home-top {
  padding-bottom: 10px;
}

.identity-grid {
  gap: 8px;
  margin-top: 0;
}

.identity-card {
  height: 130px;
  padding: 14px;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  color: #101828;
  background: #fff;
  box-shadow: none;
}

.identity-card::after {
  right: -6px;
  bottom: -12px;
  color: rgba(37, 99, 235, 0.05);
  font-size: 76px;
}

.identity-card header {
  gap: 8px;
}

.identity-card header > svg {
  width: 29px;
  height: 29px;
  padding: 5px;
  border-radius: 9px;
  color: var(--blue-700);
  background: #eff6ff;
}

.identity-card header span {
  font-size: 12px;
}

.identity-card header em {
  color: #667085;
  font-size: 7px;
}

.identity-card p {
  gap: 8px;
  margin-top: 13px;
}

.identity-card p span {
  color: #667085;
  font-size: 8px;
}

.identity-card p b,
.identity-card p strong {
  color: #101828;
  font-size: 9px;
}

.identity-card.vessel-status {
  border: 0;
  color: #fff;
  background: #12355b;
  box-shadow: 0 14px 30px rgba(18, 53, 91, 0.18);
}

.identity-card.vessel-status::after {
  color: rgba(255, 255, 255, 0.055);
}

.identity-card.vessel-status header > svg {
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
}

.identity-card.vessel-status header em,
.identity-card.vessel-status p span {
  color: rgba(255, 255, 255, 0.64);
}

.identity-card.vessel-status p b,
.identity-card.vessel-status p strong {
  color: #fff;
}

.online-dot {
  background: #47cd89;
}

.home-section,
.service-panel,
.content-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.section-title {
  margin-bottom: 11px;
}

.section-title b {
  font-size: 13px;
}

.section-title small {
  color: #98a2b3;
  font-size: 8px;
}

.section-title button {
  color: var(--blue-700);
  font-size: 8px;
}

.service-grid {
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.service-grid button {
  min-height: 72px;
  padding: 7px 2px;
  border: 1px solid #eaecf0;
  border-radius: 13px;
  background: #fff;
}

.service-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eff6ff;
  box-shadow: none;
}

.service-icon svg {
  width: 20px;
  height: 20px;
}

.service-grid button > span:last-of-type {
  min-height: 21px;
  font-size: 7.5px;
  font-weight: 650;
  line-height: 1.35;
}

.recommend-tabs {
  margin-top: -2px;
  background: transparent;
}

.recommend-tabs button {
  font-size: 8px;
}

.recommend-tabs button.active {
  color: var(--blue-700);
}

.recommend-grid {
  gap: 7px;
}

.recommend-grid button {
  min-height: 76px;
  padding: 9px;
  border-color: #eaecf0;
  color: #101828;
  background: #fff;
}

.recommend-grid i {
  color: var(--blue-700);
  background: #eff6ff;
}

.news-type {
  color: var(--blue-700);
  background: #eff6ff;
}

.page-header {
  min-height: 56px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid #eaecf0;
  color: #101828;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.page-header > button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #344054;
  background: #f2f4f7;
}

.page-header b {
  font-size: 13px;
}

.page-header small {
  color: #667085;
  font-size: 7px;
}

.page-header .header-action {
  color: var(--blue-700);
  background: transparent;
}

.page-body {
  padding: 14px;
}

.summary-card {
  padding: 16px;
  border-radius: 18px;
  background: #12355b;
  box-shadow: 0 14px 30px rgba(18, 53, 91, 0.18);
}

.summary-card h2 {
  font-size: 17px;
}

.summary-card footer span {
  background: rgba(255, 255, 255, 0.08);
}

.subsection-title {
  margin-top: 15px;
}

.subsection-title b {
  font-size: 12px;
}

.list-card,
.job-card,
.market-card,
.training-card,
.simple-panel,
.notification-card {
  border-color: #eaecf0;
  border-radius: 14px;
  box-shadow: none;
}

.list-card > i,
.round-icon {
  color: var(--blue-700);
  background: #eff6ff;
}

.list-card em,
.info-badge,
.match-badge {
  color: #175cd3;
  background: #eff8ff;
}

.list-card em.warning,
.course-tag.required {
  color: #b54708;
  background: #fffaeb;
}

.wide-action,
.primary-action,
.small-action {
  background: var(--blue-700);
  box-shadow: none;
}

.filter-tabs {
  background: #eaecf0;
}

.filter-tabs button.active {
  color: var(--blue-700);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.career-item > div {
  border: 1px solid #eaecf0;
  box-shadow: none;
}

.learning-card {
  border-color: #eaecf0;
  background: #fff;
}

.learning-card > i {
  color: var(--blue-700);
  background: #eff6ff;
}

.progress-line i {
  background: var(--blue-700);
}

.calculator-card {
  background: #12355b;
  box-shadow: 0 14px 30px rgba(18, 53, 91, 0.18);
}

.mine-hero {
  color: #101828;
  background: var(--canvas);
}

.mine-avatar {
  border: 0;
  color: #fff;
  background: var(--blue-700);
}

.mine-user p {
  color: #667085;
}

.mine-menu {
  border: 1px solid #eaecf0;
  box-shadow: none;
}

.mine-menu i {
  color: var(--blue-700);
  background: #eff6ff;
}

.search-box {
  border-bottom: 1px solid #eaecf0;
}

.search-box label {
  background: #f2f4f7;
}

.modal-card {
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.24);
}

.modal-actions button:last-child {
  background: var(--blue-700);
}

@media (max-width: 620px) {
  .prototype-stage {
    display: block;
    min-height: 100vh;
    padding: 0;
  }

  .phone-frame {
    width: 100%;
    height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 370px) {
  .identity-card {
    padding: 12px 10px;
  }

  .service-grid button > span:last-of-type {
    font-size: 7px;
  }
}

/* 当前任职船舶的船货撮合能力 */
.crew-vessel-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cargo-context-banner,
.cargo-browse-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #d9e7fb;
  border-radius: 14px;
  background: #f7faff;
}

.cargo-context-banner > i,
.cargo-browse-note > i {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eaf2ff;
}

.cargo-context-banner > i svg,
.cargo-browse-note > i svg {
  width: 20px;
  height: 20px;
}

.cargo-context-banner > span,
.cargo-browse-note > span {
  min-width: 0;
  flex: 1;
}

.cargo-context-banner small,
.cargo-browse-note small {
  display: block;
  color: #667085;
  font-size: 7px;
  line-height: 1.45;
}

.cargo-context-banner b,
.cargo-browse-note b {
  display: block;
  margin: 2px 0;
  color: #101828;
  font-size: 10px;
}

.cargo-context-banner p {
  margin: 2px 0 0;
  color: #667085;
  font-size: 7px;
  line-height: 1.45;
}

.cargo-context-banner > em {
  padding: 4px 6px;
  border-radius: 7px;
  color: #175cd3;
  background: #eaf2ff;
  font-size: 6px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.wide-action.accepted {
  color: #067647;
  border-color: #abefc6;
  background: #ecfdf3;
}

/* 个人船东经营功能 */

.owner-three-tabs button {
  padding-right: 3px;
  padding-left: 3px;
  font-size: 8px;
}

.compact-empty {
  padding: 18px;
}

.analytics-bars {
  display: grid;
  gap: 13px;
}

.analytics-bars > div > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.analytics-bars b {
  color: #101828;
  font-size: 9px;
}

.analytics-bars em {
  color: #175cd3;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.analytics-bars > div > i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.analytics-bars u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #53b1fd);
  text-decoration: none;
}

.owner-analysis-grid {
  grid-template-columns: repeat(2, 1fr);
}

.owner-analysis-grid button:nth-child(3) {
  border-left: 0;
  border-top: 1px solid #eaecf0;
}

.owner-analysis-grid button:nth-child(4) {
  border-top: 1px solid #eaecf0;
}

/* 船公司船队经营功能 */

.carrier-scope-rule {
  margin-bottom: 12px;
}

.vessel-type-guide {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  grid-template-columns: 1fr 1fr;
}

.vessel-type-guide div {
  padding: 9px;
  border-radius: 10px;
  background: #f5f8fc;
}

.vessel-type-guide small,
.vessel-type-guide b {
  display: block;
}

.vessel-type-guide small {
  color: #667085;
  font-size: 6px;
}

.vessel-type-guide b {
  margin-top: 3px;
  color: #101828;
  font-size: 8px;
}

.read-only-group {
  opacity: 0.82;
}

.fleet-map-panel {
  overflow: hidden;
  border: 1px solid #dce7f4;
  border-radius: 15px;
  background: #f6faff;
}

.fleet-map-panel > div {
  position: relative;
  height: 138px;
  overflow: hidden;
  background:
    linear-gradient(28deg, transparent 46%, rgba(37, 99, 235, 0.08) 47%, rgba(37, 99, 235, 0.08) 50%, transparent 51%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(148, 163, 184, 0.08) 24px),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(148, 163, 184, 0.08) 34px),
    #eef6ff;
}

.fleet-map-panel > div::before,
.fleet-map-panel > div::after {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  content: '';
}

.fleet-map-panel > div::before {
  top: -30px;
  left: -18px;
  width: 120px;
  height: 90px;
}

.fleet-map-panel > div::after {
  right: -25px;
  bottom: -35px;
  width: 150px;
  height: 100px;
}

.fleet-map-panel .map-route-line {
  position: absolute;
  top: 66px;
  left: 28px;
  width: 280px;
  border-top: 2px dashed rgba(37, 99, 235, 0.35);
  transform: rotate(-8deg);
}

.fleet-map-panel > div > i {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.fleet-map-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #fff;
}

.fleet-map-panel footer b {
  font-size: 9px;
}

.fleet-map-panel footer small {
  color: #667085;
  font-size: 6px;
}

.video-monitor-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.video-monitor-card {
  min-width: 0;
  overflow: hidden;
  padding: 0 0 10px;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  color: #101828;
  background: #fff;
  text-align: left;
}

.video-monitor-card > div {
  position: relative;
  display: grid;
  height: 92px;
  margin-bottom: 9px;
  place-items: center;
  color: #d1e9ff;
  background: linear-gradient(145deg, #102a43, #1f4f76);
}

.video-monitor-card > div svg {
  width: 34px;
  height: 34px;
}

.video-monitor-card > div em {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 3px 5px;
  border-radius: 6px;
  color: #d1fadf;
  background: rgba(6, 118, 71, 0.72);
  font-size: 6px;
  font-style: normal;
}

.video-monitor-card > b,
.video-monitor-card > small {
  display: block;
  margin: 0 9px;
}

.video-monitor-card > b {
  font-size: 9px;
}

.video-monitor-card > small {
  margin-top: 3px;
  overflow: hidden;
  color: #667085;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-monitor-card.disabled > div {
  color: #98a2b3;
  background: #e4e7ec;
}

.video-monitor-card.disabled > div em {
  color: #667085;
  background: #f2f4f7;
}

/* 多角色工作台与统一单船工作台 */

.section-title-link {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.home-fleet-list {
  display: grid;
  gap: 7px;
}

.home-fleet-list > button {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  color: #101828;
  background: #fff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.home-fleet-list > button > i {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  color: var(--blue-700);
  background: #eff6ff;
  font-style: normal;
}

.home-fleet-list svg {
  width: 19px;
  height: 19px;
}

.home-fleet-list span,
.home-fleet-list b,
.home-fleet-list small {
  display: block;
  min-width: 0;
}

.home-fleet-list b {
  font-size: 9px;
}

.home-fleet-list small {
  margin-top: 2px;
  color: #667085;
  font-size: 6px;
}

.home-fleet-list em {
  color: #175cd3;
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
}

.workbench-groups {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.workbench-group {
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
}

.workbench-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px 9px;
}

.workbench-group > header span,
.workbench-group > header b,
.workbench-group > header small {
  display: block;
}

.workbench-group > header b {
  font-size: 11px;
}

.workbench-group > header small {
  margin-top: 2px;
  color: #667085;
  font-size: 6px;
}

.workbench-group > header > em {
  padding: 3px 6px;
  border-radius: 999px;
  color: #175cd3;
  background: #eff8ff;
  font-size: 6px;
  font-style: normal;
  white-space: nowrap;
}

.workbench-link-grid {
  display: grid;
  padding: 0 8px 8px;
  gap: 7px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.workbench-link-grid > button {
  display: flex;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 7px;
  padding: 8px 3px 6px;
  border: 1px solid #eef1f5;
  border-radius: 11px;
  color: #101828;
  background: #fbfcfe;
  text-align: center;
}

.workbench-link-grid > button > i {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: var(--blue-700);
  background: #eff6ff;
  font-style: normal;
}

.workbench-link-grid svg {
  width: 17px;
  height: 17px;
}

.workbench-link-grid span {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 7px;
  font-weight: 650;
  line-height: 1.35;
}

/* 首页与工作台共用同一套五列功能入口 */
.capability-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.capability-grid .capability-item {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 6px;
  padding: 8px 2px 6px;
  border: 0;
  border-radius: 12px;
  color: #101828;
  background: transparent;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.capability-grid .capability-item:hover {
  background: #f7faff;
}

.capability-grid .capability-item:active {
  background: #eff6ff;
  transform: scale(0.98);
}

.capability-grid .capability-item:focus-visible {
  outline: 2px solid #84adff;
  outline-offset: 1px;
}

.capability-grid .capability-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  margin: 0;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eff6ff;
  box-shadow: none;
}

.capability-grid .capability-icon svg {
  width: 19px;
  height: 19px;
}

.capability-grid .capability-label {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  min-height: 22px;
  overflow: hidden;
  font-size: 8px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.capability-grid .capability-hint {
  display: block;
  width: 100%;
  overflow: hidden;
  color: #98a2b3;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-link-grid {
  padding: 0 8px 8px;
}

.fleet-workbench-entry,
.vessel-context-entry {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #d8e7fb;
  border-radius: 16px;
  color: #101828;
  background: #f7faff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.fleet-workbench-entry > i,
.vessel-context-entry > i {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--blue-700);
  font-style: normal;
}

.fleet-workbench-entry svg,
.vessel-context-entry svg {
  width: 23px;
  height: 23px;
}

.fleet-workbench-entry span,
.vessel-context-entry span,
.fleet-workbench-entry b,
.vessel-context-entry b,
.fleet-workbench-entry small,
.vessel-context-entry small {
  display: block;
  min-width: 0;
}

.fleet-workbench-entry small,
.vessel-context-entry small {
  color: #175cd3;
  font-size: 6px;
}

.fleet-workbench-entry b,
.vessel-context-entry b {
  margin-top: 2px;
  font-size: 11px;
}

.fleet-workbench-entry p,
.vessel-context-entry p {
  margin: 3px 0 0;
  color: #667085;
  font-size: 6px;
}

.fleet-workbench-entry > em,
.vessel-context-entry > em {
  color: #175cd3;
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
}

.vessel-workspace-hero {
  overflow: hidden;
  padding: 16px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(145deg, #12355b, #174a78);
  box-shadow: 0 14px 30px rgba(18, 53, 91, 0.18);
}

.vessel-workspace-hero > div > small,
.vessel-workspace-hero h2,
.vessel-workspace-hero p {
  display: block;
}

.vessel-workspace-hero > div > small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 7px;
}

.vessel-workspace-hero h2 {
  margin: 4px 0 2px;
  font-size: 20px;
}

.vessel-workspace-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 8px;
}

.vessel-access-badge {
  display: block;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
}

.vessel-access-badge b,
.vessel-access-badge small {
  display: block;
}

.vessel-access-badge b {
  font-size: 9px;
}

.vessel-access-badge small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 6px;
  line-height: 1.45;
}

.vessel-access-badge.readonly {
  border-color: rgba(254, 200, 75, 0.3);
  background: rgba(254, 200, 75, 0.12);
}

.vessel-workspace-hero > footer {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  grid-template-columns: 1fr 1fr;
}

.vessel-workspace-hero > footer span {
  min-width: 0;
  padding: 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
}

.vessel-workspace-hero > footer small,
.vessel-workspace-hero > footer b {
  display: block;
}

.vessel-workspace-hero > footer small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 5.5px;
}

.vessel-workspace-hero > footer b {
  margin-top: 2px;
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-section-tabs {
  display: flex;
  gap: 5px;
  margin: 12px -14px 0;
  padding: 0 14px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vessel-section-tabs::-webkit-scrollbar {
  display: none;
}

.vessel-section-tabs button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  color: #667085;
  background: #fff;
  font-size: 7px;
}

.vessel-section-tabs button.active {
  border-color: var(--blue-700);
  color: #fff;
  background: var(--blue-700);
}

.vessel-section-content {
  margin-top: 11px;
}

.vessel-status-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.vessel-status-grid article {
  min-width: 0;
  padding: 11px;
  border: 1px solid #eaecf0;
  border-radius: 13px;
  background: #fff;
}

.vessel-status-grid small,
.vessel-status-grid b,
.vessel-status-grid span {
  display: block;
}

.vessel-status-grid small {
  color: #667085;
  font-size: 6px;
}

.vessel-status-grid b {
  margin: 4px 0;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-status-grid span {
  color: #175cd3;
  font-size: 6px;
}

.vessel-quick-title {
  margin-top: 12px;
}

.vessel-quick-action-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vessel-quick-action-grid > button {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border: 1px solid #bfd7ff;
  border-radius: 13px;
  color: #101828;
  background: #f7faff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.vessel-quick-action-grid > button:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.vessel-quick-action-grid i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--blue-700);
  font-style: normal;
}

.vessel-quick-action-grid svg {
  width: 17px;
  height: 17px;
}

.vessel-quick-action-grid span,
.vessel-quick-action-grid b,
.vessel-quick-action-grid small {
  display: block;
  min-width: 0;
}

.vessel-quick-action-grid b {
  font-size: 8px;
}

.vessel-quick-action-grid small {
  margin-top: 2px;
  color: #667085;
  font-size: 5.5px;
}

.vessel-quick-action-grid em {
  color: #175cd3;
  font-size: 6px;
  font-style: normal;
  white-space: nowrap;
}

.vessel-section-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 11px;
  border: 1px solid #bfd7ff;
  border-radius: 13px;
  background: #f7faff;
}

.vessel-section-action span,
.vessel-section-action b,
.vessel-section-action small {
  display: block;
  min-width: 0;
}

.vessel-section-action b {
  font-size: 8px;
}

.vessel-section-action small {
  margin-top: 2px;
  color: #667085;
  font-size: 6px;
}

.vessel-section-action button {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-700);
  font-size: 7px;
}

.workflow-track {
  display: flex;
  align-items: flex-start;
  margin-bottom: 13px;
}

.workflow-track span {
  position: relative;
  min-width: 0;
  flex: 1;
  color: #98a2b3;
  text-align: center;
}

.workflow-track span::after {
  position: absolute;
  z-index: 0;
  top: 8px;
  right: 50%;
  left: -50%;
  height: 2px;
  content: '';
  background: #e4e7ec;
}

.workflow-track span:first-child::after {
  display: none;
}

.workflow-track i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 17px;
  height: 17px;
  margin: 0 auto 4px;
  place-items: center;
  border-radius: 50%;
  color: #667085;
  background: #e4e7ec;
  font-size: 6px;
  font-style: normal;
}

.workflow-track b {
  display: block;
  overflow: hidden;
  font-size: 5.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-track span.done::after,
.workflow-track span.active::after,
.workflow-track span.done i,
.workflow-track span.active i {
  color: #fff;
  background: var(--blue-700);
}

.workflow-track span.done,
.workflow-track span.active {
  color: #175cd3;
}

.modal-track-map {
  margin-bottom: 18px;
}

.video-live-preview {
  min-height: 220px;
  margin-bottom: 18px;
  border-radius: 24px;
  background: linear-gradient(145deg, #173f6c, #0a2442);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.video-live-preview::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
}

.video-live-preview i {
  width: 58px;
  height: 58px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .14);
  z-index: 1;
}

.video-live-preview svg {
  width: 100%;
  height: 100%;
}

.video-live-preview b,
.video-live-preview small {
  z-index: 1;
}

.video-live-preview em {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ef4444;
  font-size: 11px;
  font-style: normal;
}

.vessel-area-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.vessel-area-grid > button {
  display: grid;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border: 1px solid #e7edf4;
  border-radius: 13px;
  color: #101828;
  background: #fff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.vessel-area-grid > button > i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--blue-700);
  background: #eff6ff;
  font-style: normal;
}

.vessel-area-grid svg {
  width: 18px;
  height: 18px;
}

.vessel-area-grid span,
.vessel-area-grid b,
.vessel-area-grid small {
  display: block;
  min-width: 0;
}

.vessel-area-grid b {
  font-size: 8px;
}

.vessel-area-grid small {
  margin-top: 2px;
  color: #667085;
  font-size: 5.5px;
  line-height: 1.35;
}

.vessel-area-grid > button > em {
  color: #98a2b3;
  font-size: 12px;
  font-style: normal;
}

.vessel-profile-panel {
  margin-top: 0;
}

.relation-history-note,
.scope-notice {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid #dbe8f8;
  border-radius: 12px;
  color: #475467;
  background: #f7faff;
  font-size: 7px;
  line-height: 1.55;
}

.relation-history-note b {
  display: block;
  color: #101828;
  font-size: 8px;
}

.relation-history-note p {
  margin: 4px 0 0;
}

.relation-overview {
  display: grid;
  gap: 8px;
  margin-top: 0;
  grid-template-columns: 1fr 1fr;
}

.relation-overview > div:last-child {
  grid-column: 1 / -1;
}

.relation-overview small,
.relation-overview b {
  display: block;
}

.relation-overview small {
  color: #667085;
  font-size: 6px;
}

.relation-overview b {
  margin-top: 3px;
  font-size: 8px;
}

.vessel-operation-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vessel-document-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vessel-operation-actions > button {
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid #e7edf4;
  border-radius: 13px;
  color: #101828;
  background: #fff;
}

.vessel-operation-actions i {
  display: grid;
  width: 31px;
  height: 31px;
  margin: 0 auto 6px;
  place-items: center;
  border-radius: 9px;
  color: var(--blue-700);
  background: #eff6ff;
  font-style: normal;
}

.vessel-operation-actions svg {
  width: 18px;
  height: 18px;
}

.vessel-operation-actions b,
.vessel-operation-actions small {
  display: block;
}

.vessel-operation-actions b {
  font-size: 8px;
}

.vessel-operation-actions small {
  margin-top: 3px;
  color: #667085;
  font-size: 5.5px;
  line-height: 1.35;
}

.maintenance-overview {
  display: grid;
  margin-top: 0;
  padding: 12px 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.maintenance-overview span {
  min-width: 0;
  padding: 0 8px;
  text-align: center;
}

.maintenance-overview span + span {
  border-left: 1px solid #e7edf4;
}

.maintenance-overview small,
.maintenance-overview b {
  display: block;
}

.maintenance-overview small {
  color: #667085;
  font-size: 6px;
}

.maintenance-overview b {
  margin-top: 4px;
  font-size: 11px;
}

.maintenance-overview b.warning {
  color: #c86a0c;
}

.maintenance-record-actions > button {
  min-height: 96px;
}

.maintenance-record-actions span em {
  display: block;
  margin-top: 5px;
  color: #175cd3;
  font-size: 5.5px;
  font-style: normal;
  font-weight: 700;
}

.maintenance-equipment-entry > button {
  display: grid;
  width: 100%;
  min-height: 70px;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid #e7edf4;
  border-radius: 13px;
  color: #101828;
  background: #fff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.maintenance-equipment-entry i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: var(--blue-700);
  background: #eff6ff;
  font-style: normal;
}

.maintenance-equipment-entry svg {
  width: 18px;
  height: 18px;
}

.maintenance-equipment-entry span,
.maintenance-equipment-entry b,
.maintenance-equipment-entry small {
  display: block;
  min-width: 0;
}

.maintenance-equipment-entry b {
  font-size: 8px;
}

.maintenance-equipment-entry small {
  margin-top: 3px;
  color: #667085;
  font-size: 5.5px;
  line-height: 1.35;
}

.maintenance-equipment-entry em {
  color: #175cd3;
  font-size: 6px;
  font-style: normal;
  white-space: nowrap;
}

.maintenance-modal-list .list-card {
  padding: 10px;
}

.maintenance-detail-grid span.wide {
  border-left: 0;
  grid-column: 1 / -1;
}

.single-port-status {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, 1fr);
}

.single-port-status span small,
.single-port-status span b {
  display: block;
}

.single-port-status span small {
  color: #667085;
  font-size: 5.5px;
}

.single-port-status span b {
  margin-top: 3px;
  font-size: 7px;
}

.single-port-status > i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e7ec;
  grid-column: 1 / -1;
}

.single-port-status > i > u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue-700);
}

.single-vessel-map footer {
  gap: 9px;
}

.single-vessel-map footer span {
  min-width: 0;
}

.single-vessel-map footer em {
  color: #175cd3;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

/* 紧凑单船工作台：单船首页 + 独立功能页 */

.vessel-compact-header > div {
  text-align: left;
}

.vessel-compact-header {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

.vessel-compact-header > .vessel-header-actions {
  display: flex;
  width: auto;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

.vessel-header-actions button {
  border: 0;
}

.vessel-compact-header .vessel-header-add {
  width: auto;
  height: 32px;
  padding: 0 9px;
  border-radius: 10px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}

.vessel-compact-header .vessel-header-more,
.vessel-compact-header .vessel-header-grid {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  justify-self: end;
  border-radius: 10px;
  color: #344054;
  background: #f2f4f7;
  font-size: 15px;
}

.vessel-compact-header .vessel-header-grid svg {
  width: 17px;
  height: 17px;
}

.vessel-identity-strip,
.vessel-context-strip {
  display: flex;
  width: 100%;
  height: 36px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid #eaecf0;
  color: #475467;
  background: #fff;
  text-align: left;
}

.vessel-identity-strip span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 6.5px;
  font-weight: 700;
}

.vessel-identity-strip em,
.vessel-context-strip span {
  color: #175cd3;
  font-size: 6.5px;
  font-style: normal;
}

.vessel-context-strip {
  height: 34px;
  margin: 0;
  background: #f7faff;
}

.vessel-context-strip b {
  font-size: 7.5px;
}

.vessel-compact-body {
  padding-top: 12px;
}

.vessel-compact-workspace .vessel-section-content {
  margin-top: 0;
}

.vessel-compact-snapshot {
  overflow: hidden;
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.12), transparent 36%),
    linear-gradient(145deg, #173f6c, #123254);
  box-shadow: 0 10px 24px rgba(21, 63, 107, 0.16);
}

.vessel-compact-snapshot header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vessel-compact-snapshot header > span:last-child {
  flex: 0 0 auto;
  text-align: right;
}

.vessel-compact-snapshot small,
.vessel-compact-snapshot b {
  display: block;
}

.vessel-compact-snapshot small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 6px;
}

.vessel-compact-snapshot header > span:last-child small {
  color: #8ee8c3;
}

.vessel-compact-snapshot header b {
  max-width: 210px;
  margin-top: 4px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-compact-snapshot footer {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  grid-template-columns: 1.45fr 0.75fr 0.8fr;
}

.vessel-compact-snapshot footer span {
  min-width: 0;
}

.vessel-compact-snapshot footer b {
  margin-top: 3px;
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-latest-voyage {
  display: block;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #cfe1ef;
  border-radius: 16px;
  color: #16324a;
  background: linear-gradient(135deg, #f5fbff, #fff);
  box-shadow: 0 6px 16px rgba(24, 89, 137, 0.07);
  text-align: left;
}

.vessel-latest-voyage header,
.vessel-latest-voyage footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vessel-latest-voyage small,
.vessel-latest-voyage b {
  display: block;
}

.vessel-latest-voyage small {
  color: #7d92a4;
  font-size: 6px;
}

.vessel-latest-voyage header b {
  margin-top: 3px;
  font-size: 11px;
}

.vessel-latest-voyage header em {
  padding: 4px 7px;
  border-radius: 999px;
  color: #087c58;
  background: #ecfdf3;
  font-size: 6px;
  font-style: normal;
  font-weight: 700;
}

.vessel-latest-voyage header em.warning {
  color: #b54708;
  background: #fff6ed;
}

.vessel-latest-voyage p {
  margin: 8px 0;
  color: #475467;
  font-size: 7px;
}

.vessel-latest-voyage footer {
  padding-top: 8px;
  border-top: 1px solid #e6eef4;
  color: #667085;
  font-size: 6.5px;
}

.vessel-latest-voyage footer b {
  flex: 0 0 auto;
  color: #1674bd;
}

.vessel-latest-voyage.empty {
  border-style: dashed;
}

.vessel-compact-title {
  margin: 14px 2px 9px;
}

.vessel-compact-function-grid i,
.vessel-sheet-function-grid i {
  display: grid;
  width: 31px;
  height: 31px;
  margin: 0 auto 6px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eff6ff;
  font-style: normal;
}

.vessel-compact-function-grid svg,
.vessel-sheet-function-grid svg {
  width: 17px;
  height: 17px;
}

.vessel-compact-function-grid b,
.vessel-compact-function-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-compact-function-grid b {
  font-size: 7px;
}

.vessel-compact-function-grid small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 5.2px;
}

.vessel-compact-function-panel {
  padding: 12px 8px 10px;
  border: 1px solid #e1e7ef;
  border-radius: 17px;
  background: #fff;
}

.vessel-compact-function-grid {
  display: grid;
  row-gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vessel-compact-function-grid button {
  min-width: 0;
  padding: 0 2px;
  border: 0;
  color: #101828;
  background: transparent;
}

.vessel-recent-list {
  overflow: hidden;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  background: #fff;
}

.vessel-recent-list button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid #eaecf0;
  color: #101828;
  background: #fff;
  text-align: left;
}

.vessel-recent-list button:last-child {
  border-bottom: 0;
}

.vessel-recent-list > button > i {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 10px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 7px;
  font-style: normal;
}

.vessel-recent-list span {
  min-width: 0;
  flex: 1;
}

.vessel-recent-list b,
.vessel-recent-list small {
  display: block;
}

.vessel-recent-list b {
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-recent-list small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 5.5px;
}

.vessel-recent-list em {
  color: #98a2b3;
  font-size: 12px;
  font-style: normal;
}

.vessel-module-summary {
  margin-bottom: 11px;
  padding: 14px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #2463eb, #174bb8);
  box-shadow: 0 10px 24px rgba(36, 99, 235, 0.14);
}

.vessel-module-summary small,
.vessel-module-summary b,
.vessel-module-summary span {
  display: block;
}

.vessel-module-summary small {
  color: #cfe0ff;
  font-size: 6px;
}

.vessel-module-summary b {
  margin-top: 4px;
  font-size: 13px;
}

.vessel-module-summary span {
  margin-top: 5px;
  color: #dce8ff;
  font-size: 6.5px;
}

.vessel-cargo-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vessel-sheet-backdrop {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: rgba(16, 24, 40, 0.4);
  backdrop-filter: blur(2px);
}

.vessel-sheet {
  width: 100%;
  padding: 9px 15px 22px;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -18px 50px rgba(16, 24, 40, 0.2);
  animation: vessel-sheet-up 0.18s ease-out;
}

@keyframes vessel-sheet-up {
  from { transform: translateY(24px); opacity: 0.75; }
}

.vessel-sheet > i {
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto 13px;
  border-radius: 999px;
  background: #d0d5dd;
}

.vessel-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

.vessel-sheet > header b {
  font-size: 12px;
}

.vessel-sheet > header button {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #667085;
  background: #f2f4f7;
  font-size: 15px;
}

.vessel-sheet-function-grid {
  display: grid;
  row-gap: 15px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vessel-sheet-function-grid button {
  min-width: 0;
  padding: 0;
  border: 0;
  color: #101828;
  background: transparent;
}

.vessel-sheet-function-grid b {
  display: block;
  font-size: 7px;
  white-space: nowrap;
}

.maintenance-create-menu {
  display: grid;
  gap: 8px;
}

.maintenance-create-menu > button {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e7edf4;
  border-radius: 13px;
  color: #101828;
  background: #fff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.maintenance-create-menu i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #175cd3;
  background: #eff6ff;
  font-style: normal;
}

.maintenance-create-menu svg {
  width: 19px;
  height: 19px;
}

.maintenance-create-menu span,
.maintenance-create-menu b,
.maintenance-create-menu small {
  display: block;
  min-width: 0;
}

.maintenance-create-menu b {
  font-size: 8px;
}

.maintenance-create-menu small {
  margin-top: 3px;
  color: #667085;
  font-size: 6px;
}

.maintenance-create-menu em {
  color: #98a2b3;
  font-size: 12px;
  font-style: normal;
}

.maintenance-conditional-field,
.maintenance-record-save-actions .secondary-primary {
  display: none;
}

.maintenance-conditional-field.show {
  display: block;
}

.maintenance-record-save-actions .secondary-primary.show {
  display: block;
  grid-column: 1 / -1;
  color: #175cd3;
  background: #eff6ff;
}

.maintenance-record-save-actions button:nth-child(2) {
  color: #fff;
  background: var(--blue-700);
}

.vessel-sheet-permission > strong {
  display: block;
  color: #175cd3;
  font-size: 11px;
}

.vessel-sheet-permission > p {
  margin: 7px 0 13px;
  color: #667085;
  font-size: 7px;
  line-height: 1.65;
}

.vessel-sheet-permission > div {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.vessel-sheet-permission > div span {
  min-width: 0;
  padding: 9px;
  border-radius: 11px;
  background: #f7faff;
}

.vessel-sheet-permission small,
.vessel-sheet-permission b {
  display: block;
}

.vessel-sheet-permission small {
  color: #98a2b3;
  font-size: 5.5px;
}

.vessel-sheet-permission b {
  margin-top: 3px;
  overflow: hidden;
  font-size: 6.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-sheet-permission-action {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border-radius: 10px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 7px;
  font-weight: 700;
}

.scope-notice b,
.scope-notice span {
  display: block;
}

.scope-notice b {
  color: #175cd3;
  font-size: 9px;
}

.scope-notice span {
  margin-top: 3px;
  color: #667085;
}

.document-view-tabs {
  gap: 4px;
}

.document-view-tabs button {
  padding-inline: 3px;
  font-size: 8px;
}

.document-type-library-entry {
  margin: 11px 0;
}

.document-type-library-entry button {
  display: grid;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #dcecff;
  border-radius: 13px;
  color: #101828;
  background: linear-gradient(135deg, #f7fbff, #eef6ff);
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.document-type-library-entry i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--blue-700);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.document-type-library-entry span,
.document-type-library-entry b,
.document-type-library-entry small {
  display: block;
  min-width: 0;
}

.document-type-library-entry b {
  font-size: 9px;
}

.document-type-library-entry small {
  margin-top: 3px;
  color: #667085;
  font-size: 6px;
}

.document-type-library-entry em {
  color: #175cd3;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.document-filter-bar {
  display: grid;
  gap: 8px;
  margin-bottom: 11px;
  grid-template-columns: 1fr 1fr;
}

.document-filter-bar label > span {
  display: block;
  margin: 0 0 4px 2px;
  color: #667085;
  font-size: 6px;
}

.document-filter-bar select {
  width: 100%;
  height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid #e1e8f0;
  border-radius: 10px;
  color: #344054;
  outline: none;
  background: #fff;
  font-size: 8px;
}

.document-filter-bar select:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px #e4f3ff;
}

.document-type-library-list {
  display: grid;
  gap: 12px;
}

.document-type-library-list section {
  overflow: hidden;
  border: 1px solid #e6edf5;
  border-radius: 13px;
  background: #fff;
}

.document-type-library-list section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  background: #f7faff;
}

.document-type-library-list section > header b {
  font-size: 9px;
}

.document-type-library-list section > header small {
  color: #667085;
  font-size: 7px;
}

.document-type-library-list article {
  display: grid;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border-top: 1px solid #edf1f6;
  grid-template-columns: auto 1fr;
}

.document-type-library-list article i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.document-type-library-list article span,
.document-type-library-list article b,
.document-type-library-list article small,
.document-type-library-list article em {
  display: block;
}

.document-type-library-list article b {
  font-size: 8px;
}

.document-type-library-list article small {
  margin-top: 2px;
  color: #667085;
  font-size: 6px;
}

.document-type-library-list article em {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 5.5px;
  font-style: normal;
}

.voyage-detail-summary.compact {
  padding: 13px 15px;
  border-radius: 15px;
}

.voyage-detail-summary.compact > small {
  font-size: 7px;
}

.voyage-detail-summary.compact h2 {
  margin: 4px 0 2px;
  font-size: 16px;
  line-height: 1.25;
}

.voyage-detail-summary.compact > p {
  font-size: 8px;
}

.voyage-detail-summary.compact footer {
  gap: 6px;
  margin-top: 10px;
}

.voyage-detail-summary.compact footer span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
}

.voyage-detail-summary.compact footer small {
  overflow: hidden;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voyage-detail-summary.compact footer b {
  flex: 0 0 auto;
  margin-top: 0;
  font-size: 9px;
}

.voyage-list-card > span small {
  white-space: normal;
}

/* 统一可读性、触控尺寸与核心页面密度 */
.page-header {
  min-height: 64px;
  padding: 8px 12px;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
}

.page-header > button,
.vessel-compact-header .vessel-header-more,
.vessel-compact-header .vessel-header-grid {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.page-header b {
  font-size: 15px;
}

.page-header small {
  margin-top: 3px;
  color: #667085;
  font-size: 10px;
}

.page-header .header-action {
  min-width: 44px;
  min-height: 40px;
  padding: 0 8px;
  font-size: 11px;
  white-space: nowrap;
}

.app-home-bar small {
  color: #667085;
  font-size: 10px;
}

.app-home-bar b {
  font-size: 14px;
}

.home-section {
  box-shadow: 0 2px 8px rgba(35, 74, 109, 0.055);
}

.section-title b {
  font-size: 15px;
}

.section-title small,
.subsection-title small {
  color: #667085;
  font-size: 10px;
  line-height: 1.4;
}

.section-title button {
  min-height: 36px;
  padding: 7px 4px;
  font-size: 11px;
}

.capability-grid .capability-item {
  min-height: 80px;
  gap: 7px;
}

.capability-grid .capability-icon {
  width: 34px;
  height: 34px;
}

.capability-grid .capability-icon svg {
  width: 20px;
  height: 20px;
}

.capability-grid .capability-label {
  min-height: 27px;
  font-size: 10px;
  line-height: 1.35;
}

.service-grid.capability-grid .capability-item > .capability-label {
  min-height: 27px;
  font-size: 10px;
}

.capability-grid .capability-hint {
  color: #667085;
  font-size: 10px;
}

.workbench-group > header b {
  font-size: 13px;
}

.workbench-group > header small,
.workbench-group > header > em {
  font-size: 10px;
}

.summary-card {
  box-shadow: 0 8px 20px rgba(18, 53, 91, 0.13);
}

.summary-card > small,
.summary-card footer small {
  font-size: 10px;
}

.summary-card > p {
  font-size: 11px;
  line-height: 1.5;
}

.summary-card footer b {
  font-size: 13px;
}

.subsection-title b {
  font-size: 14px;
}

.list-card {
  min-height: 72px;
  padding: 12px;
}

.list-card b {
  font-size: 12px;
}

.list-card p {
  color: #667085;
  font-size: 11px;
}

.list-card small,
.list-card em {
  font-size: 10px;
}

.list-card em.processing {
  color: #175cd3;
  background: #eff8ff;
}

.list-card em.success {
  color: #067647;
  background: #ecfdf3;
}

.simple-panel p,
.authorization-rule p,
.scope-notice span {
  color: #667085;
  font-size: 11px;
}

.authorization-rule b,
.scope-notice b {
  font-size: 12px;
}

.filter-tabs button {
  min-height: 40px;
  padding: 8px 6px;
  font-size: 11px;
}

.bottom-nav button {
  font-size: 10px;
}

.news-list b {
  font-size: 12px;
}

.news-list small {
  color: #667085;
  font-size: 10px;
}

.news-list em.task-status {
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.news-list em.task-status.warning {
  color: #b54708;
  background: #fffaeb;
}

.news-list em.task-status.processing {
  color: #175cd3;
  background: #eff8ff;
}

.news-list em.task-status.success {
  color: #067647;
  background: #ecfdf3;
}

.phone-frame input:not([type="checkbox"]):not([type="radio"]),
.phone-frame select,
.phone-frame textarea {
  min-height: 44px;
  font-size: 12px;
}

.phone-frame textarea {
  padding: 10px;
  line-height: 1.5;
  resize: vertical;
}

.modal-card header h3 {
  font-size: 16px;
}

.modal-card header p {
  font-size: 11px;
}

.modal-close,
.vessel-sheet > header button {
  width: 44px;
  height: 44px;
}

/* 电子单证：首页直接进入列表，筛选与类型库收进工具栏 */
.document-center-body {
  padding-top: 12px;
}

.document-create-action {
  justify-self: end;
  color: #175cd3;
  background: #eff6ff;
}

.document-overview-strip {
  display: grid;
  min-height: 76px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce6f2;
  border-radius: 15px;
  background: #fff;
  grid-template-columns: minmax(0, 1fr) auto;
}

.document-overview-strip > div:first-child small,
.document-overview-strip > div:first-child b {
  display: block;
}

.document-overview-strip > div:first-child small {
  color: #667085;
  font-size: 10px;
}

.document-overview-strip > div:first-child b {
  margin-top: 4px;
  font-size: 15px;
}

.document-overview-stats {
  display: flex;
  gap: 5px;
}

.document-overview-stats span {
  min-width: 43px;
  padding: 6px 7px;
  border-radius: 9px;
  text-align: center;
}

.document-overview-stats small,
.document-overview-stats b {
  display: block;
}

.document-overview-stats small {
  font-size: 9px;
}

.document-overview-stats b {
  margin-top: 2px;
  font-size: 13px;
}

.document-overview-stats .warning {
  color: #b54708;
  background: #fffaeb;
}

.document-overview-stats .processing {
  color: #175cd3;
  background: #eff8ff;
}

.document-overview-stats .success {
  color: #067647;
  background: #ecfdf3;
}

.document-view-tabs {
  margin: 9px 0 8px;
}

.document-view-tabs button {
  font-size: 10px;
}

.document-utility-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 0.8fr 1.2fr;
}

.document-utility-row button {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #dfe6ef;
  border-radius: 11px;
  color: #344054;
  background: #fff;
  font-size: 11px;
  text-align: left;
}

.document-utility-row button.active {
  border-color: #84adff;
  color: #175cd3;
  background: #f5f9ff;
}

.document-utility-row svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #175cd3;
}

.document-utility-row span {
  min-width: 0;
  flex: 1;
}

.document-utility-row em {
  color: #667085;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.document-list-title {
  margin-top: 12px;
}

.document-create-type-list {
  display: grid;
  gap: 8px;
}

.document-create-type-list > button {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e1e8f0;
  border-radius: 12px;
  color: #101828;
  background: #fff;
  grid-template-columns: auto 1fr auto;
  text-align: left;
}

.document-create-type-list > button > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: #175cd3;
  background: #eff6ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.document-create-type-list span,
.document-create-type-list b,
.document-create-type-list small,
.document-create-type-list em {
  display: block;
  min-width: 0;
}

.document-create-type-list b {
  font-size: 12px;
}

.document-create-type-list small,
.document-create-type-list em {
  margin-top: 3px;
  color: #667085;
  font-size: 10px;
  font-style: normal;
}

.document-create-type-list strong {
  color: #175cd3;
  font-size: 10px;
  white-space: nowrap;
}

.document-filter-modal label,
.document-create-form label {
  font-size: 11px;
}

.document-type-library-list section > header b,
.document-type-library-list article b {
  font-size: 12px;
}

.document-type-library-list section > header small,
.document-type-library-list article small {
  font-size: 10px;
}

.document-type-library-list article em {
  color: #667085;
  font-size: 9px;
}

/* 单船工作台与全部功能弹层统一为五列入口 */
.vessel-identity-strip,
.vessel-context-strip {
  min-height: 44px;
  height: auto;
}

.vessel-identity-strip span,
.vessel-identity-strip em,
.vessel-context-strip b,
.vessel-context-strip span {
  font-size: 10px;
}

.vessel-compact-snapshot small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
}

.vessel-compact-snapshot footer b {
  font-size: 11px;
}

.vessel-compact-function-grid,
.vessel-sheet-function-grid {
  gap: 8px 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vessel-compact-function-grid button,
.vessel-sheet-function-grid button {
  min-height: 72px;
  padding: 8px 2px 6px;
  border-radius: 11px;
}

.vessel-compact-function-grid button:hover,
.vessel-sheet-function-grid button:hover {
  background: #f7faff;
}

.vessel-compact-function-grid i,
.vessel-sheet-function-grid i {
  width: 34px;
  height: 34px;
  margin-bottom: 7px;
}

.vessel-compact-function-grid b,
.vessel-sheet-function-grid b {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-compact-function-grid small {
  display: none;
}

.vessel-recent-list button {
  min-height: 64px;
}

.vessel-recent-list b {
  font-size: 11px;
}

.vessel-recent-list small {
  color: #667085;
  font-size: 10px;
}

.vessel-module-summary small,
.vessel-module-summary span {
  font-size: 10px;
}

.vessel-module-summary b {
  font-size: 14px;
}

/* App / Web 原型端切换 */
[hidden] {
  display: none !important;
}

.surface-switcher {
  display: inline-flex !important;
  flex: 0 0 auto;
  gap: 3px !important;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}

.surface-switcher button {
  min-width: 68px;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  color: #b8c8d7;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.surface-switcher button.active {
  color: #fff;
  background: #1689e7;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.18);
}

.document-read-card > span > b {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.document-source-chip {
  display: inline-flex !important;
  align-items: center;
  min-height: 18px;
  margin: 0 !important;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 8px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.document-source-chip.order {
  color: #175cd3 !important;
  background: #eff8ff;
}

.document-source-chip.direct {
  color: #7a5af8 !important;
  background: #f4f3ff;
}

/* Web 业务协同端 */
.web-prototype-stage {
  min-height: calc(100vh - 66px);
  padding: 22px;
  overflow: auto;
  background:
    radial-gradient(circle at 12% 3%, rgba(10, 145, 244, 0.1), transparent 25%),
    #e9eff5;
}

.web-frame {
  display: grid;
  width: min(1480px, 100%);
  min-width: 1080px;
  min-height: calc(100vh - 110px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 18px;
  background: #f5f7fa;
  box-shadow: 0 22px 60px rgba(25, 52, 80, 0.14);
  grid-template-columns: 224px minmax(0, 1fr);
}

.web-sidebar {
  display: flex;
  min-height: 720px;
  flex-direction: column;
  padding: 22px 14px 16px;
  color: #dce9f5;
  background:
    radial-gradient(circle at 18% 92%, rgba(10, 145, 244, 0.16), transparent 31%),
    #10283f;
}

.web-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.web-brand > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #098bf0, #46b8ff);
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
}

.web-brand span,
.web-brand b,
.web-brand small {
  display: block;
}

.web-brand b {
  color: #fff;
  font-size: 13px;
}

.web-brand small {
  margin-top: 3px;
  color: #89a7bf;
  font-size: 10px;
}

.web-sidebar nav {
  display: grid;
  gap: 6px;
  margin-top: 20px;
}

.web-sidebar nav button {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  color: #a9bed0;
  background: transparent;
  font-size: 12px;
  text-align: left;
}

.web-sidebar nav button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.web-sidebar nav button.active,
.web-sidebar nav button:hover {
  color: #fff;
  background: rgba(27, 145, 232, 0.2);
}

.web-sidebar nav button.active {
  box-shadow: inset 3px 0 #36a9fa;
}

.web-sidebar-tip {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(140, 195, 235, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
}

.web-sidebar-tip b {
  display: block;
  color: #fff;
  font-size: 11px;
}

.web-sidebar-tip p {
  margin: 6px 0 0;
  color: #91abc0;
  font-size: 10px;
  line-height: 1.6;
}

.web-main {
  display: grid;
  min-width: 0;
  grid-template-rows: 70px minmax(0, 1fr);
}

.web-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid #e5eaf0;
  background: #fff;
}

.web-topbar > div:first-child b,
.web-topbar > div:first-child small {
  display: block;
}

.web-topbar > div:first-child b {
  color: #17202f;
  font-size: 14px;
}

.web-topbar > div:first-child small {
  margin-top: 3px;
  color: #8490a2;
  font-size: 10px;
}

.web-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.web-top-actions > button,
.web-primary-action {
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #1689e7;
  box-shadow: 0 6px 14px rgba(22, 137, 231, 0.18);
  font-size: 11px;
  font-weight: 700;
}

.web-top-actions label {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 11px;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  background: #fff;
}

.web-top-actions label span {
  color: #8b96a6;
  font-size: 9px;
}

.web-top-actions select {
  max-width: 245px;
  min-height: 30px;
  border: 0;
  outline: 0;
  color: #344054;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}

.web-top-actions > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #175cd3;
  background: #eaf5ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.web-content {
  min-height: 0;
  padding: 25px;
  overflow: auto;
}

.web-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.web-page-heading h1 {
  margin: 0;
  color: #17202f;
  font-size: 22px;
  letter-spacing: -0.3px;
}

.web-page-heading p {
  margin: 6px 0 0;
  color: #7c8798;
  font-size: 11px;
}

.web-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.web-secondary-action {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #d7e0e9;
  border-radius: 8px;
  color: #475467;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
}

.web-hero {
  display: grid;
  min-height: 156px;
  align-items: center;
  gap: 18px;
  padding: 28px 30px;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 0, rgba(89, 195, 255, 0.32), transparent 25%),
    linear-gradient(118deg, #143858, #0e6fb7);
  box-shadow: 0 13px 32px rgba(18, 67, 104, 0.16);
  grid-template-columns: minmax(0, 1fr) repeat(3, 112px);
}

.web-hero > div small,
.web-hero > div h2,
.web-hero > div p {
  display: block;
  margin: 0;
}

.web-hero > div small {
  color: #92d4ff;
  font-size: 10px;
  font-weight: 700;
}

.web-hero > div h2 {
  margin-top: 7px;
  font-size: 20px;
}

.web-hero > div p {
  max-width: 580px;
  margin-top: 9px;
  color: #c3d9ea;
  font-size: 11px;
  line-height: 1.7;
}

.web-hero > span {
  display: grid;
  min-height: 82px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}

.web-hero > span b {
  font-size: 24px;
}

.web-hero > span small {
  margin-top: 5px;
  color: #b9d4e7;
  font-size: 9px;
}

.web-path-grid {
  display: grid;
  gap: 14px;
  margin: 16px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-path-grid article {
  display: grid;
  min-height: 126px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e1e8ef;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(34, 62, 90, 0.045);
  grid-template-columns: 46px minmax(0, 1fr) auto;
}

.web-path-grid article > i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  color: #1689e7;
  background: #ecf7ff;
  font-style: normal;
}

.web-path-grid article:nth-child(2) > i {
  color: #7a5af8;
  background: #f4f3ff;
}

.web-path-grid svg {
  width: 22px;
  height: 22px;
}

.web-path-grid small,
.web-path-grid h3,
.web-path-grid p {
  display: block;
  margin: 0;
}

.web-path-grid small {
  color: #1689e7;
  font-size: 9px;
  font-weight: 700;
}

.web-path-grid h3 {
  margin-top: 5px;
  font-size: 14px;
}

.web-path-grid p {
  margin-top: 6px;
  color: #7b8797;
  font-size: 10px;
  line-height: 1.5;
}

.web-path-grid article > button,
.web-panel > header > button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cfe1f0;
  border-radius: 7px;
  color: #1674bd;
  background: #f5fbff;
  font-size: 10px;
  font-weight: 700;
}

.web-two-column {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-two-column.detail {
  margin-bottom: 16px;
}

.web-panel {
  min-width: 0;
  border: 1px solid #e1e8ef;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(34, 62, 90, 0.04);
}

.web-panel > header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 17px;
  border-bottom: 1px solid #edf1f5;
}

.web-panel > header b,
.web-panel > header small {
  display: block;
}

.web-panel > header b {
  color: #273548;
  font-size: 12px;
}

.web-panel > header small {
  margin-top: 4px;
  color: #8b96a5;
  font-size: 9px;
}

.web-order-mini-list,
.web-document-mini-list {
  display: grid;
  padding: 5px 14px 10px;
}

.web-order-mini-list button,
.web-document-mini-list button {
  display: grid;
  min-height: 59px;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px solid #eef2f6;
  background: transparent;
  text-align: left;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.web-order-mini-list button:last-child,
.web-document-mini-list button:last-child {
  border-bottom: 0;
}

.web-order-mini-list i,
.web-document-mini-list i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: #1689e7;
  background: #edf8ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.web-order-mini-list span b,
.web-order-mini-list span small,
.web-document-mini-list span b,
.web-document-mini-list span small {
  display: block;
}

.web-order-mini-list span b,
.web-document-mini-list span b {
  font-size: 10px;
}

.web-order-mini-list span small,
.web-document-mini-list span small {
  margin-top: 4px;
  color: #8490a1;
  font-size: 9px;
}

.web-order-mini-list em,
.web-document-mini-list em {
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 8px;
  font-style: normal;
}

.web-order-mini-list em.success,
.web-document-mini-list em.success {
  color: #087c58;
  background: #ecfdf3;
}

.web-order-mini-list em.warning,
.web-document-mini-list em.warning {
  color: #b54708;
  background: #fff6ed;
}

.web-order-mini-list em.processing,
.web-document-mini-list em.processing {
  color: #175cd3;
  background: #eff8ff;
}

.web-table-panel {
  overflow: hidden;
}

.web-count {
  padding: 5px 9px;
  border-radius: 6px;
  color: #175cd3;
  background: #eff8ff;
  font-size: 9px;
  font-weight: 700;
}

.web-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.web-table th {
  padding: 11px 14px;
  color: #7d8998;
  background: #f8fafc;
  font-size: 9px;
  font-weight: 600;
  text-align: left;
}

.web-table td {
  height: 68px;
  padding: 10px 14px;
  border-top: 1px solid #edf1f5;
  color: #475467;
  font-size: 9px;
  vertical-align: middle;
}

.web-table tbody tr {
  cursor: pointer;
}

.web-table tbody tr:hover {
  background: #f8fbfe;
}

.web-table td:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.web-table td:first-child > span:last-child {
  min-width: 0;
}

.web-table td b,
.web-table td small {
  display: block;
}

.web-table td b {
  color: #273548;
  font-size: 10px;
}

.web-table td small {
  margin-top: 4px;
  overflow: hidden;
  color: #8490a1;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-type-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: #1689e7;
  background: #edf8ff;
  font-size: 10px;
  font-weight: 800;
}

.web-source-tag,
.web-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.web-source-tag.order {
  color: #175cd3;
  background: #eff8ff;
}

.web-source-tag.direct {
  color: #6941c6;
  background: #f4f3ff;
}

.web-status.success {
  color: #087c58;
  background: #ecfdf3;
}

.web-status.warning {
  color: #b54708;
  background: #fff6ed;
}

.web-status.processing {
  color: #175cd3;
  background: #eff8ff;
}

.web-table-link {
  padding: 5px 0;
  border: 0;
  color: #1689e7;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
}

.web-order-table th:nth-child(1),
.web-order-table td:nth-child(1) {
  width: 16%;
}

.web-order-table th:nth-child(2),
.web-order-table td:nth-child(2) {
  width: 18%;
}

.web-order-table th:nth-child(3),
.web-order-table td:nth-child(3) {
  width: 29%;
}

.web-order-table th:nth-child(4),
.web-order-table td:nth-child(4) {
  width: 10%;
}

.web-order-table th:nth-child(5),
.web-order-table td:nth-child(5) {
  width: 17%;
}

.web-order-table th:nth-child(6),
.web-order-table td:nth-child(6) {
  width: 10%;
}

.web-row-action,
.web-voyage-row-actions button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #cfe1f0;
  border-radius: 7px;
  color: #1674bd;
  background: #f5fbff;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.web-row-action.primary {
  border-color: #1689e7;
  color: #fff;
  background: #1689e7;
}

.web-archive-table th:nth-child(1),
.web-archive-table td:nth-child(1) {
  width: 16%;
}

.web-archive-table th:nth-child(2),
.web-archive-table td:nth-child(2) {
  width: 17%;
}

.web-archive-table th:nth-child(3),
.web-archive-table td:nth-child(3) {
  width: 14%;
}

.web-archive-table th:nth-child(4),
.web-archive-table td:nth-child(4) {
  width: 9%;
}

.web-archive-table th:nth-child(5),
.web-archive-table td:nth-child(5) {
  width: 36%;
}

.web-archive-table th:nth-child(6),
.web-archive-table td:nth-child(6) {
  width: 8%;
}

.web-voyage-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-voyage-row-actions button:hover {
  border-color: #1689e7;
  background: #eaf6ff;
}

.web-back-link {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  color: #667085;
  background: transparent;
  font-size: 10px;
}

.web-order-summary {
  display: grid;
  min-height: 124px;
  align-items: stretch;
  gap: 1px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid #dbe5ee;
  border-radius: 13px;
  background: #e8edf2;
  grid-template-columns: minmax(320px, 1fr) repeat(3, 170px);
}

.web-order-summary > div,
.web-order-summary > span {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  background: #fff;
}

.web-order-summary > div {
  color: #fff;
  background: linear-gradient(125deg, #153a5b, #0e73ba);
}

.web-order-summary small,
.web-order-summary b {
  display: block;
}

.web-order-summary > div small {
  color: #99cfee;
  font-size: 9px;
}

.web-order-summary h2 {
  margin: 7px 0 0;
  font-size: 18px;
}

.web-order-summary p {
  margin: 7px 0 0;
  color: #c4dae8;
  font-size: 10px;
}

.web-order-summary > span small {
  color: #8b96a5;
  font-size: 9px;
}

.web-order-summary > span b {
  margin-top: 7px;
  color: #273548;
  font-size: 12px;
}

.web-order-summary.document {
  grid-template-columns: minmax(320px, 1fr) repeat(3, 170px);
}

.web-detail-grid {
  display: grid;
  gap: 0;
  padding: 10px 17px 17px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-detail-grid span {
  min-height: 60px;
  padding: 13px 10px;
  border-bottom: 1px solid #edf1f5;
}

.web-detail-grid span.wide {
  grid-column: 1 / -1;
}

.web-detail-grid small,
.web-detail-grid b {
  display: block;
}

.web-detail-grid small {
  color: #8b96a5;
  font-size: 8px;
}

.web-detail-grid b {
  margin-top: 6px;
  color: #344054;
  font-size: 10px;
}

.web-participant-list,
.web-collaboration-list {
  display: grid;
  padding: 12px 17px 17px;
}

.web-participant-list span,
.web-collaboration-list span {
  display: grid;
  min-height: 55px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #edf1f5;
  grid-template-columns: 30px minmax(0, 1fr) auto;
}

.web-participant-list span:last-child,
.web-collaboration-list span:last-child {
  border-bottom: 0;
}

.web-participant-list i,
.web-collaboration-list i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #175cd3;
  background: #eff8ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.web-collaboration-list i.done {
  color: #087c58;
  background: #ecfdf3;
}

.web-participant-list b,
.web-collaboration-list b {
  color: #344054;
  font-size: 10px;
}

.web-participant-list small,
.web-collaboration-list small {
  color: #8490a1;
  font-size: 8px;
}

.web-empty {
  display: grid;
  min-height: 160px;
  place-items: center;
  align-content: center;
  color: #667085;
}

.web-empty b {
  font-size: 12px;
}

.web-empty p {
  margin: 7px 0 0;
  color: #98a2b3;
  font-size: 9px;
}

.web-document-source-note {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-document-source-note > span {
  display: grid;
  min-height: 74px;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid #e1e8ef;
  border-radius: 11px;
  background: #fff;
  grid-template-columns: 36px auto;
}

.web-document-source-note i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: #1689e7;
  background: #edf8ff;
  grid-row: span 2;
}

.web-document-source-note svg {
  width: 17px;
  height: 17px;
}

.web-document-source-note b {
  font-size: 10px;
}

.web-document-source-note small {
  color: #8490a1;
  font-size: 9px;
}

.web-list-filters {
  display: flex;
  gap: 4px;
}

.web-list-filters button {
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: #667085;
  background: #f2f4f7;
  font-size: 8px;
}

.web-list-filters button.active {
  color: #175cd3;
  background: #eff8ff;
}

.web-create-source {
  display: grid;
  min-height: 84px;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 15px 18px;
  border: 1px solid #cfe5f5;
  border-radius: 12px;
  background: #f5fbff;
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.web-create-source.direct {
  border-color: #ded9ff;
  background: #faf9ff;
}

.web-create-source > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  color: #1689e7;
  background: #e6f4ff;
  font-style: normal;
}

.web-create-source.direct > i {
  color: #6941c6;
  background: #f0edff;
}

.web-create-source svg {
  width: 19px;
  height: 19px;
}

.web-create-source small,
.web-create-source b,
.web-create-source p {
  display: block;
  margin: 0;
}

.web-create-source small {
  color: #7d8998;
  font-size: 8px;
}

.web-create-source b {
  margin-top: 3px;
  color: #273548;
  font-size: 11px;
}

.web-create-source p {
  margin-top: 4px;
  color: #667085;
  font-size: 9px;
}

.web-create-source > button,
.web-create-source > span {
  padding: 7px 10px;
  border: 1px solid #cfe1f0;
  border-radius: 7px;
  color: #175cd3;
  background: #fff;
  font-size: 9px;
}

.web-create-layout {
  display: grid;
  align-items: start;
  gap: 16px;
  grid-template-columns: 245px minmax(0, 1fr);
}

.web-create-layout.single-document {
  grid-template-columns: minmax(0, 1fr);
}

.web-voyage-form {
  max-width: 920px;
}

.web-template-picker {
  overflow: hidden;
  border: 1px solid #e1e8ef;
  border-radius: 12px;
  background: #fff;
}

.web-template-picker header {
  padding: 15px;
  border-bottom: 1px solid #edf1f5;
}

.web-template-picker header b,
.web-template-picker header small {
  display: block;
}

.web-template-picker header b {
  font-size: 11px;
}

.web-template-picker header small {
  margin-top: 4px;
  color: #8b96a5;
  font-size: 8px;
}

.web-template-picker > button {
  display: grid;
  width: 100%;
  min-height: 55px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid #f0f2f5;
  background: #fff;
  text-align: left;
  grid-template-columns: 30px minmax(0, 1fr);
}

.web-template-picker > button.active {
  background: #f1f8fe;
  box-shadow: inset 3px 0 #1689e7;
}

.web-template-picker > button i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  color: #1689e7;
  background: #edf8ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.web-template-picker > button b,
.web-template-picker > button small {
  display: block;
}

.web-template-picker > button b {
  color: #344054;
  font-size: 9px;
}

.web-template-picker > button small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 8px;
}

.web-form-card {
  overflow: hidden;
  border: 1px solid #e1e8ef;
  border-radius: 12px;
  background: #fff;
}

.web-form-card > header {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f5;
}

.web-form-card > header b,
.web-form-card > header small {
  display: block;
}

.web-form-card > header b {
  font-size: 12px;
}

.web-form-card > header small {
  margin-top: 4px;
  color: #8b96a5;
  font-size: 9px;
}

.web-form-card > header em {
  padding: 5px 8px;
  border-radius: 6px;
  color: #b54708;
  background: #fff6ed;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.web-form-grid {
  display: grid;
  gap: 14px;
  padding: 19px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-form-grid label {
  display: grid;
  gap: 7px;
}

.web-form-grid label.wide {
  grid-column: 1 / -1;
}

.web-form-grid label > span {
  color: #475467;
  font-size: 9px;
  font-weight: 600;
}

.web-form-grid input,
.web-form-grid textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #dce3eb;
  border-radius: 7px;
  outline: 0;
  color: #344054;
  background: #fff;
  font-size: 10px;
  resize: vertical;
}

.web-form-grid input:focus,
.web-form-grid textarea:focus {
  border-color: #65b5ee;
  box-shadow: 0 0 0 3px rgba(22, 137, 231, 0.08);
}

.web-form-grid input:disabled,
.web-form-grid input[readonly] {
  color: #667085;
  background: #f5f7fa;
}

.web-form-card > footer {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 18px;
  border-top: 1px solid #edf1f5;
  background: #fafbfc;
}

.web-form-card > footer span {
  color: #7d8998;
  font-size: 9px;
}

.web-form-card > footer button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #1689e7;
  font-size: 10px;
  font-weight: 700;
}

.web-form-card.supplement {
  max-width: 850px;
}

.web-upload-field button {
  min-height: 70px;
  border: 1px dashed #b9c9d8;
  border-radius: 8px;
  color: #1689e7;
  background: #f8fbfe;
  font-size: 10px;
}

.web-template-groups {
  display: grid;
  align-items: start;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-template-groups article {
  overflow: hidden;
  border: 1px solid #e1e8ef;
  border-radius: 12px;
  background: #fff;
}

.web-template-groups article > header {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: 1px solid #edf1f5;
}

.web-template-groups article > header b {
  font-size: 11px;
}

.web-template-groups article > header small {
  color: #8b96a5;
  font-size: 8px;
}

.web-template-groups article > button {
  display: grid;
  width: 100%;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
  text-align: left;
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

.web-template-groups article > button:hover {
  background: #f8fbfe;
}

.web-template-groups article > button i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  color: #1689e7;
  background: #edf8ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.web-template-groups article > button b,
.web-template-groups article > button small {
  display: block;
}

.web-template-groups article > button b {
  color: #344054;
  font-size: 10px;
}

.web-template-groups article > button small {
  margin-top: 4px;
  color: #8b96a5;
  font-size: 8px;
}

.web-template-groups article > button em {
  color: #1689e7;
  font-size: 8px;
  font-style: normal;
}

@media (max-width: 1120px) {
  .prototype-toolbar {
    gap: 12px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .prototype-toolbar p {
    display: none;
  }

  .web-prototype-stage {
    padding: 12px;
  }
}

.web-template-picker {
  position: sticky;
  top: 0;
}

.web-form-card.standard-editor {
  overflow: visible;
  min-width: 0;
}

.web-standard-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #f7f9fc;
}

.web-standard-summary {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #cfe5f5;
  border-radius: 10px;
  background: #f5fbff;
}

.web-standard-summary > div {
  min-width: 0;
  margin-right: auto;
}

.web-standard-summary b,
.web-standard-summary p {
  display: block;
  margin: 0;
}

.web-standard-summary b {
  color: #175cd3;
  font-size: 11px;
}

.web-standard-summary p {
  margin-top: 4px;
  color: #667085;
  font-size: 8px;
}

.web-standard-summary > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: #667085;
  font-size: 8px;
}

.web-standard-summary > span i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 5px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.web-standard-summary i.m {
  color: #b42318;
  background: #fef3f2;
}

.web-standard-summary i.c {
  color: #b54708;
  background: #fff6ed;
}

.web-standard-summary i.o {
  color: #475467;
  background: #f2f4f7;
}

.web-standard-section,
.web-array-block {
  overflow: hidden;
  border: 1px solid #dfe6ee;
  border-radius: 11px;
  background: #fff;
}

.web-standard-section > header {
  display: flex;
  min-height: 51px;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #edf1f5;
  background: #fcfdfe;
}

.web-standard-section > header b,
.web-standard-section > header small {
  display: block;
}

.web-standard-section > header b {
  color: #344054;
  font-size: 11px;
}

.web-standard-section > header small {
  margin-top: 3px;
  color: #8b96a5;
  font-size: 8px;
}

.web-standard-grid {
  display: grid;
  gap: 14px;
  padding: 15px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.standard-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
}

.standard-field.wide {
  grid-column: 1 / -1;
}

.standard-field-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.standard-field-label > span:first-child {
  min-width: 0;
  margin-right: auto;
}

.standard-field-label b,
.standard-field-label small {
  display: block;
}

.standard-field-label b {
  overflow: hidden;
  color: #344054;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standard-field-label small {
  margin-top: 2px;
  color: #98a2b3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
}

.standard-field-label > em {
  flex: 0 0 auto;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.standard-type-badge {
  color: #175cd3;
  background: #eff8ff;
}

.standard-required-badge.m {
  color: #b42318;
  background: #fef3f2;
}

.standard-required-badge.c {
  color: #b54708;
  background: #fff6ed;
}

.standard-required-badge.o {
  color: #475467;
  background: #f2f4f7;
}

.standard-field input,
.standard-field select,
.standard-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid #d5dee8;
  border-radius: 7px;
  outline: 0;
  color: #344054;
  background: #fff;
  font-size: 9px;
}

.standard-field textarea {
  resize: vertical;
}

.standard-field input[readonly] {
  color: #475467;
  background: #f5f7fa;
}

.standard-field input:focus,
.standard-field select:focus,
.standard-field textarea:focus {
  border-color: #65b5ee;
  box-shadow: 0 0 0 3px rgba(22, 137, 231, 0.08);
}

.standard-field input.invalid,
.standard-field select.invalid,
.standard-field textarea.invalid {
  border-color: #f04438;
  background: #fff8f7;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.08);
}

.web-array-heading {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid #e8edf3;
  background: #f9fbfd;
}

.web-array-heading > div {
  min-width: 0;
}

.web-array-heading .standard-field-label {
  justify-content: flex-start;
}

.web-array-heading .standard-field-label > span:first-child {
  margin-right: 0;
}

.web-array-heading p {
  margin: 5px 0 0;
  color: #7d8998;
  font-size: 8px;
}

.web-array-heading > button,
.web-array-item > header button,
.web-timeline-item > header button,
.web-nested-item > header button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #b9d7ee;
  border-radius: 6px;
  color: #175cd3;
  background: #fff;
  font-size: 8px;
  font-weight: 700;
}

.web-array-list {
  display: grid;
  gap: 12px;
  padding: 13px;
}

.web-array-item,
.web-timeline-item,
.web-nested-item {
  overflow: hidden;
  border: 1px solid #dfe6ee;
  border-radius: 9px;
  background: #fff;
}

.web-array-item > header,
.web-timeline-item > header,
.web-nested-item > header {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 11px;
  border-bottom: 1px solid #edf1f5;
  background: #f8fbfe;
}

.web-array-item > header > div,
.web-timeline-item > header > div,
.web-nested-item > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.web-array-item > header i,
.web-timeline-item > header i,
.web-nested-item > header i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  color: #175cd3;
  background: #e8f4fd;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.web-array-item > header b,
.web-array-item > header small,
.web-timeline-item > header b,
.web-timeline-item > header small,
.web-nested-item > header b,
.web-nested-item > header small {
  display: block;
}

.web-array-item > header b,
.web-timeline-item > header b,
.web-nested-item > header b {
  color: #344054;
  font-size: 9px;
}

.web-array-item > header small,
.web-timeline-item > header small,
.web-nested-item > header small {
  margin-top: 2px;
  color: #98a2b3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
}

.web-array-item > header button,
.web-timeline-item > header button,
.web-nested-item > header button {
  border-color: #f3c7c2;
  color: #b42318;
}

.web-nested-array {
  margin: 0 14px 14px;
  overflow: hidden;
  border: 1px solid #dbe4ec;
  border-radius: 9px;
  background: #f8fafc;
}

.web-nested-item {
  background: #fff;
}

.web-array-item.delivery-group > .web-standard-grid {
  padding-bottom: 10px;
}

.web-standard-grid.discharge-remark {
  padding-top: 0;
}

.web-condition-panel {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #fedf89;
  border-radius: 10px;
  background: #fffcf5;
}

.web-condition-panel > div {
  min-width: 0;
  margin-right: auto;
}

.web-condition-panel b,
.web-condition-panel small {
  display: block;
}

.web-condition-panel b {
  color: #7a2e0e;
  font-size: 9px;
}

.web-condition-panel small {
  margin-top: 3px;
  color: #9c5b26;
  font-size: 8px;
}

.web-condition-panel > label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: #475467;
  font-size: 8px;
}

.web-condition-panel > label input {
  accent-color: #1689e7;
}

.web-condition-panel > i {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 5px;
  color: #b54708;
  background: #fff4e8;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.web-condition-panel.special-toggle .standard-field-label {
  justify-content: flex-start;
}

.web-condition-panel.special-toggle .standard-field-label > span:first-child {
  margin-right: 0;
}

.web-array-block.timeline .web-array-list {
  position: relative;
}

.web-array-block.timeline .web-array-list::before {
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 38px;
  width: 2px;
  background: #cce5f7;
  content: "";
}

.web-timeline-item {
  position: relative;
}

.web-timeline-item.special > header {
  background: #fffbf2;
}

.web-timeline-item.special > header i {
  color: #b54708;
  background: #fff1dc;
}

@media (max-width: 980px) {
  .web-create-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .web-standard-grid {
    grid-template-columns: 1fr;
  }

  .standard-field.wide {
    grid-column: auto;
  }

  .web-standard-summary,
  .web-condition-panel {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* 电子单据编辑区：按现实纸质单据组织，而不是后台卡片表单 */
html,
body {
  overflow-x: hidden;
}

.web-form-card.standard-editor {
  min-width: 0;
  border-color: #cfd5dc;
  background: #e9edf1;
}

.web-prototype-stage {
  overflow-x: hidden;
}

.web-form-card.standard-editor > header,
.web-form-card.standard-editor > footer {
  position: relative;
  z-index: 1;
  background: #fff;
}

.web-standard-form {
  display: block;
  width: calc(100% - 30px);
  min-width: 0;
  max-width: 1080px;
  margin: 18px auto;
  padding: 30px 34px 38px;
  border: 1px solid #c6cbd1;
  background: #fff;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.08);
}

.paper-document-heading {
  position: relative;
  min-height: 105px;
  padding: 18px 150px 17px;
  border-bottom: 2px solid #27313d;
  text-align: center;
}

.paper-document-heading h2,
.paper-document-heading p {
  margin: 0;
}

.paper-document-heading h2 {
  color: #111827;
  font-family: "Songti SC", SimSun, serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 8px;
}

.paper-document-heading p {
  margin-top: 8px;
  color: #667085;
  font-size: 8px;
  letter-spacing: 2px;
}

.paper-standard-code {
  position: absolute;
  top: 20px;
  left: 0;
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
}

.paper-requirement-legend {
  position: absolute;
  right: 0;
  bottom: 18px;
  display: flex;
  gap: 8px;
}

.paper-requirement-legend span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #667085;
  font-size: 7px;
}

.paper-requirement-legend i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #98a2b3;
  border-radius: 50%;
  color: #344054;
  font-style: normal;
  font-weight: 800;
}

.web-standard-form > .web-standard-section,
.web-standard-form > .web-array-block {
  margin-top: -1px;
}

.web-standard-form .web-standard-section,
.web-standard-form .web-array-block {
  overflow: visible;
  border-color: #65707d;
  border-radius: 0;
}

.web-standard-form .web-standard-section > header,
.web-standard-form .web-array-heading {
  min-height: 42px;
  padding: 7px 10px;
  border-bottom-color: #65707d;
  background: #eef1f4;
}

.web-standard-form .web-standard-section > header b,
.web-standard-form .web-array-heading .standard-label-title {
  color: #1f2937;
  font-family: "Songti SC", SimSun, serif;
  font-size: 10px;
}

.web-standard-form .web-standard-section > header small,
.web-standard-form .web-array-heading p {
  color: #667085;
  font-size: 7px;
}

.web-standard-form .web-standard-grid {
  gap: 0;
  padding: 0;
}

.web-standard-form .standard-field {
  min-height: 70px;
  padding: 8px 10px;
  border-right: 1px solid #9aa2ac;
  border-bottom: 1px solid #9aa2ac;
}

.web-standard-form .standard-field:nth-child(even) {
  border-right: 0;
}

.web-standard-form .standard-field.wide {
  border-right: 0;
}

.web-standard-form .web-standard-grid > .standard-field:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.web-standard-form .web-standard-grid > .standard-field.wide:last-child {
  border-bottom: 0;
}

.web-standard-form .standard-field-label b {
  color: #202b37;
  font-family: "Songti SC", SimSun, serif;
  font-size: 9px;
}

.web-standard-form .standard-field-label small {
  color: #8a919b;
  font-size: 6.5px;
}

.web-standard-form .standard-field-label > em {
  padding: 2px 4px;
  border-radius: 2px;
  background: transparent;
  font-size: 6.5px;
}

.web-standard-form .standard-type-badge {
  color: #667085;
  border: 1px solid #d0d5dd;
}

.web-standard-form .standard-required-badge.m {
  color: #b42318;
}

.web-standard-form .standard-required-badge.c {
  color: #b54708;
}

.web-standard-form .standard-required-badge.o {
  color: #667085;
}

.web-standard-form .standard-field input,
.web-standard-form .standard-field select,
.web-standard-form .standard-field textarea {
  min-height: 30px;
  padding: 5px 2px;
  border: 0;
  border-bottom: 1px dashed #a7adb5;
  border-radius: 0;
  background: transparent;
  font-size: 9px;
}

.web-standard-form .standard-field input[readonly] {
  color: #667085;
  background: #f2f6f9;
  cursor: not-allowed;
}

.web-standard-form .standard-field input:focus,
.web-standard-form .standard-field select:focus,
.web-standard-form .standard-field textarea:focus {
  border-bottom-color: #1689e7;
  box-shadow: inset 0 -2px rgba(22, 137, 231, 0.12);
}

.web-standard-form .web-condition-panel {
  min-height: 48px;
  margin: 10px 0;
  padding: 7px 10px;
  border: 1px dashed #c58a46;
  border-radius: 0;
  background: #fffcf5;
}

.web-standard-form .web-condition-panel b {
  font-family: "Songti SC", SimSun, serif;
}

.web-standard-form .web-array-heading > button {
  border-color: #65707d;
  border-radius: 2px;
  color: #25313e;
  background: #fff;
}

.paper-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  background: #fff;
}

.paper-detail-block,
.paper-delivery-groups,
.paper-delivery-group {
  min-width: 0;
}

.paper-data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
}

.paper-data-table th,
.paper-data-table td {
  padding: 0;
  border-right: 1px solid #65707d;
  border-bottom: 1px solid #65707d;
  vertical-align: middle;
}

.paper-data-table th:last-child,
.paper-data-table td:last-child {
  border-right: 0;
}

.paper-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.paper-data-table th {
  height: 54px;
  padding: 6px;
  color: #303b47;
  background: #f5f6f7;
  font-family: "Songti SC", SimSun, serif;
  font-size: 8px;
  font-weight: 600;
  text-align: center;
}

.paper-data-table td {
  min-height: 54px;
  background: #fff;
}

.paper-column-label b,
.paper-column-label small {
  display: block;
}

.paper-column-label b {
  font-size: 8px;
}

.paper-column-label small {
  margin-top: 3px;
  color: #7d8590;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6px;
  font-weight: 400;
}

.paper-column-label i {
  font-style: normal;
  font-weight: 800;
}

.paper-column-label i.m {
  color: #b42318;
}

.paper-column-label i.c {
  color: #b54708;
}

.paper-column-label i.o {
  color: #667085;
}

.paper-table-control {
  display: block;
  width: 100%;
  height: 100%;
}

.paper-table-control input,
.paper-table-control select,
.paper-table-control textarea {
  width: 100%;
  min-height: 52px;
  padding: 7px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #25313e;
  background: transparent;
  font-size: 8px;
}

.paper-table-control textarea {
  resize: vertical;
}

.paper-table-control input:focus,
.paper-table-control select:focus,
.paper-table-control textarea:focus {
  background: #f0f8ff;
  box-shadow: inset 0 0 0 2px #65b5ee;
}

.paper-table-control input.invalid,
.paper-table-control select.invalid,
.paper-table-control textarea.invalid {
  background: #fff2f1;
  box-shadow: inset 0 0 0 2px #f04438;
}

.paper-row-number {
  width: 42px;
  color: #475467;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  text-align: center;
}

.paper-row-action {
  width: 52px;
  text-align: center;
}

.paper-row-action button,
.paper-delivery-group > header button {
  min-height: 26px;
  padding: 0 7px;
  border: 0;
  color: #b42318;
  background: transparent;
  font-size: 7px;
}

.waybill-cargo-table th:nth-child(1),
.waybill-cargo-table td:nth-child(1),
.waybill-cargo-table th:nth-child(8),
.waybill-cargo-table td:nth-child(8) {
  width: 48px;
}

.waybill-cargo-table th:nth-child(2) {
  width: 130px;
}

.waybill-cargo-table th:nth-child(3),
.waybill-cargo-table th:nth-child(7) {
  width: 105px;
}

.waybill-cargo-table th:nth-child(4) {
  width: 150px;
}

.waybill-cargo-table th:nth-child(5),
.waybill-cargo-table th:nth-child(6) {
  width: 120px;
}

.paper-delivery-groups {
  background: #fff;
}

.paper-delivery-group {
  border-bottom: 2px solid #65707d;
}

.paper-delivery-group:last-child {
  border-bottom: 0;
}

.paper-delivery-group > header {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 1px solid #65707d;
  background: #f7f4ed;
}

.paper-delivery-group > header b,
.paper-delivery-group > header small {
  display: block;
}

.paper-delivery-group > header b {
  color: #28323e;
  font-family: "Songti SC", SimSun, serif;
  font-size: 9px;
}

.paper-delivery-group > header small {
  margin-top: 2px;
  color: #7d8590;
  font-size: 6.5px;
}

.paper-delivery-group .web-nested-array {
  margin: -1px 0 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid #65707d;
  border-radius: 0;
}

.paper-delivery-group .discharge-remark {
  border-top: 1px solid #65707d;
}

.delivery-item-table {
  min-width: 1260px;
}

.delivery-item-table th:nth-child(1),
.delivery-item-table td:nth-child(1),
.delivery-item-table th:nth-child(10),
.delivery-item-table td:nth-child(10) {
  width: 46px;
}

.delivery-item-table th:nth-child(2) {
  width: 165px;
}

.delivery-item-table th:nth-child(3) {
  width: 135px;
}

.delivery-item-table th:nth-child(4),
.delivery-item-table th:nth-child(5) {
  width: 105px;
}

.delivery-item-table th:nth-child(6),
.delivery-item-table th:nth-child(9) {
  width: 140px;
}

.delivery-item-table th:nth-child(7) {
  width: 120px;
}

.delivery-item-table th:nth-child(8) {
  width: 170px;
}

.sof-time-table {
  min-width: 700px;
}

.sof-time-table th:nth-child(1),
.sof-time-table td:nth-child(1),
.sof-time-table th:nth-child(5),
.sof-time-table td:nth-child(5) {
  width: 50px;
}

.sof-time-table th:nth-child(2),
.sof-time-table th:nth-child(3) {
  width: 180px;
}

.sof-time-table th:nth-child(4) {
  width: auto;
}

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

.web-archive-rule {
  display: grid;
  min-height: 112px;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid #cfe3f2;
  border-radius: 14px;
  background: linear-gradient(120deg, #f4faff, #fff);
  grid-template-columns: 48px minmax(0, 1fr) repeat(3, 92px);
}

.web-archive-rule > i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  color: #1677c8;
  background: #e5f4ff;
}

.web-archive-rule > i svg {
  width: 23px;
  height: 23px;
}

.web-archive-rule > div b,
.web-archive-rule > div p,
.web-archive-rule > span small,
.web-archive-rule > span b {
  display: block;
  margin: 0;
}

.web-archive-rule > div b {
  color: #1d3951;
  font-size: 13px;
}

.web-archive-rule > div p {
  max-width: 620px;
  margin-top: 6px;
  color: #667b8f;
  font-size: 10px;
  line-height: 1.65;
}

.web-archive-rule > span {
  padding: 13px 10px;
  border-left: 1px solid #e0eaf2;
  text-align: center;
}

.web-archive-rule > span small {
  color: #8293a3;
  font-size: 8px;
}

.web-archive-rule > span b {
  margin-top: 5px;
  color: #173c5c;
  font-size: 20px;
}

.web-type-icon.archive {
  color: #0f6fb6;
  background: #e7f5ff;
}

.web-archive-actions {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.web-archive-actions button {
  display: grid;
  min-height: 82px;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid #dce6ee;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  grid-template-columns: 38px minmax(0, 1fr);
}

.web-archive-actions button:hover {
  border-color: #9fd2f4;
  background: #f7fcff;
}

.web-archive-actions button > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: #1677c8;
  background: #eaf6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.web-archive-actions button b,
.web-archive-actions button small {
  display: block;
}

.web-archive-actions button b {
  color: #263b4d;
  font-size: 10px;
}

.web-archive-actions button small {
  margin-top: 4px;
  color: #7f8e9c;
  font-size: 8px;
}

.web-template-lock {
  margin: 12px;
  padding: 12px;
  border: 1px dashed #cfdbe5;
  border-radius: 9px;
  background: #f8fafc;
}

.web-template-lock b,
.web-template-lock p {
  display: block;
  margin: 0;
}

.web-template-lock b {
  color: #475467;
  font-size: 9px;
}

.web-template-lock p {
  margin-top: 5px;
  color: #8492a0;
  font-size: 8px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .web-standard-form {
    width: calc(100% - 18px);
    padding: 22px 18px 28px;
  }

  .paper-document-heading {
    padding-right: 80px;
    padding-left: 80px;
  }

  .paper-requirement-legend {
    display: none;
  }

  .web-standard-form .web-standard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-standard-form .standard-field.wide {
    grid-column: 1 / -1;
  }
}

/* 登录、注册、实名认证与企业入驻 */

.prototype-toolbar .auth-entry-button {
  min-width: 100px;
  min-height: 40px;
  border-color: #1f74da;
  color: #fff;
  background: #2563eb;
  box-shadow: 0 5px 13px rgba(37, 99, 235, 0.18);
  font-size: 11px;
  font-weight: 750;
}

.prototype-toolbar .auth-entry-button:hover {
  border-color: #175cd3;
  background: #175cd3;
}

.surface-switcher[hidden] {
  display: none !important;
}

.phone-frame.entry-flow .phone-screen {
  padding-bottom: 0;
  background: #f4f7fb;
}

.phone-frame.entry-flow .status-bar {
  background: #0878d1;
}

.entry-page {
  min-height: 830px;
  background:
    radial-gradient(circle at 105% 38%, rgba(25, 151, 242, 0.06), transparent 26%),
    #f4f7fb;
}

.entry-hero {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  padding: 14px 20px 45px;
  color: #fff;
  background:
    radial-gradient(circle at 83% 4%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 8% 118%, rgba(77, 208, 196, 0.22), transparent 38%),
    linear-gradient(145deg, #075fab 0%, #0788e7 55%, #16a2ef 100%);
}

.entry-hero::before,
.entry-hero::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  content: "";
}

.entry-hero::before {
  top: -82px;
  right: -60px;
  width: 230px;
  height: 230px;
}

.entry-hero::after {
  right: 40px;
  bottom: -115px;
  width: 190px;
  height: 190px;
}

.entry-back,
.entry-back-placeholder {
  position: relative;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
}

.entry-back {
  padding: 0 2px 3px 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
  font-size: 28px;
  line-height: 1;
}

.entry-brand {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.entry-brand > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 15px;
  font-style: normal;
  font-weight: 850;
}

.entry-brand span,
.entry-brand small,
.entry-brand b {
  display: block;
}

.entry-brand small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.entry-brand b {
  margin-top: 2px;
  font-size: 11px;
}

.entry-heading {
  position: relative;
  z-index: 2;
  margin-top: 13px;
}

.entry-heading em {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #dff4ff;
  background: rgba(1, 57, 109, 0.12);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.entry-heading h1 {
  margin: 9px 0 0;
  font-size: 24px;
  line-height: 1.24;
  letter-spacing: -0.025em;
}

.entry-heading p {
  max-width: 330px;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  line-height: 1.65;
}

.entry-body {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 12px;
  margin-top: -25px;
  padding: 0 14px 30px;
}

.entry-card,
.application-card,
.application-process,
.prototype-state-preview,
.settings-account-card,
.settings-menu,
.settings-context-note,
.identity-result-card {
  border: 1px solid rgba(218, 228, 238, 0.92);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(35, 71, 106, 0.08);
}

.entry-card {
  padding: 17px;
}

.login-card {
  padding-top: 10px;
}

.entry-tabs {
  display: grid;
  gap: 5px;
  margin-bottom: 15px;
  padding: 4px;
  border-radius: 12px;
  background: #f2f5f8;
  grid-template-columns: 1fr 1fr;
}

.entry-tabs button {
  min-height: 39px;
  border: 0;
  border-radius: 9px;
  color: #7a8797;
  background: transparent;
  font-size: 10px;
  font-weight: 650;
}

.entry-tabs button.active {
  color: #126fc2;
  background: #fff;
  box-shadow: 0 3px 11px rgba(40, 79, 117, 0.1);
}

.entry-form {
  display: grid;
  gap: 12px;
}

.entry-form.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entry-form label {
  display: block;
  min-width: 0;
  color: #344054;
  font-size: 9px;
  font-weight: 700;
}

.entry-form label.wide {
  grid-column: 1 / -1;
}

.entry-form label > span,
.entry-form label > small {
  display: block;
}

.entry-form label > span {
  margin-bottom: 6px;
}

.entry-form label > small {
  margin-top: 5px;
  color: #98a2b3;
  font-size: 7px;
  font-weight: 500;
  line-height: 1.5;
}

.entry-input {
  display: flex;
  min-height: 45px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dce4ed;
  border-radius: 11px;
  background: #fbfcfe;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entry-input:focus-within {
  border-color: #4ba8ec;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 145, 244, 0.1);
}

.entry-input > i {
  padding-left: 12px;
  color: #667085;
  font-size: 9px;
  font-style: normal;
}

.entry-input input,
.entry-input select,
.entry-input textarea {
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  outline: 0;
  color: #1d2939;
  background: transparent;
  font-size: 10px;
  font-weight: 550;
}

.entry-input select {
  height: 43px;
}

.entry-input.textarea {
  align-items: stretch;
}

.entry-input textarea {
  min-height: 72px;
  padding-top: 11px;
  padding-bottom: 11px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.55;
}

.entry-input > button {
  min-width: 84px;
  min-height: 43px;
  padding: 0 11px;
  border: 0;
  border-left: 1px solid #e5eaf0;
  color: #0878d1;
  background: #f4f9fe;
  font-size: 8px;
  font-weight: 700;
}

.entry-between {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #667085;
  font-size: 8px;
}

.entry-between label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.entry-between button {
  min-height: 38px;
  padding: 0;
  border: 0;
  color: #1678ca;
  background: transparent;
  font-size: 8px;
}

.entry-primary,
.entry-secondary {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 750;
}

.entry-primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #087bd8, #139cf0);
  box-shadow: 0 8px 18px rgba(8, 123, 216, 0.2);
}

.entry-secondary {
  border: 1px solid #badcf6;
  color: #0878d1;
  background: #f4faff;
}

.entry-secondary.wide {
  display: block;
}

.entry-divider {
  position: relative;
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  font-size: 8px;
}

.entry-divider::before,
.entry-divider::after {
  width: 48px;
  height: 1px;
  margin: 0 10px;
  background: #dfe6ed;
  content: "";
}

.entry-path-grid {
  display: grid;
  gap: 9px;
}

.entry-path-card,
.entry-helper button {
  display: grid;
  width: 100%;
  min-height: 68px;
  align-items: center;
  gap: 11px;
  text-align: left;
}

.entry-path-card {
  padding: 11px 12px;
  border: 1px solid #dce8f2;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(35, 71, 106, 0.05);
  grid-template-columns: 42px 1fr auto;
}

.entry-path-card > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

.entry-path-card.person > i {
  color: #1673c4;
  background: #eaf5ff;
}

.entry-path-card.company {
  border-color: #b9ddf7;
  background: linear-gradient(100deg, #fff, #f6fbff);
}

.entry-path-card.company > i {
  color: #067766;
  background: #e8f8f3;
}

.entry-path-card span,
.entry-path-card b,
.entry-path-card small,
.entry-helper span,
.entry-helper b,
.entry-helper small {
  display: block;
  min-width: 0;
}

.entry-path-card b {
  color: #1d2939;
  font-size: 11px;
}

.entry-path-card small {
  margin-top: 4px;
  color: #7d8998;
  font-size: 8px;
  line-height: 1.45;
}

.entry-path-card > em {
  color: #5b92bf;
  font-size: 18px;
  font-style: normal;
}

.entry-helper {
  overflow: hidden;
  border: 1px solid #e3e9f0;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.7);
}

.entry-helper button {
  min-height: 59px;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid #edf1f5;
  color: #344054;
  background: transparent;
  grid-template-columns: 1fr auto;
}

.entry-helper button:first-child {
  border-top: 0;
}

.entry-helper b {
  font-size: 9px;
}

.entry-helper small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 7px;
}

.entry-helper em {
  color: #1579ca;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.entry-agreement {
  margin: 0;
  color: #98a2b3;
  font-size: 7px;
  line-height: 1.6;
  text-align: center;
}

.entry-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.entry-section-title.sub {
  margin-top: 19px;
}

.entry-section-title span,
.entry-section-title small,
.entry-section-title b {
  display: block;
}

.entry-section-title small {
  color: #2f8bd1;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.entry-section-title b {
  margin-top: 4px;
  color: #1d2939;
  font-size: 13px;
}

.entry-section-title > em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  color: #667085;
  background: #f2f4f7;
  font-size: 7px;
  font-style: normal;
}

.entry-check {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: 8px;
  margin: 11px 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: #667085;
  background: #f7f9fb;
  font-size: 8px;
  line-height: 1.55;
}

.entry-check input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: #0789e7;
}

.entry-rule-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border: 1px solid #d6e7f5;
  border-radius: 14px;
  color: #355269;
  background: #f2f9fe;
}

.entry-rule-note.compact {
  margin-top: 12px;
  padding: 10px;
}

.entry-rule-note > i {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2398df;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.entry-rule-note p,
.entry-rule-note b,
.entry-rule-note span {
  display: block;
  margin: 0;
}

.entry-rule-note b {
  font-size: 9px;
}

.entry-rule-note span {
  margin-top: 3px;
  color: #718397;
  font-size: 7px;
  line-height: 1.55;
}

.entry-success-card {
  padding: 23px 18px;
  border: 1px solid #cdeadd;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f3fcf8);
  box-shadow: 0 10px 28px rgba(35, 71, 106, 0.06);
  text-align: center;
}

.entry-success-card > i,
.identity-result-card > i {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #16a673;
  box-shadow: 0 8px 20px rgba(22, 166, 115, 0.2);
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
}

.entry-success-card.pending {
  border-color: #f0dfb5;
  background: linear-gradient(145deg, #fff, #fffaf0);
}

.entry-success-card.pending > i,
.entry-success-card.prerequisite > i {
  background: #e59a28;
  box-shadow: 0 8px 20px rgba(229, 154, 40, 0.18);
}

.entry-success-card h2 {
  margin: 12px 0 0;
  color: #172b3e;
  font-size: 15px;
}

.entry-success-card p {
  margin: 6px auto 0;
  color: #718096;
  font-size: 8px;
  line-height: 1.7;
}

.relationship-card {
  overflow: hidden;
}

.relationship-card > span {
  display: grid;
  min-height: 61px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid #edf1f5;
  grid-template-columns: 30px 1fr auto;
}

.relationship-card > span:first-child {
  border-top: 0;
}

.relationship-card > span > i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #1676c8;
  background: #eaf5ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.relationship-card b,
.relationship-card small {
  display: block;
}

.relationship-card b {
  color: #344054;
  font-size: 9px;
}

.relationship-card small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 7px;
  line-height: 1.4;
}

.relationship-card em {
  color: #16865f;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.relationship-card em.warning,
.relationship-card em.pending {
  color: #c77816;
}

.entry-actions,
.onboarding-actions {
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr 1.35fr;
}

.entry-actions button,
.onboarding-actions button {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 750;
}

.entry-actions button:first-child,
.onboarding-actions button:first-child {
  color: #667085;
  background: #e9eef3;
}

.entry-actions button:last-child,
.onboarding-actions button:last-child {
  color: #fff;
  background: linear-gradient(135deg, #087bd8, #139cf0);
  box-shadow: 0 8px 18px rgba(8, 123, 216, 0.18);
}

.onboarding-stepper {
  position: relative;
  display: grid;
  padding: 12px 10px 10px;
  border: 1px solid #e1e8ef;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 18px rgba(35, 71, 106, 0.05);
  grid-template-columns: repeat(4, 1fr);
}

.onboarding-stepper::before {
  position: absolute;
  top: 25px;
  right: 48px;
  left: 48px;
  height: 1px;
  background: #dce4eb;
  content: "";
}

.onboarding-stepper span {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #98a2b3;
}

.onboarding-stepper i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #e4e9ef;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 0 0 1px #dce4eb;
}

.onboarding-stepper small {
  font-size: 7px;
}

.onboarding-stepper span.active,
.onboarding-stepper span.done {
  color: #0878d1;
  font-weight: 750;
}

.onboarding-stepper span.active i,
.onboarding-stepper span.done i {
  color: #fff;
  background: #0b8ee6;
  box-shadow: 0 0 0 1px #0b8ee6;
}

.onboarding-actions {
  margin-top: 15px;
}

.account-detection,
.rejection-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0;
  padding: 10px 11px;
  border-radius: 12px;
}

.account-detection {
  color: #37604f;
  background: #edf9f4;
}

.account-detection > i,
.rejection-banner > i {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.account-detection > i {
  background: #1eaa78;
}

.account-detection b,
.account-detection small,
.rejection-banner b,
.rejection-banner small {
  display: block;
}

.account-detection b,
.rejection-banner b {
  font-size: 8px;
}

.account-detection small,
.rejection-banner small {
  margin-top: 3px;
  font-size: 7px;
  line-height: 1.5;
}

.rejection-banner {
  margin: 0;
  border: 1px solid #f3cccc;
  color: #8c3434;
  background: #fff3f3;
}

.rejection-banner > i {
  background: #e3515d;
}

.entry-upload {
  display: grid;
  width: 100%;
  min-height: 70px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px dashed #9ac9ea;
  border-radius: 13px;
  color: #344054;
  background: #f7fbff;
  text-align: left;
  grid-template-columns: 36px 1fr auto;
}

.entry-upload.uploaded {
  border-style: solid;
  border-color: #9edabe;
  background: #f2fbf7;
}

.entry-upload > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  color: #1476c6;
  background: #e6f3fd;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
}

.entry-upload.uploaded > i {
  color: #16865f;
  background: #dff5ea;
}

.entry-upload span,
.entry-upload b,
.entry-upload small {
  display: block;
  min-width: 0;
}

.entry-upload b {
  font-size: 9px;
}

.entry-upload small {
  margin-top: 3px;
  color: #8491a1;
  font-size: 7px;
  line-height: 1.45;
}

.entry-upload > em {
  color: #1676c8;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.business-type-grid {
  display: grid;
  gap: 8px;
}

.business-type-grid button {
  display: grid;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e2e8ef;
  border-radius: 12px;
  color: #344054;
  background: #fbfcfd;
  text-align: left;
  grid-template-columns: 32px 1fr auto;
}

.business-type-grid button.selected {
  border-color: #8bc8f2;
  background: #f2f9ff;
}

.business-type-grid i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: #1676c8;
  background: #e6f3fd;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.business-type-grid b,
.business-type-grid small {
  display: block;
}

.business-type-grid b {
  font-size: 9px;
}

.business-type-grid small {
  margin-top: 2px;
  color: #98a2b3;
  font-size: 7px;
}

.business-type-grid em {
  color: #1476c6;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}

.review-summary {
  display: grid;
  overflow: hidden;
  border: 1px solid #e3e9ef;
  border-radius: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-summary > span {
  min-width: 0;
  padding: 10px;
  border-top: 1px solid #edf1f5;
  border-left: 1px solid #edf1f5;
}

.review-summary > span:nth-child(-n + 2),
.review-summary > span:first-child {
  border-top: 0;
}

.review-summary > span:nth-child(odd),
.review-summary > span.wide {
  border-left: 0;
}

.review-summary > span.wide {
  grid-column: 1 / -1;
}

.review-summary small,
.review-summary b {
  display: block;
}

.review-summary small {
  color: #98a2b3;
  font-size: 7px;
}

.review-summary b {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #344054;
  font-size: 8px;
  line-height: 1.4;
}

.relationship-preview {
  display: grid;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 12px 8px;
  border-radius: 13px;
  background: #f5f8fb;
  grid-template-columns: 1fr 13px 1fr 13px 1fr;
}

.relationship-preview > span {
  min-width: 0;
  text-align: center;
}

.relationship-preview i,
.relationship-preview b,
.relationship-preview em {
  display: block;
}

.relationship-preview i {
  display: grid;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  place-items: center;
  border-radius: 9px;
  color: #1676c8;
  background: #e3f2fd;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.relationship-preview b {
  margin-top: 5px;
  color: #344054;
  font-size: 7px;
  line-height: 1.35;
}

.relationship-preview em {
  margin-top: 3px;
  color: #8794a3;
  font-size: 6px;
  font-style: normal;
  line-height: 1.3;
}

.relationship-preview > u {
  height: 1px;
  background: #a9cce5;
  text-decoration: none;
}

.application-page-body,
.settings-page-body,
.identity-page-body {
  display: grid;
  gap: 12px;
}

.application-card {
  padding: 15px;
}

.application-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.application-card header span,
.application-card header small,
.application-card header h2,
.application-card header p {
  display: block;
  min-width: 0;
  margin: 0;
}

.application-card header > span > small {
  color: #2a84ca;
  font-size: 7px;
  font-weight: 750;
}

.application-card header h2 {
  margin-top: 4px;
  color: #1d2939;
  font-size: 13px;
  line-height: 1.4;
}

.application-card header p {
  margin-top: 4px;
  color: #98a2b3;
  font-size: 7px;
}

.application-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.application-status.pending {
  color: #b46b0c;
  background: #fff4da;
}

.application-status.rejected {
  color: #c23c49;
  background: #ffeaec;
}

.application-status.approved {
  color: #087a55;
  background: #ddf6eb;
}

.application-facts {
  display: grid;
  overflow: hidden;
  margin-top: 13px;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-facts span {
  min-width: 0;
  padding: 9px;
  border-top: 1px solid #edf1f5;
  border-left: 1px solid #edf1f5;
}

.application-facts span:nth-child(-n + 2) {
  border-top: 0;
}

.application-facts span:nth-child(odd) {
  border-left: 0;
}

.application-facts small,
.application-facts b {
  display: block;
}

.application-facts small {
  color: #98a2b3;
  font-size: 7px;
}

.application-facts b {
  margin-top: 4px;
  color: #344054;
  font-size: 8px;
  line-height: 1.4;
}

.application-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0;
  padding: 11px;
  border-radius: 12px;
}

.application-message.pending {
  color: #81530f;
  background: #fff7e8;
}

.application-message.rejected {
  color: #913b43;
  background: #fff0f1;
}

.application-message.approved {
  color: #17634b;
  background: #ebf9f3;
}

.application-message > i {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: currentColor;
  background: rgba(255, 255, 255, 0.75);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.application-message b,
.application-message small {
  display: block;
}

.application-message b {
  font-size: 8px;
}

.application-message small {
  margin-top: 4px;
  opacity: 0.78;
  font-size: 7px;
  line-height: 1.55;
}

.application-process {
  padding: 14px;
}

.application-process h3 {
  margin: 0 0 8px;
  font-size: 10px;
}

.application-process > span {
  display: grid;
  min-height: 51px;
  align-items: center;
  gap: 9px;
  border-top: 1px solid #edf1f5;
  grid-template-columns: 29px 1fr;
}

.application-process > span:nth-child(2) {
  border-top: 0;
}

.application-process > span > i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  color: #1676c8;
  background: #eaf5ff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.application-process b,
.application-process small {
  display: block;
}

.application-process b {
  font-size: 8px;
}

.application-process small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 7px;
}

.prototype-state-preview {
  padding: 12px;
  border-style: dashed;
  box-shadow: none;
}

.prototype-state-preview header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.prototype-state-preview header b {
  font-size: 8px;
}

.prototype-state-preview header small {
  color: #98a2b3;
  font-size: 6px;
}

.prototype-state-preview > div {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  padding: 3px;
  border-radius: 9px;
  background: #f2f4f7;
  grid-template-columns: repeat(3, 1fr);
}

.prototype-state-preview button {
  min-height: 33px;
  border: 0;
  border-radius: 7px;
  color: #667085;
  background: transparent;
  font-size: 7px;
}

.prototype-state-preview button.active {
  color: #1676c8;
  background: #fff;
  box-shadow: 0 2px 8px rgba(35, 71, 106, 0.09);
  font-weight: 750;
}

.settings-account-card {
  display: grid;
  min-height: 89px;
  align-items: center;
  gap: 11px;
  padding: 14px;
  grid-template-columns: 48px 1fr auto;
}

.settings-account-card > i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #087bd8, #36acf2);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

.settings-account-card small,
.settings-account-card h2,
.settings-account-card p {
  display: block;
  margin: 0;
}

.settings-account-card small {
  color: #2b82c6;
  font-size: 7px;
}

.settings-account-card h2 {
  margin-top: 3px;
  font-size: 13px;
}

.settings-account-card p {
  margin-top: 4px;
  color: #8491a1;
  font-size: 7px;
}

.settings-account-card > em {
  padding: 4px 7px;
  border-radius: 999px;
  color: #087a55;
  background: #e3f7ee;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}

.settings-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 3px 2px -3px;
}

.settings-section-title b {
  font-size: 10px;
}

.settings-section-title small {
  color: #98a2b3;
  font-size: 7px;
}

.settings-menu {
  overflow: hidden;
}

.settings-menu button {
  display: grid;
  width: 100%;
  min-height: 63px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid #edf1f5;
  color: #344054;
  background: #fff;
  text-align: left;
  grid-template-columns: 35px 1fr auto;
}

.settings-menu button:first-child {
  border-top: 0;
}

.settings-menu button > i {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 10px;
  color: #1676c8;
  background: #eaf5ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.settings-menu b,
.settings-menu small {
  display: block;
}

.settings-menu b {
  font-size: 9px;
}

.settings-menu small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 7px;
  line-height: 1.4;
}

.settings-menu em {
  color: #5484aa;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.settings-context-note {
  padding: 13px;
}

.settings-context-note b,
.settings-context-note p,
.settings-context-note small {
  display: block;
  margin: 0;
}

.settings-context-note b {
  color: #667085;
  font-size: 7px;
}

.settings-context-note p {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
}

.settings-context-note small {
  margin-top: 5px;
  color: #98a2b3;
  font-size: 7px;
  line-height: 1.5;
}

.settings-logout {
  min-height: 46px;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  color: #c2444f;
  background: #fff;
  font-size: 9px;
  font-weight: 700;
}

.identity-result-card {
  padding: 22px 16px;
  text-align: center;
}

.identity-result-card > small,
.identity-result-card h2,
.identity-result-card p,
.identity-result-card em {
  display: block;
  margin: 0;
}

.identity-result-card > small {
  margin-top: 11px;
  color: #16865f;
  font-size: 7px;
  font-weight: 750;
}

.identity-result-card h2 {
  margin-top: 4px;
  font-size: 14px;
}

.identity-result-card p {
  margin-top: 5px;
  color: #7d8998;
  font-size: 8px;
}

.identity-result-card em {
  width: max-content;
  margin: 10px auto 0;
  padding: 4px 8px;
  border-radius: 999px;
  color: #087a55;
  background: #e3f7ee;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 620px) {
  .entry-page {
    min-height: calc(100vh - 34px);
  }

  .entry-body {
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 370px) {
  .entry-hero {
    padding-right: 15px;
    padding-left: 15px;
  }

  .entry-brand {
    right: 15px;
  }

  .entry-body {
    padding-right: 10px;
    padding-left: 10px;
  }

  .entry-card {
    padding: 14px;
  }

  .entry-form.two-column {
    grid-template-columns: 1fr;
  }

  .entry-form label.wide {
    grid-column: auto;
  }

  .relationship-preview {
    grid-template-columns: 1fr;
  }

  .relationship-preview > u {
    width: 1px;
    height: 10px;
    margin: 0 auto;
  }
}

/* 账号注册与登录后业务认证：与 App 内部工作台统一视觉 */

.phone-frame.entry-flow .status-bar {
  color: #344054;
  background: var(--canvas);
}

.entry-page {
  min-height: 735px;
  color: #101828;
  background: var(--canvas);
}

.entry-hero {
  min-height: 0;
  overflow: visible;
  padding: 8px 16px 18px;
  color: #101828;
  background: var(--canvas);
}

.entry-hero::before,
.entry-hero::after {
  display: none;
}

.entry-app-bar {
  display: grid;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.entry-back,
.entry-back-placeholder,
.entry-bar-spacer {
  position: static;
  z-index: auto;
  width: 44px;
  height: 44px;
}

.entry-back {
  padding: 0 2px 3px 0;
  border: 0;
  border-radius: 12px;
  color: #344054;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  font-size: 28px;
}

.entry-brand {
  position: static;
  z-index: auto;
  justify-self: center;
  gap: 9px;
}

.entry-brand > i {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--blue-700);
  font-size: 13px;
}

.entry-brand small {
  color: #667085;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.entry-brand b {
  margin-top: 2px;
  overflow: hidden;
  max-width: 190px;
  color: #101828;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-heading {
  margin-top: 19px;
}

.entry-heading em {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--blue-700);
  background: transparent;
  font-size: 10px;
  letter-spacing: 0;
}

.entry-heading h1 {
  margin-top: 5px;
  color: #101828;
  font-size: 22px;
  line-height: 1.3;
}

.entry-heading p {
  max-width: none;
  margin-top: 5px;
  color: #667085;
  font-size: 10px;
  line-height: 1.55;
}

.entry-body {
  position: static;
  z-index: auto;
  gap: 12px;
  margin-top: 0;
  padding: 0 14px 30px;
}

.entry-card,
.application-card,
.application-process,
.prototype-state-preview,
.settings-account-card,
.settings-menu,
.settings-context-note,
.identity-result-card,
.role-selection-panel,
.selected-role-summary,
.role-selection-empty,
.role-result-card,
.registration-callout {
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.entry-card {
  padding: 14px;
}

.login-card {
  padding-top: 8px;
}

.entry-tabs {
  margin-bottom: 14px;
  background: #f2f4f7;
}

.entry-tabs button {
  min-height: 40px;
  color: #667085;
  font-size: 11px;
}

.entry-tabs button.active {
  color: var(--blue-700);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.entry-form {
  gap: 13px;
}

.entry-form label {
  color: #344054;
  font-size: 11px;
}

.entry-form label > span {
  margin-bottom: 7px;
}

.entry-form label > small {
  color: #667085;
  font-size: 9px;
}

.entry-input {
  min-height: 46px;
  border-color: #d0d5dd;
  border-radius: 12px;
  background: #fff;
}

.entry-input input,
.entry-input select,
.entry-input textarea {
  color: #101828;
  font-size: 12px;
}

.entry-input > i {
  color: #667085;
  font-size: 10px;
}

.entry-input > button {
  min-height: 44px;
  color: var(--blue-700);
  background: #f8faff;
  font-size: 10px;
}

.entry-between {
  min-height: 42px;
  color: #667085;
  font-size: 10px;
}

.entry-between button {
  font-size: 10px;
}

.entry-primary,
.entry-secondary {
  min-height: 46px;
  border-radius: 12px;
  font-size: 11px;
}

.entry-primary {
  background: var(--blue-700);
  box-shadow: none;
}

.entry-primary:hover {
  background: var(--blue-800);
}

.entry-primary[aria-disabled="true"] {
  color: #98a2b3;
  background: #e4e7ec;
}

.entry-section-title {
  margin-bottom: 14px;
}

.entry-section-title small {
  color: var(--blue-700);
  font-size: 9px;
  letter-spacing: 0;
}

.entry-section-title b {
  margin-top: 4px;
  font-size: 14px;
}

.entry-section-title > em {
  color: #667085;
  font-size: 9px;
}

.entry-check {
  color: #667085;
  background: #f9fafb;
  font-size: 10px;
}

.entry-rule-note {
  border-color: #dbeafe;
  color: #344054;
  background: #f5f9ff;
}

.entry-rule-note > i {
  color: var(--blue-700);
  background: #dbeafe;
}

.entry-rule-note b {
  font-size: 10px;
}

.entry-rule-note span {
  color: #667085;
  font-size: 9px;
}

.entry-upload {
  min-height: 72px;
  border-color: #b8cdf0;
  background: #f8faff;
}

.entry-upload.uploaded {
  border-color: #a9dfc7;
  background: #f4fbf7;
}

.entry-upload b {
  font-size: 11px;
}

.entry-upload small,
.entry-upload > em {
  font-size: 9px;
}

.entry-success-card {
  border-color: #bfe8d5;
  background: #fff;
  box-shadow: none;
}

.entry-success-card.pending {
  border-color: #f0d99e;
  background: #fff;
}

.entry-success-card > i,
.identity-result-card > i {
  box-shadow: none;
}

.entry-success-card h2 {
  font-size: 16px;
}

.entry-success-card p {
  color: #667085;
  font-size: 10px;
}

.entry-actions button,
.onboarding-actions button {
  min-height: 46px;
  font-size: 11px;
}

.entry-actions button:last-child,
.onboarding-actions button:last-child {
  background: var(--blue-700);
  box-shadow: none;
}

.registration-callout {
  display: grid;
  min-height: 98px;
  align-items: center;
  gap: 10px;
  padding: 13px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.registration-callout > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.registration-callout span,
.registration-callout b,
.registration-callout small {
  display: block;
  min-width: 0;
}

.registration-callout b {
  font-size: 12px;
}

.registration-callout small {
  margin-top: 4px;
  color: #667085;
  font-size: 9px;
  line-height: 1.45;
}

.registration-callout > button {
  min-height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--blue-700);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.entry-helper {
  border-color: #eaecf0;
  border-radius: 16px;
  background: #fff;
}

.entry-helper button {
  min-height: 62px;
}

.entry-helper b {
  color: #344054;
  font-size: 10px;
}

.entry-helper small,
.entry-helper em,
.entry-agreement {
  font-size: 9px;
}

.role-selection-panel {
  padding: 14px;
}

.registration-role-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.registration-role-grid > button {
  display: grid;
  min-width: 0;
  min-height: 118px;
  align-content: start;
  gap: 8px;
  padding: 11px;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  color: #101828;
  background: #fff;
  text-align: left;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
}

.registration-role-grid > button:hover {
  background: #f9fbff;
}

.registration-role-grid > button.selected {
  border-color: #84adff;
  background: #f5f8ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.registration-role-grid > button > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.registration-role-grid span,
.registration-role-grid b,
.registration-role-grid small {
  display: block;
  min-width: 0;
}

.registration-role-grid b {
  padding-top: 2px;
  font-size: 11px;
}

.registration-role-grid small {
  grid-column: auto;
  margin-top: 6px;
  color: #667085;
  font-size: 9px;
  line-height: 1.5;
}

.registration-role-grid > button > span {
  display: block;
}

.registration-role-grid > button > em {
  padding-top: 7px;
  color: #98a2b3;
  font-size: 13px;
  font-style: normal;
}

.registration-role-grid > button.selected > em {
  color: var(--blue-700);
  font-weight: 800;
}

.subject-mode-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subject-mode-grid > button {
  display: grid;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid #d0d5dd;
  border-radius: 14px;
  color: #101828;
  background: #fff;
  text-align: left;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
}

.subject-mode-grid > button.selected {
  border-color: #84adff;
  background: #f5f8ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.subject-mode-grid i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.subject-mode-grid b,
.subject-mode-grid small {
  display: block;
}

.subject-mode-grid b {
  font-size: 10px;
}

.subject-mode-grid small {
  margin-top: 4px;
  color: #667085;
  font-size: 8px;
  line-height: 1.4;
}

.subject-mode-grid em {
  color: var(--blue-700);
  font-size: 11px;
  font-style: normal;
}

.compact-success {
  min-height: 0;
  padding: 14px;
}

.base-onboarding-menu {
  margin-top: 8px;
}

.selected-role-summary,
.role-selection-empty {
  display: grid;
  min-height: 76px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.selected-role-summary > i,
.role-selection-empty > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.selected-role-summary small,
.selected-role-summary b,
.selected-role-summary p,
.role-selection-empty b,
.role-selection-empty small {
  display: block;
  margin: 0;
}

.selected-role-summary small {
  color: var(--blue-700);
  font-size: 8px;
  font-weight: 750;
}

.selected-role-summary b,
.role-selection-empty b {
  margin-top: 2px;
  font-size: 11px;
}

.selected-role-summary p,
.role-selection-empty small {
  margin-top: 3px;
  color: #667085;
  font-size: 9px;
  line-height: 1.45;
}

.selected-role-summary > em {
  color: var(--blue-700);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.role-selection-empty {
  grid-template-columns: 38px 1fr;
}

.role-registration-stepper {
  position: relative;
  display: grid;
  padding: 11px 10px 9px;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
  grid-template-columns: repeat(3, 1fr);
}

.role-registration-stepper::before {
  position: absolute;
  top: 24px;
  right: 64px;
  left: 64px;
  height: 1px;
  background: #d0d5dd;
  content: "";
}

.role-registration-stepper span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #98a2b3;
}

.role-registration-stepper i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #e4e7ec;
  box-shadow: 0 0 0 1px #d0d5dd;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.role-registration-stepper small {
  font-size: 9px;
}

.role-registration-stepper span.active,
.role-registration-stepper span.done {
  color: var(--blue-700);
  font-weight: 750;
}

.role-registration-stepper span.active i,
.role-registration-stepper span.done i {
  color: #fff;
  background: var(--blue-700);
  box-shadow: 0 0 0 1px var(--blue-700);
}

.role-result-card {
  overflow: hidden;
}

.role-result-card > span {
  display: grid;
  min-height: 66px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-top: 1px solid #eaecf0;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.role-result-card > span:first-child {
  border-top: 0;
}

.role-result-card > span > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.role-result-card b,
.role-result-card small {
  display: block;
}

.role-result-card b {
  font-size: 11px;
}

.role-result-card small {
  margin-top: 4px;
  color: #667085;
  font-size: 9px;
}

.role-result-card em {
  color: #087a55;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.onboarding-stepper {
  border-color: #eaecf0;
  background: #fff;
  box-shadow: none;
}

.onboarding-stepper small {
  font-size: 9px;
}

.account-detection,
.rejection-banner {
  border: 1px solid transparent;
}

.business-type-grid button {
  min-height: 64px;
  background: #fff;
}

.business-type-grid b {
  font-size: 11px;
}

.business-type-grid small,
.business-type-grid em {
  font-size: 9px;
}

@media (max-width: 370px) {
  .entry-brand b {
    max-width: 140px;
  }

  .registration-callout {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .registration-callout > button {
    grid-column: 1 / -1;
  }

  .registration-role-grid {
    grid-template-columns: 1fr;
  }

  .registration-role-grid > button {
    min-height: 96px;
  }
}

/* 登录与基础注册：浅海蓝品牌头部与轻量悬浮表单 */

.auth-simple-page {
  min-height: 735px;
  background: linear-gradient(180deg, #e2edfb 0, #edf1f6 38%, #edf1f6 100%);
}

.auth-simple-header {
  position: relative;
  min-height: 176px;
  overflow: hidden;
  padding: 12px 20px 42px;
  border: 0;
  background: var(--home-hero-bg);
}

.phone-frame.auth-simple-active .status-bar {
  color: #fff;
  background: transparent;
}

.phone-frame.auth-simple-active .auth-simple-header {
  min-height: 210px;
  margin-top: -37px;
  padding-top: 49px;
}

.phone-frame.auth-simple-active .auth-simple-header.has-back,
.phone-frame.auth-simple-active .account-register-page .auth-simple-header {
  min-height: 243px;
}

.auth-simple-header::before,
.auth-simple-header::after {
  position: absolute;
  display: none;
  content: '';
  pointer-events: none;
}

.auth-simple-header::before {
  top: -72px;
  right: -54px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(42, 104, 232, 0.065);
  border-radius: 50%;
}

.auth-simple-header::after {
  right: -25px;
  bottom: 16px;
  width: 150px;
  height: 42px;
  border-top: 1px solid rgba(42, 104, 232, 0.11);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.auth-simple-bar {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 44px;
  align-items: center;
}

.auth-simple-bar > button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0 2px 3px 0;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: #344054;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 18px rgba(39, 78, 125, 0.08);
  font-size: 26px;
  backdrop-filter: blur(8px);
}

.auth-simple-bar > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-simple-brand > span,
.auth-simple-brand b,
.auth-simple-brand small {
  display: block;
  min-width: 0;
}

.auth-simple-bar i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #3475f4, #245ee5);
  box-shadow: 0 7px 16px rgba(42, 104, 232, 0.2);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.auth-simple-bar b {
  color: #27364c;
  font-size: 11px;
  line-height: 1.25;
}

.auth-simple-bar small {
  margin-top: 3px;
  color: #7b8ba3;
  font-size: 6px;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
}

.auth-simple-heading {
  position: relative;
  z-index: 1;
  margin: 24px 0 0 3px;
}

.auth-login-page .auth-simple-heading {
  margin-top: 24px;
}

.account-register-page .auth-simple-heading {
  margin-top: 18px;
}

.auth-simple-heading h1,
.auth-simple-heading p,
.auth-simple-heading > small {
  margin: 0;
}

.auth-simple-heading > small {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.auth-simple-heading h1 {
  color: #fff;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -0.035em;
}

.auth-simple-heading p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  line-height: 1.5;
}

.auth-simple-body {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 540px;
  margin-top: -84px;
  padding: 0 14px 28px;
}

.auth-simple-body > .entry-card {
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(47, 80, 120, 0.11);
}

.auth-simple-body > .login-card {
  padding-top: 12px;
}

.auth-simple-body .entry-tabs {
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid #edf1f6;
  border-radius: 13px;
  background: #f1f4f8;
}

.auth-simple-body .entry-tabs button {
  min-height: 38px;
  border-radius: 10px;
  font-size: 10px;
}

.auth-simple-body .entry-tabs button.active {
  color: #245fe8;
  box-shadow: 0 5px 15px rgba(38, 80, 133, 0.1);
}

.auth-simple-body .entry-form {
  gap: 14px;
}

.auth-simple-body .entry-form label {
  color: #34445c;
  font-size: 10px;
}

.auth-simple-body .entry-form label > span {
  margin-bottom: 7px;
}

.auth-simple-body .entry-input {
  min-height: 49px;
  border-color: #e0e6ee;
  border-radius: 13px;
  background: #f8fafc;
}

.auth-simple-body .entry-input:focus-within {
  border-color: #78a7ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(42, 104, 232, 0.09);
}

.auth-simple-body .entry-input input {
  font-size: 11px;
}

.auth-simple-body .entry-input > button {
  min-height: 47px;
  color: #245fe8;
  background: #f3f7ff;
  font-size: 9px;
}

.auth-simple-body .entry-between {
  min-height: 40px;
  color: #75839a;
}

.auth-simple-body .entry-between button {
  color: #2464e8;
}

.auth-simple-body .entry-primary {
  min-height: 49px;
  margin-top: 3px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3475f4, #245ee5);
  box-shadow: 0 10px 22px rgba(42, 104, 232, 0.23);
  font-size: 11px;
}

.auth-simple-body .entry-check {
  min-height: 44px;
  margin: 2px 0 0;
  padding: 9px 10px;
  border-radius: 12px;
  color: #687891;
  background: #f7f9fc;
}

.auth-card-footer {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 13px;
  border: 0;
  color: #75839a;
  font-size: 10px;
}

.auth-card-footer button {
  padding: 0;
  border: 0;
  color: var(--blue-700);
  background: transparent;
  font-size: 10px;
  font-weight: 750;
}

.auth-demo-link {
  width: max-content;
  min-height: 40px;
  margin: 0 auto;
  padding: 0 10px;
  border: 0;
  color: #65758c;
  background: transparent;
  font-size: 10px;
}

.auth-demo-link em {
  color: #98a2b3;
  font-style: normal;
}

.auth-flow-note {
  margin: 10px 2px 0;
  color: #667085;
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

.auth-simple-body .entry-agreement {
  align-self: end;
  margin: 0 0 4px;
  color: #9aa7b8;
  text-align: center;
}

.account-register-page .auth-simple-header {
  min-height: 243px;
}

.account-register-page .auth-simple-body {
  min-height: 545px;
}

@media (max-width: 370px) {
  .auth-simple-header {
    padding-right: 16px;
    padding-left: 16px;
  }

  .auth-simple-bar small {
    display: none;
  }

  .auth-simple-body {
    padding-right: 10px;
    padding-left: 10px;
  }
}

/* 注册并登录后的基础账号首页与身份入口 */

.base-account-home .home-content {
  display: grid;
  gap: 12px;
}

.base-welcome-card {
  padding: 18px 16px;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
}

.base-welcome-card small,
.base-welcome-card h1,
.base-welcome-card p {
  display: block;
  margin: 0;
}

.base-welcome-card small {
  color: #087a55;
  font-size: 9px;
  font-weight: 750;
}

.base-welcome-card h1 {
  margin-top: 7px;
  color: #101828;
  font-size: 18px;
  line-height: 1.35;
}

.base-welcome-card p {
  margin-top: 5px;
  color: #667085;
  font-size: 10px;
  line-height: 1.5;
}

.base-start-panel {
  margin: 0;
}

.base-start-panel .section-title {
  margin-bottom: 8px;
}

.base-onboarding-menu {
  margin-top: 0;
}

.base-account-note {
  margin: 0;
  color: #98a2b3;
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

.base-identity-panel {
  margin: 0;
}

.base-identity-panel .section-title {
  margin-bottom: 9px;
}

.base-identity-list {
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 14px;
}

.base-identity-list > button {
  display: grid;
  width: 100%;
  min-height: 68px;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid #f0f1f3;
  color: #344054;
  background: #fff;
  text-align: left;
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.base-identity-list > button:last-child {
  border-bottom: 0;
}

.base-identity-list > button > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  grid-row: 1 / span 2;
}

.base-identity-list span,
.base-identity-list b,
.base-identity-list small {
  display: block;
  min-width: 0;
}

.base-identity-list b {
  font-size: 11px;
}

.base-identity-list small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 9px;
}

.base-identity-list > button > em {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.base-identity-list > button > em.draft {
  color: #b54708;
  background: #fff4e5;
}

.base-identity-list > button > em.pending {
  color: #175cd3;
  background: #eff6ff;
}

.base-identity-list > button > em.rejected {
  color: #b42318;
  background: #fef3f2;
}

.base-identity-list > button > em.active {
  color: #087a55;
  background: #ecfdf3;
}

.base-identity-list > button > strong {
  color: var(--blue-700);
  font-size: 8px;
  font-weight: 750;
  grid-column: 3;
  grid-row: 2;
}

.base-add-identity {
  width: 100%;
  min-height: 42px;
  margin-top: 9px;
  border: 1px dashed #b8cdf0;
  border-radius: 12px;
  color: var(--blue-700);
  background: #f8faff;
  font-size: 10px;
  font-weight: 750;
}

.base-identity-empty {
  padding: 22px 16px 18px;
  border: 1px dashed #cfd8e6;
  border-radius: 14px;
  text-align: center;
}

.base-identity-empty > i {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.base-identity-empty h2 {
  margin: 10px 0 0;
  color: #344054;
  font-size: 13px;
}

.base-identity-empty p {
  margin: 6px auto 0;
  max-width: 270px;
  color: #667085;
  font-size: 9px;
  line-height: 1.55;
}

.base-identity-empty button {
  min-width: 126px;
  min-height: 40px;
  margin-top: 13px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--blue-700);
  font-size: 10px;
  font-weight: 750;
}

.simple-role-register {
  display: grid;
  gap: 12px;
}

.role-account-strip {
  display: grid;
  min-height: 64px;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #eaecf0;
  border-radius: 14px;
  background: #fff;
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.role-account-strip > i,
.simple-role-list > button > i {
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eff6ff;
  font-style: normal;
  font-weight: 800;
}

.role-account-strip > i {
  width: 36px;
  height: 36px;
  font-size: 10px;
}

.role-account-strip span,
.role-account-strip b,
.role-account-strip small {
  display: block;
  min-width: 0;
}

.role-account-strip b {
  color: #344054;
  font-size: 11px;
}

.role-account-strip small {
  margin-top: 3px;
  color: #667085;
  font-size: 9px;
}

.role-account-strip > em {
  color: #087a55;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.simple-role-list {
  overflow: hidden;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  background: #fff;
}

.simple-role-list > button {
  display: grid;
  width: 100%;
  min-height: 62px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid #f0f1f3;
  color: #101828;
  background: #fff;
  text-align: left;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
}

.simple-role-list > button:last-child {
  border-bottom: 0;
}

.simple-role-list > button > i {
  width: 36px;
  height: 36px;
  font-size: 10px;
}

.simple-role-list span,
.simple-role-list b,
.simple-role-list small {
  display: block;
  min-width: 0;
}

.simple-role-list b {
  color: #344054;
  font-size: 11px;
}

.simple-role-list small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 9px;
}

.simple-role-list > button > em {
  color: #98a2b3;
  font-size: 16px;
  font-style: normal;
}

.simple-role-note {
  margin: 0 4px;
  color: #98a2b3;
  font-size: 9px;
  line-height: 1.55;
  text-align: center;
}

/* 快速身份切换与身份认证管理 */

.identity-switch-manage {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed #b8cdf0;
  border-radius: 13px;
  color: #344054;
  background: #f8faff;
  text-align: left;
}

.identity-switch-manage span,
.identity-switch-manage b,
.identity-switch-manage small {
  display: block;
}

.identity-switch-manage b {
  color: var(--blue-700);
  font-size: 10px;
}

.identity-switch-manage small {
  margin-top: 3px;
  color: #667085;
  font-size: 8px;
}

.identity-switch-manage > em {
  color: var(--blue-700);
  font-size: 16px;
  font-style: normal;
}

.identity-management-body {
  display: grid;
  gap: 12px;
}

.identity-personal-row,
.identity-management-section {
  border: 1px solid #eaecf0;
  border-radius: 15px;
  background: #fff;
}

.identity-personal-row {
  display: grid;
  min-height: 70px;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.identity-personal-row > i,
.identity-management-list > button > i {
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-700);
  background: #eff6ff;
  font-style: normal;
  font-weight: 800;
}

.identity-personal-row > i {
  width: 38px;
  height: 38px;
  font-size: 10px;
  grid-row: 1 / span 2;
}

.identity-personal-row span,
.identity-personal-row b,
.identity-personal-row small {
  display: block;
  min-width: 0;
}

.identity-personal-row b {
  color: #344054;
  font-size: 11px;
}

.identity-personal-row small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 8px;
}

.identity-personal-row > em,
.identity-management-list > button > em {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.identity-personal-row > em.active,
.identity-management-list > button > em.active {
  color: #087a55;
  background: #ecfdf3;
}

.identity-personal-row > em.draft,
.identity-management-list > button > em.draft {
  color: #b54708;
  background: #fff4e5;
}

.identity-management-list > button > em.pending {
  color: #175cd3;
  background: #eff6ff;
}

.identity-management-list > button > em.rejected {
  color: #b42318;
  background: #fef3f2;
}

.identity-personal-row > button {
  padding: 0;
  border: 0;
  color: var(--blue-700);
  background: transparent;
  font-size: 8px;
  font-weight: 750;
  grid-column: 3;
}

.identity-management-section {
  overflow: hidden;
}

.identity-management-section > header {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid #f0f1f3;
}

.identity-management-section > header b {
  color: #344054;
  font-size: 11px;
}

.identity-management-section > header small {
  color: #98a2b3;
  font-size: 8px;
}

.identity-management-list > button {
  display: grid;
  width: 100%;
  min-height: 66px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #f0f1f3;
  color: #344054;
  background: #fff;
  text-align: left;
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.identity-management-list > button:last-child {
  border-bottom: 0;
}

.identity-management-list > button > i {
  width: 36px;
  height: 36px;
  font-size: 9px;
  grid-row: 1 / span 2;
}

.identity-management-list span,
.identity-management-list b,
.identity-management-list small {
  display: block;
  min-width: 0;
}

.identity-management-list b {
  font-size: 10px;
}

.identity-management-list small {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 8px;
}

.identity-management-list > button > strong {
  color: var(--blue-700);
  font-size: 8px;
  font-weight: 750;
  grid-column: 3;
  grid-row: 2;
}

.identity-management-empty {
  padding: 16px 13px;
  color: #98a2b3;
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

.identity-management-add {
  min-height: 44px;
  border: 1px solid #b8cdf0;
  border-radius: 12px;
  color: var(--blue-700);
  background: #f8faff;
  font-size: 10px;
  font-weight: 750;
}

.identity-management-note {
  margin: -3px 8px 0;
  color: #98a2b3;
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
}

/* 简洁认证进度：与角色首页统一的卡片语言 */

.application-progress-body {
  display: grid;
  gap: 12px;
}

.application-overview-simple,
.application-detail-simple {
  border: 1px solid #eaecf0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.05);
}

.application-overview-simple {
  padding: 16px;
}

.application-overview-simple > header {
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.application-overview-simple > header > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.application-overview-simple > header span,
.application-overview-simple > header b,
.application-overview-simple > header small {
  display: block;
  min-width: 0;
}

.application-overview-simple > header b {
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-overview-simple > header small {
  margin-top: 4px;
  color: #667085;
  font-size: 9px;
}

.application-overview-simple > header > em {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.application-overview-simple > header > em.pending {
  color: #175cd3;
  background: #eff6ff;
}

.application-overview-simple > header > em.rejected {
  color: #b42318;
  background: #fef3f2;
}

.application-overview-simple > header > em.approved {
  color: #087a55;
  background: #ecfdf3;
}

.application-progress-steps {
  display: grid;
  align-items: start;
  margin: 20px 4px 18px;
  grid-template-columns: auto minmax(20px, 1fr) auto minmax(20px, 1fr) auto;
}

.application-progress-steps > span {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #98a2b3;
}

.application-progress-steps > span > i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid #d0d5dd;
  border-radius: 50%;
  background: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.application-progress-steps > span > small {
  font-size: 8px;
  white-space: nowrap;
}

.application-progress-steps > u {
  height: 2px;
  margin-top: 11px;
  background: #e4e7ec;
  text-decoration: none;
}

.application-progress-steps > span.done,
.application-progress-steps > span.active {
  color: var(--blue-700);
}

.application-progress-steps > span.done > i,
.application-progress-steps > span.active > i {
  border-color: var(--blue-700);
}

.application-progress-steps > span.done > i {
  color: #fff;
  background: var(--blue-700);
}

.application-progress-steps > span.error {
  color: #b42318;
}

.application-progress-steps > span.error > i {
  border-color: #f04438;
  color: #fff;
  background: #f04438;
}

.application-status-simple {
  display: grid;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  grid-template-columns: 32px minmax(0, 1fr);
}

.application-status-simple > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.application-status-simple span,
.application-status-simple b,
.application-status-simple small {
  display: block;
}

.application-status-simple b {
  color: #344054;
  font-size: 10px;
}

.application-status-simple small {
  margin-top: 4px;
  color: #667085;
  font-size: 8px;
  line-height: 1.45;
}

.application-status-simple.pending {
  background: #f5f9ff;
}

.application-status-simple.pending > i {
  color: #175cd3;
  background: #dbeafe;
}

.application-status-simple.rejected {
  background: #fff6f5;
}

.application-status-simple.rejected > i {
  color: #b42318;
  background: #fee4e2;
}

.application-status-simple.approved {
  background: #f2fbf6;
}

.application-status-simple.approved > i {
  color: #087a55;
  background: #d1fadf;
}

.application-primary-action {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--blue-700);
  font-size: 10px;
  font-weight: 750;
}

.application-detail-simple {
  overflow: hidden;
}

.application-detail-simple > header {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  border-bottom: 1px solid #f0f1f3;
}

.application-detail-simple > header b {
  color: #344054;
  font-size: 11px;
}

.application-detail-simple > header button {
  padding: 0;
  border: 0;
  color: var(--blue-700);
  background: transparent;
  font-size: 8px;
}

.application-detail-simple > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-detail-simple > div > span {
  min-height: 58px;
  padding: 11px 13px;
  border-right: 1px solid #f0f1f3;
  border-bottom: 1px solid #f0f1f3;
}

.application-detail-simple > div > span:nth-child(2n) {
  border-right: 0;
}

.application-detail-simple > div > span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.application-detail-simple small,
.application-detail-simple b {
  display: block;
}

.application-detail-simple small {
  color: #98a2b3;
  font-size: 8px;
}

.application-detail-simple b {
  margin-top: 5px;
  color: #344054;
  font-size: 9px;
}

.application-progress-note {
  margin: -2px 0 0;
  color: #98a2b3;
  font-size: 8px;
  text-align: center;
}

/* 选择认证身份：简洁分组办理入口 */

.certification-role-body {
  gap: 15px;
}

.certification-role-group > header {
  min-height: 30px;
  padding: 0 3px;
}

.certification-role-group > header b {
  color: #344054;
  font-size: 11px;
}

.certification-role-list {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.04);
}

.certification-role-list > button {
  min-height: 70px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.certification-role-list > button > em {
  min-width: 52px;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--blue-700);
  background: #eff6ff;
  font-size: 8px;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

/* 游客模式：公开浏览、延迟登录与三 Tab 入口 */

.guest-home-page {
  min-height: 735px;
  background: #f4f7fb;
}

.phone-frame.guest-home-active .status-bar {
  color: #fff;
  background: transparent;
}

.phone-frame.guest-public-home-active .status-bar {
  color: #fff;
}

.phone-frame.guest-home-active .guest-home-hero {
  min-height: 0;
  margin-top: -37px;
  padding: 53px 16px 44px;
}

.phone-frame.guest-public-home-active .guest-home-hero {
  height: 225px;
  min-height: 225px;
  padding-bottom: 124px;
}

.phone-frame.guest-home-active .guest-home-page:not(.natural-person-home) .guest-home-hero {
  min-height: 0;
}

.phone-frame.guest-home-active .natural-person-home .guest-home-hero {
  height: 225px;
  min-height: 225px;
}

.guest-home-hero {
  position: relative;
  min-height: 166px;
  overflow: hidden;
  padding: 16px 16px 42px;
  color: #16335f;
  background: var(--home-hero-bg);
}

.guest-home-hero::after {
  position: absolute;
  right: -42px;
  bottom: -78px;
  width: 190px;
  height: 190px;
  border: 28px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  display: none;
  content: '';
}

.guest-home-page:not(.natural-person-home) .guest-home-hero {
  isolation: isolate;
  color: #fff;
  background: var(--home-hero-bg);
}

.guest-home-page:not(.natural-person-home) .guest-home-hero::after {
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--home-hero-overlay);
  content: '';
  pointer-events: none;
}

.guest-home-hero > header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guest-home-hero > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.guest-home-hero > .guest-home-intro > div {
  display: block;
  min-width: 0;
  flex: 1;
}

.guest-home-hero > header > div > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #2464e8;
  background: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.guest-home-hero > header > div span,
.guest-home-hero > header > div small,
.guest-home-hero > header > div b {
  display: block;
}

.guest-home-hero > header > div small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 7px;
}

.guest-home-hero > header > div b {
  margin-top: 3px;
  font-size: 11px;
}

.guest-home-hero > header > .guest-login-button {
  min-width: 58px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: #174991;
  background: #fff;
  font-size: 9px;
  font-weight: 800;
}

.guest-home-page:not(.natural-person-home) .guest-login-button {
  border-color: rgba(255, 255, 255, 0.7);
  color: #1f559f;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(20, 57, 117, 0.18);
}

.natural-home-bar .home-role-switch small {
  color: rgba(255, 255, 255, 0.72);
}

.natural-home-bar .home-role-switch b {
  color: #fff;
}

.natural-home-bar .home-role-avatar {
  color: #2464e8;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(20, 57, 117, 0.18);
}

.natural-home-bar .home-message-button {
  color: #475467;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 7px 18px rgba(44, 76, 117, 0.1);
  backdrop-filter: blur(8px);
}

.natural-home-bar .home-message-button i {
  border-color: #fff;
}

.guest-home-hero h1,
.guest-home-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.guest-home-hero h1 {
  margin-top: 23px;
  font-size: 23px;
  letter-spacing: -0.03em;
}

.guest-home-hero p {
  max-width: 310px;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 9px;
  line-height: 1.55;
}

.guest-home-hero > .guest-home-intro h1 {
  margin-top: 0;
}

.guest-home-hero > .guest-home-intro p {
  max-width: 270px;
}

.guest-home-page:not(.natural-person-home) .guest-home-intro p {
  color: rgba(255, 255, 255, 0.78);
}

.guest-home-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  margin-top: -24px;
  padding: 0 14px 28px;
}

.guest-home-page:not(.natural-person-home) .guest-home-content {
  margin-top: -104px;
}

.natural-person-home .guest-home-content {
  margin-top: -104px;
}

.natural-person-card {
  overflow: hidden;
  border: 1px solid #cfe0fb;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(37, 67, 105, 0.1);
}

.natural-person-card > header {
  display: grid;
  min-height: 66px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #edf2f8;
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.natural-person-card > header > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #2464e8;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.natural-person-card > header span,
.natural-person-card > header small,
.natural-person-card > header b,
.natural-person-card > div span,
.natural-person-card > div small,
.natural-person-card > div b {
  display: block;
  min-width: 0;
}

.natural-person-card > header small {
  color: #087a55;
  font-size: 8px;
  font-weight: 750;
}

.natural-person-card > header b {
  margin-top: 3px;
  color: #182438;
  font-size: 13px;
}

.natural-person-card > header > em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #b54708;
  background: #fff4e5;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.natural-person-card > header > em.verified {
  color: #087a55;
  background: #ecfdf3;
}

.natural-person-card > div {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 14px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.natural-person-card > div b {
  color: #344054;
  font-size: 10px;
}

.natural-person-card > div small {
  margin-top: 4px;
  color: #7b8798;
  font-size: 8px;
  line-height: 1.5;
}

.natural-person-card > div > button {
  min-width: 83px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #2464e8;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.guest-service-panel,
.guest-discovery-panel,
.guest-feed-panel,
.guest-sale-panel,
.guest-jobs-panel,
.guest-guide-panel,
.guest-mine-auth {
  border: 1px solid #e5ebf3;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(37, 67, 105, 0.08);
}

.guest-service-panel {
  padding: 15px;
}

.guest-service-panel > header,
.guest-discovery-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guest-service-panel > header div,
.guest-service-panel > header b,
.guest-service-panel > header small {
  display: block;
}

.guest-service-panel > header b,
.guest-discovery-panel > header b {
  color: #182438;
  font-size: 13px;
}

.guest-service-panel > header small,
.guest-discovery-panel > header small {
  margin-top: 3px;
  color: #8b98aa;
  font-size: 8px;
}

.guest-service-panel > header > em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #2464e8;
  background: #edf4ff;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.guest-service-grid {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guest-service-grid > button {
  display: grid;
  min-height: 68px;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid #e7edf5;
  border-radius: 15px;
  color: #27364c;
  background: #f9fbfe;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  text-align: left;
}

.guest-service-grid > button > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  color: #2464e8;
  background: #eaf2ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.guest-service-grid span,
.guest-service-grid b,
.guest-service-grid small {
  display: block;
  min-width: 0;
}

.guest-service-grid b {
  font-size: 10px;
}

.guest-service-grid small {
  margin-top: 3px;
  color: #8b98aa;
  font-size: 7px;
  line-height: 1.45;
}

.guest-service-grid > button > em {
  color: #a1aec0;
  font-size: 14px;
  font-style: normal;
}

.guest-discovery-panel {
  padding: 15px;
  box-shadow: none;
}

.guest-discovery-panel > div {
  margin-top: 9px;
}

.guest-discovery-panel > div > button {
  display: grid;
  width: 100%;
  min-height: 53px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  color: #344054;
  background: transparent;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  text-align: left;
}

.guest-discovery-panel > div > button:last-child {
  border-bottom: 0;
}

.guest-discovery-panel > div > button > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  color: #2464e8;
  background: #edf4ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.guest-discovery-panel span,
.guest-discovery-panel b,
.guest-discovery-panel small {
  display: block;
  min-width: 0;
}

.guest-discovery-panel > div b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-discovery-panel > div small {
  margin-top: 3px;
  overflow: hidden;
  color: #8b98aa;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-discovery-panel > div em {
  color: #2464e8;
  font-size: 8px;
  font-style: normal;
}

.guest-mode-note {
  margin: 0;
  color: #98a5b6;
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
}

.guest-feed-panel,
.guest-sale-panel,
.guest-jobs-panel,
.guest-guide-panel {
  padding: 15px;
  box-shadow: none;
}

.guest-feed-panel > header,
.guest-sale-panel > header,
.guest-jobs-panel > header,
.guest-guide-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.guest-feed-panel > header div,
.guest-feed-panel > header b,
.guest-feed-panel > header small,
.guest-sale-panel > header div,
.guest-sale-panel > header b,
.guest-sale-panel > header small,
.guest-jobs-panel > header div,
.guest-jobs-panel > header b,
.guest-jobs-panel > header small,
.guest-guide-panel > header div,
.guest-guide-panel > header b,
.guest-guide-panel > header small {
  display: block;
  min-width: 0;
}

.guest-feed-panel > header b,
.guest-sale-panel > header b,
.guest-jobs-panel > header b,
.guest-guide-panel > header b {
  color: #182438;
  font-size: 13px;
}

.guest-feed-panel > header small,
.guest-sale-panel > header small,
.guest-jobs-panel > header small,
.guest-guide-panel > header small {
  margin-top: 3px;
  color: #8b98aa;
  font-size: 8px;
}

.guest-feed-panel > header > button,
.guest-sale-panel > header > button,
.guest-jobs-panel > header > button {
  padding: 7px 0;
  border: 0;
  color: #2464e8;
  background: transparent;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.guest-feed-tabs {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 3px;
  border-radius: 11px;
  background: #f1f4f8;
  grid-template-columns: 1fr 1fr;
}

.guest-feed-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  color: #7b8798;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
}

.guest-feed-tabs button.active {
  color: #2464e8;
  background: #fff;
  box-shadow: 0 4px 12px rgba(35, 71, 116, 0.08);
}

.guest-feed-list {
  margin-top: 7px;
}

.guest-feed-list > button,
.guest-jobs-panel > div > button,
.guest-guide-panel > div > button {
  display: grid;
  width: 100%;
  min-height: 55px;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  color: #344054;
  background: transparent;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  text-align: left;
}

.guest-feed-list > button:last-child,
.guest-jobs-panel > div > button:last-child,
.guest-guide-panel > div > button:last-child {
  border-bottom: 0;
}

.guest-feed-list > button > i,
.guest-jobs-panel > div > button > i,
.guest-guide-panel > div > button > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #2464e8;
  background: #edf4ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.guest-feed-list span,
.guest-feed-list b,
.guest-feed-list small,
.guest-jobs-panel > div span,
.guest-jobs-panel > div b,
.guest-jobs-panel > div small,
.guest-guide-panel > div span,
.guest-guide-panel > div b,
.guest-guide-panel > div small {
  display: block;
  min-width: 0;
}

.guest-feed-list b,
.guest-jobs-panel > div b,
.guest-guide-panel > div b {
  overflow: hidden;
  color: #344054;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-feed-list small,
.guest-jobs-panel > div small,
.guest-guide-panel > div small {
  margin-top: 4px;
  overflow: hidden;
  color: #8b98aa;
  font-size: 7px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-feed-list > button > em,
.guest-jobs-panel > div > button > em,
.guest-guide-panel > div > button > em {
  max-width: 86px;
  overflow: hidden;
  color: #2464e8;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-sale-strip {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guest-sale-strip > button {
  min-width: 0;
  padding: 11px;
  border: 1px solid #e7edf5;
  border-radius: 14px;
  color: #344054;
  background: #f9fbfe;
  text-align: left;
}

.guest-sale-strip > button > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.guest-sale-strip > button > span i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #2464e8;
  background: #eaf2ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.guest-sale-strip > button > span em {
  color: #16815f;
  font-size: 7px;
  font-style: normal;
}

.guest-sale-strip > button > b,
.guest-sale-strip > button > small,
.guest-sale-strip > button > strong,
.guest-sale-strip > button > u {
  display: block;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-sale-strip > button > b {
  margin-top: 10px;
  font-size: 9px;
}

.guest-sale-strip > button > small {
  margin-top: 4px;
  color: #8b98aa;
  font-size: 7px;
}

.guest-sale-strip > button > strong {
  margin-top: 9px;
  color: #53647b;
  font-size: 8px;
}

.guest-sale-strip > button > u {
  margin-top: 3px;
  color: #e05d32;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.guest-jobs-panel > div,
.guest-guide-panel > div {
  margin-top: 8px;
}

.guest-workbench-empty {
  padding-top: 62px;
}

.guest-secondary-action {
  min-height: 42px;
  margin-top: 9px;
  border: 0;
  color: #2464e8;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}

.guest-mine-hero {
  background: linear-gradient(145deg, #174991, #2468e8);
}

.guest-mine-auth {
  padding: 15px;
}

.guest-mine-auth > span,
.guest-mine-auth b,
.guest-mine-auth small {
  display: block;
}

.guest-mine-auth b {
  color: #182438;
  font-size: 12px;
}

.guest-mine-auth small {
  margin-top: 5px;
  color: #7c899c;
  font-size: 8px;
  line-height: 1.5;
}

.guest-mine-auth > div {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  grid-template-columns: 1fr 1fr;
}

.guest-mine-auth > div button {
  min-height: 43px;
  border: 1px solid #a9c7ff;
  border-radius: 12px;
  color: #2464e8;
  background: #f3f7ff;
  font-size: 10px;
  font-weight: 750;
}

.guest-mine-auth > div button:last-child {
  border-color: #2464e8;
  color: #fff;
  background: #2464e8;
}

.guest-browse-notice {
  display: grid;
  min-height: 55px;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid #dbe8fb;
  border-radius: 14px;
  background: #f3f7ff;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.guest-browse-notice > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #2464e8;
  background: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.guest-browse-notice span,
.guest-browse-notice b,
.guest-browse-notice small {
  display: block;
  min-width: 0;
}

.guest-browse-notice b {
  color: #344054;
  font-size: 9px;
}

.guest-browse-notice small {
  margin-top: 3px;
  color: #7f8ea3;
  font-size: 7px;
}

.guest-browse-notice > button {
  min-width: 48px;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #2464e8;
  font-size: 8px;
  font-weight: 750;
}

.guest-auth-prompt {
  display: grid;
  justify-items: center;
  padding: 8px 5px 2px;
  text-align: center;
}

.guest-auth-prompt > i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #3475f4, #245ee5);
  box-shadow: 0 9px 20px rgba(42, 104, 232, 0.2);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.guest-auth-prompt b {
  margin-top: 12px;
  color: #182438;
  font-size: 12px;
}

.guest-auth-prompt p {
  max-width: 260px;
  margin: 6px 0 0;
  color: #7b8798;
  font-size: 9px;
  line-height: 1.55;
}

/* 船员首页视觉样板：与游客首页、登录页统一品牌层次 */

.crew-home-redesign {
  min-height: 735px;
  background: #edf2f8;
}

.phone-frame.crew-home-active .status-bar {
  color: #fff;
  background: transparent;
}

.phone-frame.crew-home-active .crew-home-redesign .app-home-top {
  position: relative;
  height: 225px;
  min-height: 225px;
  overflow: hidden;
  margin-top: -37px;
  padding: 53px 16px 44px;
  background: var(--home-hero-bg);
}

.phone-frame.crew-home-active .crew-home-redesign .app-home-top::before {
  position: absolute;
  top: -80px;
  right: -48px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(42, 104, 232, 0.065);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.phone-frame.crew-home-active .crew-home-redesign .app-home-top::after {
  position: absolute;
  right: -24px;
  bottom: 16px;
  width: 150px;
  height: 42px;
  border-top: 1px solid rgba(42, 104, 232, 0.12);
  border-radius: 50%;
  content: '';
  transform: rotate(-7deg);
  pointer-events: none;
}

.crew-home-redesign .app-home-bar {
  position: relative;
  z-index: 1;
}

.crew-home-redesign .home-role-avatar {
  color: #2464e8;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(20, 57, 117, 0.18);
}

.crew-home-redesign .app-home-bar small {
  color: rgba(255, 255, 255, 0.72);
}

.crew-home-redesign .app-home-bar b {
  color: #fff;
}

.crew-home-redesign .home-message-button {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 7px 18px rgba(44, 76, 117, 0.1);
  backdrop-filter: blur(8px);
}

.crew-home-redesign .home-message-button i {
  border-color: #fff;
}

.crew-home-redesign .home-content {
  position: relative;
  z-index: 2;
  margin-top: -104px;
  padding: 0 14px 28px;
}

.crew-home-redesign .identity-grid {
  gap: 10px;
}

.crew-home-redesign .identity-card {
  border-color: #e1e8f1;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(38, 71, 112, 0.09);
}

.crew-home-redesign .identity-card.vessel-status {
  background: linear-gradient(145deg, #2d73ef 0%, #19509e 100%);
  box-shadow: 0 14px 30px rgba(35, 92, 181, 0.2);
}

.crew-home-redesign .home-section,
.crew-home-redesign .service-panel {
  margin-top: 14px;
  padding: 15px;
  border-color: #e1e8f1;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(38, 71, 112, 0.065);
}

.crew-home-redesign .crew-current-vessel-panel {
  border-color: #d6e2f2;
  background: #fff;
}

.crew-home-redesign .crew-current-voyage-entry {
  border-color: #c9dcfb;
  border-radius: 12px;
  background: #edf4ff;
}

.crew-home-redesign .recommend-tabs {
  border-radius: 12px;
  background: #f0f4f9;
}

.crew-home-redesign .recommend-grid button {
  border-color: #e4eaf2;
  border-radius: 14px;
  background: #f9fbfe;
}

/* 其他业务角色首页：沿用船员首页样板 */

.role-home-redesign {
  min-height: 735px;
  background: #edf2f8;
}

.phone-frame.role-home-active .status-bar {
  color: #fff;
  background: transparent;
}

.phone-frame.role-home-active .role-home-redesign .app-home-top {
  position: relative;
  height: 225px;
  min-height: 225px;
  overflow: hidden;
  margin-top: -37px;
  padding: 53px 16px 44px;
  background: var(--home-hero-bg);
}

.phone-frame.role-home-active .role-home-redesign .app-home-top::before {
  position: absolute;
  top: -80px;
  right: -48px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(42, 104, 232, 0.065);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.phone-frame.role-home-active .role-home-redesign .app-home-top::after {
  position: absolute;
  right: -24px;
  bottom: 16px;
  width: 150px;
  height: 42px;
  border-top: 1px solid rgba(42, 104, 232, 0.12);
  border-radius: 50%;
  content: '';
  transform: rotate(-7deg);
  pointer-events: none;
}

.role-home-redesign .app-home-bar {
  position: relative;
  z-index: 1;
}

.role-home-redesign .home-role-avatar {
  color: #2464e8;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(20, 57, 117, 0.18);
}

.role-home-redesign .app-home-bar small {
  color: rgba(255, 255, 255, 0.72);
}

.role-home-redesign .app-home-bar b {
  color: #fff;
}

.role-home-redesign .home-message-button {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 7px 18px rgba(44, 76, 117, 0.1);
  backdrop-filter: blur(8px);
}

.role-home-redesign .home-message-button i {
  border-color: #fff;
}

.role-home-redesign .home-content {
  position: relative;
  z-index: 2;
  margin-top: -104px;
  padding: 0 14px 28px;
}

.phone-frame.crew-home-active .crew-home-redesign .app-home-top::before,
.phone-frame.role-home-active .role-home-redesign .app-home-top::before {
  display: none;
}

.auth-simple-header::after,
.natural-person-home .guest-home-hero::after,
.phone-frame.crew-home-active .crew-home-redesign .app-home-top::after,
.phone-frame.role-home-active .role-home-redesign .app-home-top::after {
  inset: 0;
  z-index: 0;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--home-hero-overlay);
  content: '';
  transform: none;
  pointer-events: none;
}

.natural-person-home .guest-home-content > :first-child,
.crew-home-redesign .home-content > :first-child,
.role-home-redesign .home-content > :first-child {
  margin-top: 0;
}

.role-home-redesign .operator-focus-grid {
  gap: 10px;
}

.role-home-redesign .operator-focus-card {
  border-color: #e1e8f1;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(38, 71, 112, 0.09);
}

.role-home-redesign .operator-focus-card.voyage-summary {
  background: linear-gradient(145deg, #2d73ef 0%, #19509e 100%);
  box-shadow: 0 14px 30px rgba(35, 92, 181, 0.2);
}

.role-home-redesign .partner-role-summary {
  border-radius: 20px;
  background: linear-gradient(145deg, #2d73ef 0%, #19509e 100%);
  box-shadow: 0 14px 30px rgba(35, 92, 181, 0.2);
}

.role-home-redesign .home-section,
.role-home-redesign .service-panel {
  margin-top: 14px;
  padding: 15px;
  border-color: #e1e8f1;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(38, 71, 112, 0.065);
}

.role-home-redesign .operator-metric-grid,
.role-home-redesign .home-fleet-list > button {
  border-color: #e4eaf2;
}

/* 全部业务角色的工作台与“我的”：不使用顶部渐变 */

.business-workbench-redesign,
.business-mine-redesign {
  min-height: 735px;
  background: #edf2f8;
}

.phone-frame.business-workbench-active .status-bar {
  color: #344054;
  background: #fff;
}

.phone-frame.business-mine-active .status-bar {
  color: #344054;
  background: #edf2f8;
}

.business-workbench-redesign > .page-header {
  min-height: 52px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom-color: #e1e8f1;
  background: #fff;
}

.business-workbench-redesign > .page-body {
  padding: 10px 14px 28px;
}

.business-workbench-overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(92% 128% at 104% -12%, rgba(75, 183, 230, 0.42) 0%, rgba(75, 183, 230, 0) 62%),
    radial-gradient(76% 100% at -8% 112%, rgba(65, 112, 198, 0.34) 0%, rgba(65, 112, 198, 0) 68%),
    linear-gradient(145deg, #163b79 0%, #1e55a2 48%, #276eb9 100%);
  box-shadow: 0 14px 30px rgba(24, 65, 126, 0.2);
}

.business-workbench-overview::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.07) 48%, rgba(255, 255, 255, 0) 70%);
  content: '';
  pointer-events: none;
}

.business-workbench-overview > header {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.business-workbench-overview header > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.business-workbench-overview header span,
.business-workbench-overview header small,
.business-workbench-overview header h2,
.business-workbench-overview > div small,
.business-workbench-overview > div b {
  display: block;
}

.business-workbench-overview header small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
}

.business-workbench-overview header h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 15px;
}

.business-workbench-overview header > em {
  padding: 5px 8px;
  border: 1px solid rgba(193, 255, 230, 0.2);
  border-radius: 999px;
  color: #d8ffed;
  background: rgba(18, 109, 82, 0.28);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.business-workbench-overview > div {
  position: relative;
  z-index: 1;
  display: grid;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.business-workbench-overview > div > span {
  min-width: 0;
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.17);
}

.business-workbench-overview > div > span:first-child {
  padding-left: 0;
  border-left: 0;
}

.business-workbench-overview > div small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
}

.business-workbench-overview > div b {
  margin-top: 4px;
  color: #fff;
  font-size: 12px;
}

.business-workbench-redesign .workbench-groups {
  gap: 14px;
  margin-top: 14px;
}

.business-workbench-redesign .workbench-group {
  border-color: #e1e8f1;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(38, 71, 112, 0.06);
}

.business-workbench-redesign .workbench-group > header {
  padding: 15px 15px 10px;
}

.business-workbench-redesign .workbench-group > header > em {
  padding: 5px 8px;
  color: #2464e8;
  background: #edf4ff;
}

.business-workbench-redesign .workbench-link-grid {
  padding: 0 10px 10px;
}

.business-workbench-redesign .capability-grid .capability-icon {
  background: #eaf2ff;
}

.business-mine-redesign .mine-hero {
  padding: 14px 14px 0;
  background: transparent;
}

.business-mine-redesign .mine-user {
  position: relative;
  min-height: 92px;
  padding: 16px;
  border: 1px solid #e1e8f1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(38, 71, 112, 0.075);
}

.business-mine-redesign .mine-avatar {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: linear-gradient(145deg, #3475f4, #245ee5);
  box-shadow: 0 8px 18px rgba(42, 104, 232, 0.2);
}

.business-mine-redesign .mine-user h2 {
  color: #1d2b40;
}

.business-mine-redesign .mine-user p {
  color: #667995;
  line-height: 1.5;
}

.business-mine-redesign .mine-settings-body {
  margin-top: 0;
  padding: 14px 14px 28px;
}

.business-mine-redesign .mine-menu {
  border-color: #e1e8f1;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(38, 71, 112, 0.06);
}

.business-mine-redesign .mine-menu button {
  min-height: 72px;
  gap: 12px;
  padding: 14px;
  border-top-color: #edf1f5;
}

.business-mine-redesign .mine-menu i {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #2464e8;
  background: #eaf2ff;
}

.business-mine-redesign .mine-menu b {
  color: #26364c;
  font-size: 11px;
}

.business-mine-redesign .mine-menu span,
.business-mine-redesign .mine-menu b,
.business-mine-redesign .mine-menu small {
  display: block;
  min-width: 0;
}

.business-mine-redesign .mine-menu small {
  margin-top: 3px;
  color: #7b8ba3;
  line-height: 1.4;
}

@media (max-width: 370px) {
  .guest-service-grid {
    grid-template-columns: 1fr;
  }
}

/* 认证详情：提交后与后续查看共用的状态结果页 */

.application-progress-page {
  background: #f5f7fb;
}

.application-progress-body {
  gap: 13px;
  padding-top: 14px;
  padding-bottom: 30px;
}

.application-progress-page .application-overview-simple {
  position: relative;
  overflow: hidden;
  padding: 15px 15px 17px;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(34, 72, 130, 0.1);
}

.application-progress-page .application-overview-simple::before {
  position: absolute;
  width: 180px;
  height: 180px;
  top: -110px;
  right: -70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  content: '';
}

.application-progress-page .application-overview-simple.pending {
  background: linear-gradient(145deg, #f9fbff 0%, #edf4ff 100%);
}

.application-progress-page .application-overview-simple.approved {
  background: linear-gradient(145deg, #f7fffb 0%, #e9f9f1 100%);
}

.application-progress-page .application-overview-simple.rejected {
  background: linear-gradient(145deg, #fffafa 0%, #fff0ee 100%);
}

.application-progress-page .application-overview-simple > header {
  position: relative;
  z-index: 1;
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.application-progress-page .application-overview-simple > header > i {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 5px 14px rgba(36, 100, 232, 0.09);
}

.certification-result-hero {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding: 24px 10px 17px;
  text-align: center;
}

.certification-result-hero > i {
  display: grid;
  width: 62px;
  height: 62px;
  margin-bottom: 13px;
  place-items: center;
  border-radius: 21px;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(36, 100, 232, 0.22);
}

.application-overview-simple.pending .certification-result-hero > i {
  background: linear-gradient(145deg, #4d8df7, #2464e8);
}

.application-overview-simple.approved .certification-result-hero > i {
  background: linear-gradient(145deg, #32c68a, #129565);
  box-shadow-color: rgba(18, 149, 101, 0.22);
}

.application-overview-simple.rejected .certification-result-hero > i {
  background: linear-gradient(145deg, #f4776d, #d9453a);
  box-shadow-color: rgba(217, 69, 58, 0.2);
}

.certification-result-hero > small {
  color: #667085;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.certification-result-hero > h2 {
  margin: 5px 0 0;
  color: #17233a;
  font-size: 19px;
  letter-spacing: -0.03em;
}

.certification-result-hero > p {
  max-width: 270px;
  margin: 7px 0 0;
  color: #60708a;
  font-size: 9px;
  line-height: 1.65;
}

.application-progress-page .application-progress-steps {
  position: relative;
  z-index: 1;
  margin: 5px 10px 0;
  padding: 13px 12px 2px;
  border-top: 1px solid rgba(103, 128, 165, 0.13);
}

.certification-context-card {
  padding: 15px;
  border: 1px solid #e4eaf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(35, 66, 109, 0.045);
}

.certification-context-card > header {
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.certification-context-card > header > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #2464e8;
  background: #eaf2ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.certification-context-card.rejected > header > i {
  color: #b42318;
  background: #feeceb;
}

.certification-context-card.approved > header > i {
  color: #087a55;
  background: #dcf7e8;
}

.certification-context-card small,
.certification-context-card b {
  display: block;
}

.certification-context-card small {
  color: #98a2b3;
  font-size: 8px;
}

.certification-context-card b {
  margin-top: 3px;
  color: #27364d;
  font-size: 11px;
}

.certification-context-card > p {
  margin: 11px 0 0 44px;
  color: #667085;
  font-size: 9px;
  line-height: 1.65;
}

.certification-capabilities {
  display: grid;
  gap: 8px;
  margin: 13px 0 0 44px;
}

.certification-capabilities > span {
  color: #52627a;
  font-size: 9px;
}

.application-progress-page .application-detail-simple {
  border-color: #e4eaf2;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(35, 66, 109, 0.045);
}

.application-progress-page .application-detail-simple > header {
  min-height: 50px;
  padding: 0 15px;
}

.application-progress-page .application-detail-simple > div {
  display: block;
  padding: 3px 15px 8px;
}

.application-progress-page .application-detail-simple > div > span {
  display: grid;
  min-height: 43px;
  align-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #f0f2f5;
  grid-template-columns: 68px minmax(0, 1fr) auto;
}

.application-progress-page .application-detail-simple > div > span:last-child {
  border-bottom: 0;
}

.application-progress-page .application-detail-simple small,
.application-progress-page .application-detail-simple b {
  margin: 0;
}

.application-progress-page .application-detail-simple b {
  overflow: hidden;
  font-size: 9px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-progress-page .application-detail-simple span > button {
  margin-left: 8px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  color: #2464e8;
  background: #edf4ff;
  font-size: 7px;
}

.certification-detail-actions {
  display: grid;
  gap: 7px;
}

.certification-detail-actions .application-primary-action {
  min-height: 47px;
  margin: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #3475f4, #245ee5);
  box-shadow: 0 9px 18px rgba(36, 94, 229, 0.18);
}

.certification-secondary-action {
  min-height: 40px;
  border: 0;
  color: #667085;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
}