page {
  min-height: 100%;
  color: #0b2055;
  background: #f3f6ff;
}

.recommendations-page {
  min-height: 100vh;
  padding: 0 9px calc(66px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 10% 3%, rgba(89, 125, 255, .15), transparent 24%),
    radial-gradient(circle at 88% 7%, rgba(130, 82, 244, .14), transparent 22%),
    linear-gradient(180deg, #f9fbff 0%, #f1f5ff 100%);
}

.top-safe { height: calc(env(safe-area-inset-top) + 12px); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 4px 12px 17px;
}

.head-copy { display: flex; align-items: flex-start; justify-content: flex-end; min-width: 0; height: 51px; flex: 1; flex-direction: column; }
.title-row { display: flex; align-items: center; }
.title-fire { margin-right: 7px; font-size: 29px; line-height: 1; }
.page-title { color: #09205d; font-size: 25px; font-weight: 900; line-height: 1.12; letter-spacing: 0.5px; }
.head-subtitle { margin-top: 4px; margin-left: 36px; color: #6e7d9f; font-size: 11.5px; font-weight: 700; line-height: 1.2; }

.update-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 77px;
  height: 48px;
  margin-left: 10px;
  border-radius: 26px;
  color: #3155e8;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(232, 237, 255, .98), rgba(241, 233, 255, .96));
  box-shadow: inset 0 0 10px rgba(255, 255, 255, .95), 0 4px 12px rgba(75, 82, 175, .08);
}

.recommendation-list { display: flex; flex-direction: column; }
.recommendation-state { margin: 15px 0; padding: 35px 12px; border: 0.5px solid #e4e9f8; border-radius: 14px; color: #7b88a5; font-size: 11.5px; line-height: 1.6; text-align: center; background: rgba(255, 255, 255, .94); box-shadow: 0 5px 15px rgba(48, 74, 145, .08); }

.recommendation-card {
  position: relative;
  padding: 14px 12px 11px;
  overflow: hidden;
  border: 0.5px solid rgba(224, 230, 247, .96);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 6.5px 17px rgba(48, 74, 145, .11);
}

.recommendation-card + .recommendation-card { margin-top: 11px; }

.card-watermark { position: absolute; z-index: 0; right: -6px; bottom: 57px; width: 115px; height: 95px; overflow: hidden; opacity: .26; pointer-events: none; }
.watermark-line { position: absolute; right: -17px; width: 120px; height: 43px; border: 2.5px solid #a9c2ff; border-bottom: 0; border-radius: 60px 60px 0 0; transform: rotate(-10deg); }
.watermark-line-one { bottom: 6.5px; }
.watermark-line-two { right: -2px; bottom: -8.5px; width: 95px; opacity: .7; }
.watermark-dot { position: absolute; right: 21px; bottom: 8.5px; width: 12px; height: 12px; border-radius: 50%; background: #92b2ff; }

.recommendation-badge {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 12px;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 8.5px;
  border-radius: 14px;
  color: #df2943;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  background: #fff3e8;
}
.badge-icon { margin-right: 3.5px; font-size: 11.5px; line-height: 1; }

.card-main { position: relative; z-index: 1; display: flex; align-items: flex-start; min-width: 0; }
.item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 79px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 15px;
  color: #fff;
  font-size: 27px;
  font-weight: 900;
  flex: none;
  box-shadow: 0 5px 12.5px rgba(41, 69, 145, .14), inset 0 0 10px rgba(255, 255, 255, .18);
}
.item-icon-image { display: block; width: 100%; height: 100%; border-radius: 14px; }
.tone-green { background: linear-gradient(135deg, #13c9a4, #00a47a); }
.tone-yellow { color: #09205d; background: linear-gradient(135deg, #ffd41c, #f2b900); }
.tone-red { background: linear-gradient(135deg, #ef314a, #c91431); }
.tone-orange { background: linear-gradient(135deg, #ff8015, #ff5d00); }
.tone-blue { background: linear-gradient(135deg, #4b7df8, #4053e9); }

.item-copy { min-width: 0; margin-left: 11px; flex: 1; }
.item-name-line { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-width: 0; padding: 2px 76px 1px 0; }
.item-name-line-pressed { opacity: .65; }
.item-title { color: #09205d; font-size: 17.5px; font-weight: 900; line-height: 1.25; }
.title-link-arrow { margin-left: 4px; color: #4566ed; font-size: 17px; font-weight: 900; line-height: 1; flex: none; }
.item-tag-row { display: flex; align-items: flex-start; min-width: 0; margin-top: 3.5px; }
.item-tag { display: -webkit-box; max-width: 100%; padding: 3.5px 6px; overflow: hidden; border-radius: 5.5px; color: #3657ee; font-size: 10px; font-weight: 800; line-height: 1.28; word-break: break-all; white-space: normal; background: #eef1ff; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.reason-list { margin-top: 7.5px; }
.reason-line { display: flex; align-items: flex-start; min-width: 0; margin-top: 4px; }
.check-dot { display: flex; align-items: center; justify-content: center; width: 15.5px; height: 15.5px; margin-top: 0.5px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; flex: none; background: #ef314a; box-shadow: 0 2px 5px rgba(239, 49, 74, .18); }
.reason-text { margin-left: 5.5px; color: #284572; font-size: 11px; font-weight: 500; line-height: 1.4; }

.invite-strip { position: relative; z-index: 2; display: flex; align-items: center; width: fit-content; max-width: 100%; margin: 8.5px 0 0 90px; padding: 3.5px 6.5px; border-radius: 7.5px; color: #73809b; font-size: 8.5px; line-height: 1.25; background: #f4f6fb; }
.invite-strip-code { max-width: 95px; margin-right: 5px; overflow: hidden; color: #173266; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.invite-strip-hint { color: #5369d8; font-weight: 800; white-space: nowrap; }
.invite-strip-pressed { opacity: .65; }
.action-zone { position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; margin-top: 9px; padding: 8px; border-radius: 12px; background: linear-gradient(135deg, #fff1f3, #fff7f7); }
.action-button,
.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(50% - 3.5px);
  min-width: 0;
  height: 54px;
  margin: 0;
  padding: 7px 11px;
  border: 0;
  border-radius: 11px;
  text-align: center;
  flex: none;
  flex-direction: column;
}
.action-button {
  color: #fff;
  background: linear-gradient(135deg, #ff3150, #ef2945);
  box-shadow: 0 5px 11px rgba(237, 43, 72, .22);
}
.action-button::after,.secondary-button::after { border: 0; }
.action-button-pressed { opacity: .8; transform: translateY(1px); }
.action-title { display: block; width: 100%; overflow: hidden; font-size: 14.5px; font-weight: 900; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.secondary-button { margin-left: 0; border: 1px solid rgba(239, 41, 69, .25); color: #d92843; background: linear-gradient(135deg, #fff, #ffe9ed); box-shadow: 0 4px 9px rgba(237, 43, 72, .10); }
.secondary-button-pressed { opacity: .7; transform: translateY(1px); }
.secondary-title { display: block; width: 100%; overflow: hidden; color: currentColor; font-size: 14.5px; font-weight: 900; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.tone-card-green .recommendation-badge { color: #079a72; background: #e9fbf2; }
.tone-card-green .check-dot { background: #0bb68b; box-shadow: 0 2px 5px rgba(11, 182, 139, .18); }
.tone-card-green .action-zone { background: linear-gradient(135deg, #eafbf6, #f4fcf9); }
.tone-card-green .action-button { background: linear-gradient(135deg, #12bc91, #00a97c); box-shadow: 0 5px 11px rgba(0, 169, 124, .20); }
.tone-card-green .secondary-button { border-color: rgba(0, 169, 124, .25); color: #008d69; background: linear-gradient(135deg, #fff, #e5f9f2); box-shadow: 0 4px 9px rgba(0, 169, 124, .09); }

.tone-card-yellow .recommendation-badge { color: #c77a00; background: #fff7df; }
.tone-card-yellow .check-dot { background: #f3ae20; box-shadow: 0 2px 5px rgba(243, 174, 32, .2); }
.tone-card-yellow .action-zone { background: linear-gradient(135deg, #fff8e8, #fffaf1); }
.tone-card-yellow .action-button { background: linear-gradient(135deg, #f8b52e, #eca315); box-shadow: 0 5px 11px rgba(236, 163, 21, .2); }
.tone-card-yellow .secondary-button { border-color: rgba(236, 163, 21, .27); color: #b87500; background: linear-gradient(135deg, #fff, #fff2cf); box-shadow: 0 4px 9px rgba(236, 163, 21, .10); }

.tone-card-orange .recommendation-badge { color: #db6500; background: #fff1e3; }
.tone-card-orange .check-dot { background: #f37416; box-shadow: 0 2px 5px rgba(243, 116, 22, .2); }
.tone-card-orange .action-zone { background: linear-gradient(135deg, #fff1e5, #fff8f1); }
.tone-card-orange .action-button { background: linear-gradient(135deg, #ff7b16, #ef6100); box-shadow: 0 5px 11px rgba(239, 97, 0, .2); }
.tone-card-orange .secondary-button { border-color: rgba(239, 97, 0, .25); color: #d95700; background: linear-gradient(135deg, #fff, #ffe9d8); box-shadow: 0 4px 9px rgba(239, 97, 0, .09); }

.tone-card-blue .recommendation-badge { color: #3658e9; background: #eef1ff; }
.tone-card-blue .check-dot { background: #4e67ed; box-shadow: 0 2px 5px rgba(78, 103, 237, .19); }
.tone-card-blue .action-zone { background: linear-gradient(135deg, #edf2ff, #f5f6ff); }
.tone-card-blue .action-button { background: linear-gradient(135deg, #4b78f3, #4b4fe6); box-shadow: 0 5px 11px rgba(75, 79, 230, .2); }
.tone-card-blue .secondary-button { border-color: rgba(75, 79, 230, .25); color: #3f49d8; background: linear-gradient(135deg, #fff, #e9ebff); box-shadow: 0 4px 9px rgba(75, 79, 230, .09); }

.risk-note { display: flex; align-items: flex-start; margin-top: 12px; padding: 9px 10px; border-radius: 10px; color: #7a86a4; font-size: 9px; line-height: 1.55; background: rgba(236, 241, 255, .92); }
.risk-icon { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-right: 4.5px; border-radius: 50%; color: #fff; font-size: 9px; background: #929dbb; flex: none; }
.tabbar { color: #969696; }
.tab-active { color: #4c21e5; }

@media (max-width: 380px) {
  .recommendations-page { padding-right: 6px; padding-left: 6px; }
  .page-head { padding-right: 8px; padding-left: 8px; }
  .recommendation-card { padding-right: 9px; padding-left: 9px; }
  .item-icon { width: 71px; height: 71px; border-radius: 13px; }
  .item-copy { margin-left: 8.5px; }
  .item-name-line { padding-right: 65px; }
  .item-title { font-size: 15.5px; }
  .recommendation-badge { right: 9px; padding: 0 6.5px; font-size: 9px; }
  .reason-text { font-size: 10px; }
  .invite-strip { margin-left: 79.5px; }
  .action-button,.secondary-button { padding-right: 6px; padding-left: 6px; }
  .action-title { font-size: 13px; }
}