* { box-sizing: border-box; }
body {
  margin: 0;
  background: #e9edf1;
  color: #1f2a35;
  font-family: SimSun, Songti SC, STSong, serif;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.phone {
  max-width: 520px;
  min-height: 100vh;
  margin: 0 auto;
  background: #f7f8fa;
  padding-bottom: 96px;
  box-shadow: 0 0 30px rgba(0,0,0,.08);
}
.flash { margin: 0; background: #fff4d6; color: #7d4b00; padding: 10px 20px; }
.flash p { margin: 0; }
.auth-page {
  min-height: 100vh;
  background: #2c5d1a;
  padding: 70px 32px;
}
.auth-card, .card {
  background: #fff;
  border-radius: 8px;
  padding: 26px;
  box-shadow: 0 6px 18px rgba(20,30,40,.06);
}
.auth-card { text-align: center; }
.auth-card h1 { margin: 10px 0; font-size: 38px; color: #2d561e; }
.auth-card p { margin: 0 0 26px; color: #6c7280; }
.form { display: grid; gap: 18px; text-align: left; }
.form label { display: grid; gap: 8px; color: #333b45; font-weight: 700; }
.form label span, legend span { color: #d64c4c; }
.form input {
  width: 100%;
  border: 1px solid #e3e5e8;
  border-radius: 8px;
  background: #fff;
  min-height: 58px;
  padding: 0 18px;
  color: #202733;
}
.date-block {
  display: grid;
  gap: 10px;
}
.date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.date-head strong {
  color: #333b45;
  font-weight: 700;
}
.date-head strong span {
  color: #d64c4c;
}
.segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(58px, 1fr));
  padding: 3px;
  border: 1px solid #dfe5dc;
  border-radius: 8px;
  background: #f3f6f1;
}
.segmented label {
  display: block;
  margin: 0;
}
.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.segmented em {
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #5d6570;
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
}
.segmented input:checked + em {
  background: #2d641a;
  color: #fff;
  box-shadow: 0 3px 10px rgba(45, 100, 26, .16);
}
.date-grid {
  display: grid;
  grid-template-columns: 1fr 128px;
  gap: 10px;
}
.leap-check {
  display: inline-flex !important;
  align-items: center;
  grid-template-columns: auto auto;
  gap: 8px;
  color: #4d5662;
}
.leap-check input {
  width: 18px;
  min-height: 18px;
}
.hidden {
  display: none !important;
}
.form.big input[type="date"] { background: #eee; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { margin-bottom: 10px; font-weight: 700; }
.radio { display: inline-flex !important; grid-template-columns: auto auto; align-items: center; margin-right: 25px; font-size: 22px; }
.radio input { width: 20px; min-height: 20px; margin-right: 8px; }
.primary, .secondary, .ghost, .pill-button {
  border: 0;
  border-radius: 8px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.primary { background: #2c6418; color: #fff; width: 100%; font-size: 22px; }
.secondary { border: 1px solid #ddd; color: #303843; background: #fff; }
.ghost { margin-top: 16px; color: #2c6418; }
.large { min-height: 72px; font-size: 25px; }
.home { min-height: 100vh; }
.hero { background: #285b17; padding: 54px 30px 28px; }
.hero-card {
  border-radius: 24px;
  background: rgba(255,255,255,.14);
  color: #fff;
  text-align: center;
  padding: 48px 22px;
}
.hero-card h1 { margin: 0 0 20px; font-size: 40px; }
.hero-card p { margin: 0 0 40px; font-size: 22px; }
.pill-button { border-radius: 999px; background: #fff; color: #2c561f; padding: 0 52px; font-size: 25px; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 32px 18px;
}
.section-head h2 { margin: 0; color: #2b4f20; font-size: 26px; }
.section-head a { color: #2b4f20; font-weight: 700; }
.list { padding: 14px 30px 40px; display: grid; gap: 18px; }
.record {
  display: grid;
  grid-template-columns: 76px 1fr 24px;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 8px;
  min-height: 118px;
  padding: 18px 22px;
  box-shadow: 0 4px 14px rgba(20,30,40,.06);
}
.avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(145deg,#3e82f5,#8837e8);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 30px Arial, sans-serif;
}
.record strong { display: block; font-size: 24px; margin-bottom: 8px; }
.record em { color: #707783; font-style: normal; }
.empty { text-align: center; color: #858b95; padding: 40px; }
.page { padding-bottom: 20px; }
.green-title {
  height: 78px;
  background: #2d641a;
  color: #fff;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  padding: 0 18px;
}
.green-title a, .green-title span { font-size: 42px; }
.green-title strong { font-size: 25px; }
.banner {
  margin: 32px 30px;
  border-radius: 18px;
  color: #fff;
  text-align: center;
  padding: 34px 18px;
}
.brown { background: linear-gradient(135deg,#9b4b15,#b05a2f); }
.banner h1 { margin: 0 0 16px; font-size: 29px; }
.banner p { margin: 0; font-size: 19px; }
.page > .card { margin: 0 30px 24px; }
.card-title { font-size: 26px; margin: 0 0 28px; }
.password-card .card-title { margin-bottom: 18px; }
.password-card .primary { margin-top: 4px; }
.center { text-align: center; margin-top: 40px !important; }
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(520px, 100vw);
  height: 82px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  z-index: 10;
}
.bottom-nav a { display: grid; place-items: center; color: #757b84; padding: 8px 0; }
.bottom-nav .active { color: #2b5a1a; }
.ico { font: 34px Arial, sans-serif; line-height: 1; min-height: 34px; }
.bottom-nav em { font-style: normal; font-size: 17px; }
.pillars, .wuxing, .stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pillars span, .wuxing span, .stat-grid span {
  background: rgba(255,255,255,.8);
  border: 1px solid #e4e0ce;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.pillars b, .wuxing b, .stat-grid b { display: block; color: #2b5a1a; margin-bottom: 4px; }
.ganzhi-wuxing-chart {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1;
  margin: 8px auto 4px;
  padding: 9% 7% 7%;
  background: #fff;
  overflow: visible;
}
.ganzhi-wuxing-chart .wide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border-radius: 4px;
}
.wuxing-count-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wuxing-count {
  position: absolute;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 14px rgba(26, 34, 44, .12);
  transform: translate(-50%, -50%);
}
.wuxing-count b,
.wuxing-count em {
  display: block;
  margin: 0;
  font-style: normal;
  line-height: 1;
}
.wuxing-count b {
  font-size: 15px;
  color: currentColor;
}
.wuxing-count em {
  margin-top: 3px;
  color: #111827;
  font: 700 20px Arial, sans-serif;
}
.wuxing-count.pos-1 { left: 50%; top: 5%; color: #20b567; }
.wuxing-count.pos-2 { left: 93%; top: 36%; color: #e64637; }
.wuxing-count.pos-3 { left: 77%; top: 87%; color: #d8a300; }
.wuxing-count.pos-4 { left: 23%; top: 87%; color: #9097a3; }
.wuxing-count.pos-5 { left: 7%; top: 36%; color: #111827; }
.liuqi-chart {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1;
  margin: 6px auto 0;
  overflow: visible;
}
.liuqi-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.liuqi-outer-ring path,
.liuqi-inner-ring path,
.liuqi-lines line,
.liuqi-center-hole {
  stroke: #5c8b66;
  stroke-width: 2;
}
.liuqi-outer-ring path { fill: #fff; }
.liuqi-inner-ring .inner-1 { fill: #fa5e70; }
.liuqi-inner-ring .inner-2 { fill: #f2c518; }
.liuqi-inner-ring .inner-3 { fill: #e8ece7; }
.liuqi-inner-ring .inner-4 { fill: #8f9490; }
.liuqi-inner-ring .inner-5 { fill: #20b86a; }
.liuqi-inner-ring .inner-6 { fill: #f31515; }
.liuqi-lines line { stroke-linecap: square; }
.liuqi-center-hole { fill: #fff; stroke: #28bf70; stroke-width: 3; }
.liuqi-label {
  fill: #090909;
  text-anchor: middle;
  dominant-baseline: middle;
  font-weight: 800;
  letter-spacing: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.outer-label {
  font-size: 16px;
}
.inner-label {
  font-size: 14px;
  font-weight: 500;
  opacity: .72;
}
.outer-label.label-1 { transform: translate(200px, 95px); }
.outer-label.label-2 { transform: translate(291px, 148px) rotate(58deg); }
.outer-label.label-3 { transform: translate(291px, 253px) rotate(-58deg); }
.outer-label.label-4 { transform: translate(200px, 305px); }
.outer-label.label-5 { transform: translate(109px, 253px) rotate(58deg); }
.outer-label.label-6 { transform: translate(109px, 148px) rotate(-58deg); }
.inner-label.label-1 { transform: translate(200px, 137px); }
.inner-label.label-2 { transform: translate(255px, 169px) rotate(58deg); }
.inner-label.label-3 { transform: translate(255px, 232px) rotate(-58deg); }
.inner-label.label-4 { transform: translate(200px, 263px); }
.inner-label.label-5 { transform: translate(145px, 232px) rotate(58deg); }
.inner-label.label-6 { transform: translate(145px, 169px) rotate(-58deg); }
.liuqi-outer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.liuqi-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: max-content 26px;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
}
.liuqi-mark b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #d9e5dc;
  background: rgba(255,255,255,.95);
  color: #66726a;
  font-size: 17px;
  line-height: 1;
}
.liuqi-mark em {
  color: #111827;
  font: 700 18px Arial, sans-serif;
  white-space: nowrap;
}
.liuqi-mark.branch-午 { left: 42%; top: 10%; grid-template-columns: max-content 26px; transform: translate(-50%, -50%); }
.liuqi-mark.branch-未 { left: 58%; top: 7%; grid-template-columns: 1fr; gap: 4px; transform: translate(-50%, -50%); }
.liuqi-mark.branch-申 { left: 78%; top: 18%; grid-template-columns: 26px max-content; transform: translate(-50%, -50%); }
.liuqi-mark.branch-酉 { left: 91%; top: 37%; grid-template-columns: 26px max-content; transform: translate(-50%, -50%); }
.liuqi-mark.branch-戌 { left: 91%; top: 54%; grid-template-columns: 26px max-content; transform: translate(-50%, -50%); }
.liuqi-mark.branch-亥 { left: 78%; top: 76%; grid-template-columns: 26px max-content; transform: translate(-50%, -50%); }
.liuqi-mark.branch-子 { left: 61%; top: 93%; grid-template-columns: 26px max-content; transform: translate(-50%, -50%); }
.liuqi-mark.branch-丑 { left: 43%; top: 92%; grid-template-columns: 1fr; gap: 4px; transform: translate(-50%, -50%); }
.liuqi-mark.branch-寅 { left: 23%; top: 76%; grid-template-columns: max-content 26px; transform: translate(-50%, -50%); }
.liuqi-mark.branch-卯 { left: 9%; top: 57%; grid-template-columns: max-content 26px; transform: translate(-50%, -50%); }
.liuqi-mark.branch-辰 { left: 10%; top: 42%; grid-template-columns: max-content 26px; transform: translate(-50%, -50%); }
.liuqi-mark.branch-巳 { left: 25%; top: 24%; grid-template-columns: max-content 26px; transform: translate(-50%, -50%); }
.liuqi-mark.branch-未 em { grid-column: 1; grid-row: 1; text-align: center; }
.liuqi-mark.branch-未 b { grid-column: 1; grid-row: 2; margin: 0 auto; }
.liuqi-mark.branch-丑 b { grid-column: 1; grid-row: 1; margin: 0 auto; }
.liuqi-mark.branch-丑 em { grid-column: 1; grid-row: 2; text-align: center; }
.liuqi-mark.branch-申 b,
.liuqi-mark.branch-酉 b,
.liuqi-mark.branch-戌 b,
.liuqi-mark.branch-亥 b,
.liuqi-mark.branch-子 b { grid-column: 1; grid-row: 1; }
.liuqi-mark.branch-申 em,
.liuqi-mark.branch-酉 em,
.liuqi-mark.branch-戌 em,
.liuqi-mark.branch-亥 em,
.liuqi-mark.branch-子 em { grid-column: 2; grid-row: 1; }
.liuqi-mark.branch-寅 b,
.liuqi-mark.branch-卯 b,
.liuqi-mark.branch-辰 b,
.liuqi-mark.branch-巳 b { grid-column: 2; grid-row: 1; }
.liuqi-mark.branch-寅 em,
.liuqi-mark.branch-卯 em,
.liuqi-mark.branch-辰 em,
.liuqi-mark.branch-巳 em { grid-column: 1; grid-row: 1; }
.report-page {
  background: #f7f8fa;
  color: #15191f;
  font-size: 15px;
}
.report-title {
  height: 58px;
  background: linear-gradient(90deg, #2b6417, #24560f);
}
.report-title strong {
  font-size: 22px;
  font-weight: 700;
}
.report-title a,
.report-title span {
  font-size: 30px;
  line-height: 1;
}
.success-state {
  padding: 32px 18px 28px;
  text-align: center;
}
.success-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #dcfae8;
  color: #22c768;
  display: grid;
  place-items: center;
  font: 700 48px Arial, sans-serif;
}
.success-state h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
}
.report-info {
  margin: 0 18px 16px;
  background: #fff;
  border-radius: 8px;
  padding: 22px 26px;
  box-shadow: 0 4px 16px rgba(30, 38, 45, .04);
}
.report-info dl {
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 12px 16px;
  margin: 0;
}
.report-info dt {
  color: #242932;
  font-weight: 700;
}
.report-info dd {
  margin: 0;
  color: #252a31;
  line-height: 1.45;
}
.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 18px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid #eef0f2;
  border-bottom: 1px solid #dfe5dc;
  box-shadow: 0 4px 12px rgba(30, 38, 45, .05);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid #d9dfd3;
  background: #f5f7f4;
  border-radius: 8px;
  padding: 0 13px;
  color: #4e5661;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.03);
}
.tabs button:active {
  transform: translateY(1px);
}
.tabs button:focus-visible {
  outline: 2px solid rgba(45, 100, 26, .28);
  outline-offset: 2px;
}
.tabs .active {
  color: #fff;
  background: #2d641a;
  border-color: #2d641a;
  box-shadow: 0 5px 12px rgba(45, 100, 26, .18);
}
.tabs .active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 28px;
  height: 3px;
  background: #2d641a;
  border-radius: 999px;
  transform: translateX(-50%);
}
.tab-panel { display: none; padding: 0 0 24px; }
.tab-panel.active { display: block; }
.tab-panel .card,
.tab-panel .report-card { margin: 16px 18px; }
.card h2 { margin: 0 0 16px; color: #2b4f20; font-size: 22px; }
.kv { border-top: 1px solid #eef0f2; padding: 14px 0; }
.kv:first-of-type { border-top: 0; }
.kv strong { color: #315f24; }
.kv p, .mini-card p, .channel p { white-space: pre-wrap; line-height: 1.65; margin: 8px 0 0; color: #333942; }
.mini-card, .channel {
  border: 1px solid #eceff2;
  border-radius: 8px;
  padding: 14px;
  margin: 12px 0;
  background: #fbfcfd;
}
.mini-card h3 { margin: 0 0 8px; }
.wide-img { display: block; width: calc(100% - 36px); margin: 16px 18px; border-radius: 4px; background: #fff; }
.flow-title {
  margin: 22px 24px 8px;
  color: #111827;
  font-size: 23px;
  font-weight: 700;
}
.flow-chart {
  position: relative;
  background: #fff;
  margin: 0 18px 18px;
  border-radius: 8px;
  padding: 10px 0 14px;
  overflow: hidden;
}
.flow-chart .wide-img {
  width: min(100%, 430px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.flow-overlay {
  position: absolute;
  left: 50%;
  top: 8px;
  width: min(100%, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
}
.flow-label {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  color: #050505;
  font-weight: 700;
  line-height: 1.08;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  transform: translate(-50%, -50%);
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    1px 0 0 rgba(255,255,255,.92),
    0 -1px 0 rgba(255,255,255,.92),
    -1px 0 0 rgba(255,255,255,.92);
}
.ring-inner {
  line-height: 1.08;
}
.ring-yun {
  line-height: 1.08;
}
.ring-period {
  line-height: 1.08;
  white-space: pre-line;
  text-align: center;
}
.ring-qi {
  line-height: 1.02;
}
.result-card {
  margin: 18px;
  background: #f4f6f8;
  border-radius: 8px;
  padding: 18px 20px;
}
.result-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #111827;
  font-size: 22px;
}
.result-card h2 span {
  color: #1d1d1d;
  font-size: 18px;
}
.result-line {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,.04);
}
.result-line:first-of-type { border-top: 0; }
.result-line strong {
  color: #252a31;
  line-height: 1.55;
}
.result-line p {
  margin: 0;
  color: #252a31;
  line-height: 1.55;
  white-space: pre-wrap;
}
.report-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(30, 38, 45, .04);
}
.report-card h2 {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #d4d9cf;
  color: #2d641a;
  font-size: 22px;
  font-weight: 700;
}
.external-lead {
  margin: 8px 26px 18px;
  padding: 0 0 10px;
  color: #15191f;
}
.external-lead article {
  margin: 10px 0;
}
.external-lead h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #15191f;
}
.external-lead p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #242b36;
  white-space: pre-wrap;
}
.day-card {
  background: #f5f6f8;
  border-radius: 8px;
  padding: 18px 20px;
  margin: 14px 0;
}
.day-card h3 {
  margin: 0 0 14px;
  color: #15191f;
  font-size: 18px;
}
.day-card div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  margin: 8px 0;
  line-height: 1.55;
}
.day-card b {
  color: #202732;
}
.day-card p {
  margin: 0;
  color: #333942;
  white-space: pre-wrap;
}
.day-card .points-row {
  align-items: start;
}
.day-card .points-row p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 0;
  white-space: normal;
}
.qi-analysis-card {
  background: #fff8fd;
  border: 1px solid #f1e5f0;
}
.qi-analysis-card h2 {
  color: #2d641a;
}
.qi-analysis-card article {
  padding: 2px 24px 0;
}
.qi-analysis-card h3 {
  margin: 0 0 10px;
  color: #8d45ff;
  font-size: 17px;
}
.qi-analysis-card p {
  margin: 7px 0;
  color: #303640;
  line-height: 1.55;
}
.qi-analysis-card b {
  color: #202732;
}
.meridian-card h2 {
  color: #2f6d25;
  font-size: 24px;
}
.soft-row {
  margin: 14px 0;
}
.soft-row h3 {
  margin: 0 0 9px;
  color: #20a65b;
  font-size: 17px;
}
.soft-row p {
  margin: 0 0 10px;
  background: #eafaf0;
  padding: 12px 14px;
  border-radius: 0;
  line-height: 1.55;
}
.soft-row b {
  display: block;
  color: #1f9d57;
  margin-bottom: 6px;
}
.warning-card {
  background: #fff9f4;
  border: 1px solid #f3dfd7;
}
.warning-card h2 {
  border-color: #d7ccc4;
  color: #2d641a;
}
.warning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.warning-card article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #f2d3c8;
  border-radius: 8px;
  background: #fff;
}
.warning-card article.wide {
  grid-column: 1 / -1;
}
.warning-card strong {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff1ea;
  color: #dc5037;
  font-size: 15px;
  white-space: nowrap;
}
.warning-card p {
  margin: 0;
  color: #15191f;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  white-space: pre-wrap;
}
.warning-card article.wide p {
  font-size: 17px;
  font-weight: 600;
}
.plate-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
  border: 1px solid #d9dee5;
  border-radius: 6px;
  background: #d9dee5;
}
.plate-col {
  display: grid;
  grid-template-rows: 36px 118px 118px;
  gap: 1px;
  min-width: 0;
}
.plate-col header {
  display: grid;
  place-items: center;
  background: #eaf3fb;
  color: #24313d;
  font-size: 17px;
  font-weight: 700;
}
.plate-cell {
  display: grid;
  grid-template-rows: 22px 1fr 22px;
  align-items: center;
  justify-items: center;
  min-width: 0;
  padding: 8px 2px;
  background: #fff;
}
.plate-branch {
  background: #fbfcff;
}
.plate-cell small {
  color: #8d939a;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.plate-cell b {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2a35;
  font-size: clamp(34px, 10vw, 56px);
  font-weight: 800;
  line-height: 1.12;
  overflow: visible;
}
.plate-cell em {
  min-height: 22px;
  padding: 1px 7px;
  background: #fff;
  color: #56606b;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.plate-col:nth-child(1) .plate-stem b {
  color: #d92525;
}
.plate-col:nth-child(n+4) .plate-cell b {
  color: #15984a;
}
.plate-col:nth-child(5) .plate-branch b,
.plate-col:nth-child(6) .plate-branch b {
  color: #15984a;
}
.image-card .wide-img {
  width: 92%;
  margin: 10px auto 18px;
}
.analysis-card h2 {
  color: #2d641a;
}
.analysis-card .kv {
  border: 0;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 10px 0;
  background: #edf5ff;
}
.analysis-card .kv:nth-of-type(2n) {
  background: #eefaf1;
}
.analysis-card .kv:nth-of-type(3n) {
  background: #fff9df;
}
.analysis-card .kv:nth-of-type(4n) {
  background: #fff0f6;
}
.analysis-card .kv strong {
  display: block;
  color: #3076c9;
  margin-bottom: 7px;
}
.analysis-card .kv:nth-of-type(2n) strong { color: #23a15b; }
.analysis-card .kv:nth-of-type(3n) strong { color: #d19a00; }
.analysis-card .kv:nth-of-type(4n) strong { color: #8b56d9; }
.analysis-card .kv p {
  margin: 0;
  color: #2f3640;
  line-height: 1.62;
}
.analysis-card .mini-card {
  border: 0;
  background: #f6f7fb;
  padding: 14px;
}
.analysis-card .mini-card:nth-of-type(2n) { background: #effaf2; }
.analysis-card .mini-card:nth-of-type(3n) { background: #fff8e6; }
.analysis-card .mini-card h3 {
  color: #2d641a;
  margin-bottom: 10px;
}
.analysis-card .mini-card p {
  margin: 8px 0;
  line-height: 1.6;
}
.analysis-card .mini-card b {
  color: #1f2933;
}
.report-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 18px;
}
.report-actions .large {
  min-height: 58px;
  font-size: 18px;
}
.delete-report-form {
  margin: -8px 18px 20px;
}
.delete-report-form button {
  width: 100%;
  min-height: 52px;
  border: 1px solid #ef9a9a;
  background: #fff5f5;
  color: #b42318;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
}
.disclaimer {
  margin: 0 18px 22px;
  border: 1px solid #f4df49;
  background: #fffdf0;
  color: #826b18;
  border-radius: 8px;
  padding: 16px 14px;
  text-align: center;
  line-height: 1.8;
}
.point-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid rgba(45, 100, 26, .22);
  background: #f4fbf1;
  color: #2d641a;
  border-radius: 999px;
  padding: 2px 12px;
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  place-items: center;
  z-index: 30;
  padding: 28px;
}
.modal.show { display: grid; }
.modal > div {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  text-align: center;
}
.modal img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.modal p { margin: 10px 0 0; font-weight: 700; }
.close {
  position: absolute;
  right: 10px;
  top: 8px;
  border: 0;
  background: #fff;
  font-size: 28px;
}
.profile p { color: #6b7280; }
.menu { display: grid; padding: 0; overflow: hidden; }
.menu a {
  display: flex;
  justify-content: space-between;
  padding: 20px 24px;
  border-top: 1px solid #eef0f2;
}
.menu a:first-child { border-top: 0; }
.admin-stats { margin: 24px 24px; }
.admin-page .card { padding: 0; overflow: hidden; }
.user-row {
  padding: 18px;
  border-top: 1px solid #eef0f2;
}
.user-row:first-child { border-top: 0; }
.user-row strong { display: block; font-size: 20px; }
.user-row em { color: #77808c; font-size: 15px; font-style: normal; }
.user-row p { margin: 6px 0; color: #66707d; }
.user-row form { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.user-row button {
  border: 0;
  border-radius: 8px;
  background: #eef1f5;
  color: #26313d;
  padding: 9px 13px;
  font-weight: 700;
}
.user-row .approve-btn,
.user-row .resume-btn {
  background: #2d641a;
  color: #fff;
}
.user-row .pause-btn {
  background: #fff3d8;
  color: #9a5a00;
}
.user-row .perm-btn.on {
  background: #dcfce7;
  color: #16703a;
  box-shadow: inset 0 0 0 1px #87d99d;
}
.user-row .perm-btn.off {
  background: #f3f4f6;
  color: #6b7280;
  box-shadow: inset 0 0 0 1px #d1d5db;
}
.user-row .reset-btn {
  background: #eaf2ff;
  color: #1d5fbf;
}
.user-row .danger {
  background: #fff1f1;
  color: #b42318;
  box-shadow: inset 0 0 0 1px #f1b8b3;
}
@media (min-width: 700px) {
  .phone { max-width: 820px; }
  .bottom-nav { width: min(820px, 100vw); }
  .page > .card, .banner { margin-left: 48px; margin-right: 48px; }
  .tab-panel .card { margin-left: 48px; margin-right: 48px; }
}