/* Shared layout for resonance bingo cards (共鸣刻度卡).
   Palette is driven by the --bingo-* variables below; defaults match the
   Aro-Ace page. Other pages override the full set in an inline <style>. */
:root {
  --bingo-flag-gradient: linear-gradient(90deg, var(--bingo-accent), var(--bingo-sec-a-grad2));
  --bingo-title-gradient: var(--bingo-flag-gradient);
  /* 主色（sec-A 渐变起点、标题强调、图例/圆环文字） */
  --bingo-accent: #7a6597;
  --bingo-accent-rgb: 122, 101, 151;

  /* 图例圆点 / 圆环 各等级 */
  --bingo-lv25-bg: #f2edf7;
  --bingo-lv25-border: #c7b4d6;
  --bingo-lv50-bg: #e9dff2;
  --bingo-lv50-border: #ad93c6;
  --bingo-lv50-text: #6b578a;
  --bingo-lv75-bg: #dfd0ea;
  --bingo-lv75-border: #9272b5;
  --bingo-lv75-text: #5b477a;
  --bingo-lv100-bg: #cbb7dc;
  --bingo-lv100-text: #47355f;

  /* 格子通用等级背景（未按板块着色时） */
  --bingo-cell-lv25: #fbf9fd;
  --bingo-cell-lv50: #f6f1fb;
  --bingo-cell-lv75: #f1eaf8;
  --bingo-cell-lv100: #e9e0f2;

  /* 重置按钮 */
  --bingo-btn-border: #d6cde0;
  --bingo-btn-hover-bg: #f2eef6;

  /* 板块 A-D：头部渐变、热度底色 (rgb)、各等级文字色 */
  --bingo-sec-a-grad2: #a793bf;
  --bingo-sec-a-t25: #6b578a;
  --bingo-sec-a-t50: #5b477a;
  --bingo-sec-a-t75: #4f3d6e;
  --bingo-sec-a-t100: #47355f;

  --bingo-sec-b-grad1: #5f7a63;
  --bingo-sec-b-grad2: #9ab09c;
  --bingo-sec-b-rgb: 95, 122, 99;
  --bingo-sec-b-t25: #4e6653;
  --bingo-sec-b-t50: #445a48;
  --bingo-sec-b-t75: #3a4e3f;
  --bingo-sec-b-t100: #2e3f33;

  --bingo-sec-c-grad1: #3e6b86;
  --bingo-sec-c-grad2: #86a9bf;
  --bingo-sec-c-rgb: 62, 107, 134;
  --bingo-sec-c-t25: #345a72;
  --bingo-sec-c-t50: #2c4d63;
  --bingo-sec-c-t75: #234153;
  --bingo-sec-c-t100: #1b3442;

  --bingo-sec-d-grad1: #a07052;
  --bingo-sec-d-grad2: #caa88d;
  --bingo-sec-d-rgb: 160, 112, 82;
  --bingo-sec-d-t25: #8a5f45;
  --bingo-sec-d-t50: #7a533c;
  --bingo-sec-d-t75: #6b4732;
  --bingo-sec-d-t100: #5a3b29;

  /* 暗色模式 */
  --bingo-dk-accent: #c4a8e0;
  --bingo-dk-accent-strong: #9a7fb8;
  --bingo-dk-legend-rgb: 168, 140, 199;
  --bingo-dk-lv25-bg: #221b2a;
  --bingo-dk-lv25-border: #45395a;
  --bingo-dk-lv25-text: #c4a8e0;
  --bingo-dk-lv50-bg: #2e2438;
  --bingo-dk-lv50-border: #5a4d6e;
  --bingo-dk-lv50-text: #cdb6e8;
  --bingo-dk-lv75-bg: #3d2f4d;
  --bingo-dk-lv75-border: #705a8a;
  --bingo-dk-lv75-text: #d9c6ec;
  --bingo-dk-lv100-bg: #4a3a5e;
  --bingo-dk-lv100-text: #e8dcf5;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans SC', sans-serif;
  background: #f6f4f1;
  color: #1a1a2e;
  min-height: 100vh;
  padding: 28px 16px 60px;
  -webkit-tap-highlight-color: transparent;
}

.page {
  max-width: 950px;
  margin: 0 auto;
}

/* 头部 */
.header {
  text-align: center;
  margin-bottom: 24px;
  padding: 12px 8px 0;
}

.header h1 {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(20px, 5vw, 34px);
  font-weight: 700;
  line-height: 1.25;
}

.header h1 em {
  color: var(--bingo-accent);
  font-style: normal;
}

/* 标题前缀跟随顶部彩条配色（渐变文字） */
.header h1 .title-main {
  color: var(--bingo-accent);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .header h1 .title-main {
    background: var(--bingo-title-gradient, var(--bingo-flag-gradient));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  :root[data-theme="dark"] .header h1 .title-main {
    filter: brightness(1.35) saturate(1.08);
  }
}

.sub {
  margin-top: 8px;
  font-size: clamp(11.5px, 2.5vw, 13px);
  color: #888899;
}

/* 提示 */
.tip {
  background: #fff;
  border-left: 4px solid var(--bingo-accent);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 13px;
  color: #444;
  margin-bottom: 20px;
  line-height: 1.65;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 图例 (0 / 25% / 50% / 75% / 100%) */
.legend {
  display: flex;
  gap: 12px 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: rgba(var(--bingo-accent-rgb), 0.08);
  padding: 4px 12px;
  border-radius: 40px;
}

.ldot {
  width: 26px;
  height: 26px;
  border-radius: 40px;
  background: #f0f0f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #ccc;
  color: #555;
}

.ldot.lv25 {
  background: var(--bingo-lv25-bg);
  border-color: var(--bingo-lv25-border);
  color: var(--bingo-accent);
}

.ldot.lv50 {
  background: var(--bingo-lv50-bg);
  border-color: var(--bingo-lv50-border);
  color: var(--bingo-lv50-text);
}

.ldot.lv75 {
  background: var(--bingo-lv75-bg);
  border-color: var(--bingo-lv75-border);
  color: var(--bingo-lv75-text);
}

.ldot.lv100 {
  background: var(--bingo-lv100-bg);
  border-color: var(--bingo-accent);
  color: var(--bingo-lv100-text);
  font-weight: 800;
}

.ldot.lv0::after {
  content: '0';
  font-size: 11px;
  font-weight: 600;
}

.ldot.lv25::after {
  content: '25%';
}

.ldot.lv50::after {
  content: '50%';
}

.ldot.lv75::after {
  content: '75%';
}

.ldot.lv100::after {
  content: '100%';
}

/* 重置按钮 */
.reset-btn {
  display: block;
  margin: 0 auto 24px;
  padding: 8px 28px;
  border: 1.5px solid var(--bingo-btn-border);
  border-radius: 40px;
  background: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--bingo-accent);
  cursor: pointer;
  transition: all 0.2s;
}

.reset-btn:hover {
  background: var(--bingo-btn-hover-bg);
  border-color: var(--bingo-accent);
}

/* 区域卡片 */
.section {
  margin-bottom: 28px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  background: #fff;
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: white;
  position: relative;
}

.sec-badge {
  font-family: 'Noto Serif SC', serif;
  font-size: 19px;
  font-weight: 700;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-info h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sec-info p {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

/* 板块共鸣显示（右上角） */
.sec-stats {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  padding: 5px 12px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.sec-stats span:first-child {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.9;
}

.sec-stats .sec-ratio {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.sec-stats small {
  font-size: 10px;
  font-weight: 500;
  margin-left: 2px;
}

.sec-A .sec-head {
  background: linear-gradient(120deg, var(--bingo-accent), var(--bingo-sec-a-grad2));
}

.sec-B .sec-head {
  background: linear-gradient(120deg, var(--bingo-sec-b-grad1), var(--bingo-sec-b-grad2));
}

.sec-C .sec-head {
  background: linear-gradient(120deg, var(--bingo-sec-c-grad1), var(--bingo-sec-c-grad2));
}

.sec-D .sec-head {
  background: linear-gradient(120deg, var(--bingo-sec-d-grad1), var(--bingo-sec-d-grad2));
}

/* GRID 默认5列 */
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid #eee;
}

.cell {
  position: relative;
  cursor: pointer;
  padding: 14px 8px 12px;
  text-align: center;
  border: 1px solid #f2efe9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  transition: all 0.1s ease;
  min-height: 112px;
  background: white;
}

.cell:active {
  transform: scale(0.96);
}

.cell-icon {
  font-size: 26px;
  line-height: 1;
  transition: transform 0.1s;
}

.cell:hover .cell-icon {
  transform: scale(1.05);
}

.cell-text {
  font-size: 11px;
  line-height: 1.5;
  color: #4b4b60;
  font-weight: 500;
  max-width: 98%;
}

/* 圆环标识（百分比） */
.ring {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 30px;
  background: #ffffffcc;
  backdrop-filter: blur(2px);
  border: 1.5px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  transition: all 0.2s cubic-bezier(0.2, 1.2, 0.4, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cell .ring::after {
  content: attr(data-label);
  font-size: 9.5px;
  font-weight: 800;
}

/* 等级背景 (0,25,50,75,100) + 主题色深化 */
.cell[data-level="0"] {
  background: white;
}

.cell[data-level="25"] {
  background: var(--bingo-cell-lv25);
}

.cell[data-level="50"] {
  background: var(--bingo-cell-lv50);
}

.cell[data-level="75"] {
  background: var(--bingo-cell-lv75);
}

.cell[data-level="100"] {
  background: var(--bingo-cell-lv100);
}

.sec-A .cell[data-level="25"] {
  background: rgba(var(--bingo-accent-rgb), 0.06);
}

.sec-A .cell[data-level="50"] {
  background: rgba(var(--bingo-accent-rgb), 0.12);
}

.sec-A .cell[data-level="75"] {
  background: rgba(var(--bingo-accent-rgb), 0.22);
}

.sec-A .cell[data-level="100"] {
  background: rgba(var(--bingo-accent-rgb), 0.34);
}

.sec-A .cell[data-level="25"] .cell-text {
  color: var(--bingo-sec-a-t25);
  font-weight: 500;
}

.sec-A .cell[data-level="50"] .cell-text {
  color: var(--bingo-sec-a-t50);
  font-weight: 500;
}

.sec-A .cell[data-level="75"] .cell-text {
  color: var(--bingo-sec-a-t75);
  font-weight: 550;
}

.sec-A .cell[data-level="100"] .cell-text {
  color: var(--bingo-sec-a-t100);
  font-weight: 600;
}

.sec-B .cell[data-level="25"] {
  background: rgba(var(--bingo-sec-b-rgb), 0.06);
}

.sec-B .cell[data-level="50"] {
  background: rgba(var(--bingo-sec-b-rgb), 0.12);
}

.sec-B .cell[data-level="75"] {
  background: rgba(var(--bingo-sec-b-rgb), 0.22);
}

.sec-B .cell[data-level="100"] {
  background: rgba(var(--bingo-sec-b-rgb), 0.34);
}

.sec-B .cell[data-level="25"] .cell-text {
  color: var(--bingo-sec-b-t25);
}

.sec-B .cell[data-level="50"] .cell-text {
  color: var(--bingo-sec-b-t50);
}

.sec-B .cell[data-level="75"] .cell-text {
  color: var(--bingo-sec-b-t75);
}

.sec-B .cell[data-level="100"] .cell-text {
  color: var(--bingo-sec-b-t100);
  font-weight: 600;
}

.sec-C .cell[data-level="25"] {
  background: rgba(var(--bingo-sec-c-rgb), 0.06);
}

.sec-C .cell[data-level="50"] {
  background: rgba(var(--bingo-sec-c-rgb), 0.12);
}

.sec-C .cell[data-level="75"] {
  background: rgba(var(--bingo-sec-c-rgb), 0.22);
}

.sec-C .cell[data-level="100"] {
  background: rgba(var(--bingo-sec-c-rgb), 0.34);
}

.sec-C .cell[data-level="25"] .cell-text {
  color: var(--bingo-sec-c-t25);
}

.sec-C .cell[data-level="50"] .cell-text {
  color: var(--bingo-sec-c-t50);
}

.sec-C .cell[data-level="75"] .cell-text {
  color: var(--bingo-sec-c-t75);
}

.sec-C .cell[data-level="100"] .cell-text {
  color: var(--bingo-sec-c-t100);
  font-weight: 600;
}

.sec-D .cell[data-level="25"] {
  background: rgba(var(--bingo-sec-d-rgb), 0.06);
}

.sec-D .cell[data-level="50"] {
  background: rgba(var(--bingo-sec-d-rgb), 0.12);
}

.sec-D .cell[data-level="75"] {
  background: rgba(var(--bingo-sec-d-rgb), 0.22);
}

.sec-D .cell[data-level="100"] {
  background: rgba(var(--bingo-sec-d-rgb), 0.34);
}

.sec-D .cell[data-level="25"] .cell-text {
  color: var(--bingo-sec-d-t25);
}

.sec-D .cell[data-level="50"] .cell-text {
  color: var(--bingo-sec-d-t50);
}

.sec-D .cell[data-level="75"] .cell-text {
  color: var(--bingo-sec-d-t75);
}

.sec-D .cell[data-level="100"] .cell-text {
  color: var(--bingo-sec-d-t100);
  font-weight: 600;
}

/* 圆环各等级颜色 */
.cell[data-level="0"] .ring {
  border-color: #dbdbdb;
  background: #fafafaaa;
}

.cell[data-level="0"] .ring::after {
  content: "0";
  color: #aaa;
  font-size: 10px;
}

.cell[data-level="25"] .ring {
  border-color: var(--bingo-lv25-border);
  background: #ffffffdd;
}

.cell[data-level="25"] .ring::after {
  content: "25%";
  color: var(--bingo-accent);
}

.cell[data-level="50"] .ring {
  border-color: var(--bingo-lv50-border);
  background: var(--bingo-cell-lv50);
}

.cell[data-level="50"] .ring::after {
  content: "50%";
  color: var(--bingo-lv50-text);
  font-weight: 800;
}

.cell[data-level="75"] .ring {
  border-color: var(--bingo-lv75-border);
  background: var(--bingo-cell-lv75);
}

.cell[data-level="75"] .ring::after {
  content: "75%";
  color: var(--bingo-lv75-text);
  font-weight: 800;
}

.cell[data-level="100"] .ring {
  border-color: var(--bingo-accent);
  background: var(--bingo-cell-lv100);
}

.cell[data-level="100"] .ring::after {
  content: "100%";
  color: var(--bingo-lv100-text);
  font-weight: 800;
}

/* 底部简版提醒卡片 */
.footer {
  background: #fff;
  border-radius: 24px;
  padding: 20px 24px;
  margin-top: 28px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.footer h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer ul {
  padding-left: 20px;
  font-size: 12.5px;
  color: #5a5a70;
  line-height: 1.9;
}

/* 响应式 */
@media (max-width: 720px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 580px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cell {
    min-height: 118px;
    padding: 12px 5px 8px;
  }

  .cell-icon {
    font-size: 22px;
  }

  .ring {
    width: 24px;
    height: 24px;
    top: 4px;
    right: 4px;
  }

  .ring::after {
    font-size: 7.5px;
  }

  .sec-stats {
    padding: 3px 8px;
    font-size: 11px;
  }

  .sec-stats .sec-ratio {
    font-size: 15px;
  }
}

@media (max-width: 420px) {
  .cell-text {
    font-size: 10px;
  }
}

/* 返回首页按钮 */
.prism-back-home {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(24, 33, 47, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #6a7b8f;
  font: 600 13px/1.2 "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(24, 33, 47, 0.10);
  backdrop-filter: blur(12px);
}

.prism-back-home:hover {
  color: #111111;
  border-color: rgba(24, 33, 47, 0.26);
}

.prism-back-home:focus-visible {
  outline: 2px solid #1e5f65;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .prism-back-home {
    top: 10px;
    left: 10px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* 暗色模式 */
:root[data-theme="dark"] body {
  background: #0f1117;
  color: #e3e7ee;
}

:root[data-theme="dark"] .sub {
  color: #9aa0b0;
}

:root[data-theme="dark"] .header h1 em {
  color: var(--bingo-dk-accent);
}

:root[data-theme="dark"] .tip {
  background: #181b24;
  color: #c3c9d6;
  border-left-color: var(--bingo-dk-accent-strong);
  box-shadow: none;
}

:root[data-theme="dark"] .legend-item {
  background: rgba(var(--bingo-dk-legend-rgb), 0.12);
}

:root[data-theme="dark"] .ldot {
  background: #262a36;
  border-color: #3a3f4c;
  color: #aab0bd;
}

:root[data-theme="dark"] .ldot.lv25 {
  background: var(--bingo-dk-lv25-bg);
  border-color: var(--bingo-dk-lv25-border);
  color: var(--bingo-dk-lv25-text);
}

:root[data-theme="dark"] .ldot.lv50 {
  background: var(--bingo-dk-lv50-bg);
  border-color: var(--bingo-dk-lv50-border);
  color: var(--bingo-dk-lv50-text);
}

:root[data-theme="dark"] .ldot.lv75 {
  background: var(--bingo-dk-lv75-bg);
  border-color: var(--bingo-dk-lv75-border);
  color: var(--bingo-dk-lv75-text);
}

:root[data-theme="dark"] .ldot.lv100 {
  background: var(--bingo-dk-lv100-bg);
  border-color: var(--bingo-dk-accent-strong);
  color: var(--bingo-dk-lv100-text);
}

:root[data-theme="dark"] .reset-btn {
  background: #181b24;
  border-color: #3a3f4c;
  color: var(--bingo-dk-accent);
}

:root[data-theme="dark"] .reset-btn:hover {
  background: var(--bingo-dk-lv25-bg);
  border-color: var(--bingo-dk-accent-strong);
}

:root[data-theme="dark"] .section {
  background: #15171f;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .grid {
  border-top-color: #262a36;
}

:root[data-theme="dark"] .cell {
  background: #15171f;
  border-color: #22252f;
}

:root[data-theme="dark"] .cell-text {
  color: #cdd2dc;
}

:root[data-theme="dark"] .cell[data-level] {
  background: #181b24;
}

:root[data-theme="dark"] .sec-A .cell[data-level] .cell-text,
:root[data-theme="dark"] .sec-B .cell[data-level] .cell-text,
:root[data-theme="dark"] .sec-C .cell[data-level] .cell-text,
:root[data-theme="dark"] .sec-D .cell[data-level] .cell-text {
  color: #e8ebf1;
}

:root[data-theme="dark"] .ring {
  background: rgba(20, 23, 32, 0.9) !important;
  border-color: #3a3f4c !important;
  color: #e3e7ee !important;
}

:root[data-theme="dark"] .footer {
  background: #15171f;
  color: #aab0bd;
}

:root[data-theme="dark"] .footer h4 {
  color: var(--bingo-dk-accent);
}

:root[data-theme="dark"] .footer ul,
:root[data-theme="dark"] .footer li,
:root[data-theme="dark"] .footer a {
  color: #aab0bd;
}

:root[data-theme="dark"] .prism-back-home {
  background: rgba(20, 23, 32, 0.92);
  color: #c6cfdc;
  border-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .prism-back-home:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

/* 移动端共鸣页优先保证单元格可读、可点按，不强行在视口中塞入三列小格。 */
@media (max-width: 620px) {
  body {
    padding:
      calc(4.8rem + env(safe-area-inset-top, 0px))
      12px
      calc(3rem + env(safe-area-inset-bottom, 0px));
  }

  .header {
    margin-bottom: 18px;
    padding: 0 4px;
  }

  .header h1 {
    font-size: clamp(1.55rem, 7vw, 1.95rem);
    line-height: 1.32;
  }

  .sub {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .tip {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 0 11px 11px 0;
    font-size: 0.82rem;
    line-height: 1.7;
    box-shadow: none;
  }

  .legend {
    width: calc(100% + 24px);
    margin: 0 -12px 14px;
    padding: 2px 12px 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .legend::-webkit-scrollbar {
    display: none;
  }

  .legend-item {
    flex: 0 0 auto;
  }

  .reset-btn {
    width: 100%;
    min-height: 44px;
    margin-bottom: 16px;
  }

  .section {
    margin-bottom: 16px;
    border-radius: 15px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.055);
  }

  .sec-head {
    flex-wrap: wrap;
    gap: 9px;
    padding: 12px 13px;
  }

  .sec-badge {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .sec-info {
    flex: 1;
    min-width: 150px;
  }

  .sec-info h2 {
    font-size: 0.94rem;
  }

  .sec-stats {
    padding: 4px 9px;
  }

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

  .cell {
    min-height: 120px;
    padding: 13px 6px 9px;
    gap: 8px;
  }

  .cell-icon {
    font-size: 24px;
  }

  .cell-text {
    max-width: 96%;
    font-size: 0.68rem;
    line-height: 1.5;
  }

  .footer {
    margin-top: 18px;
    padding: 16px;
    border-radius: 15px;
    box-shadow: none;
  }

  .footer ul {
    padding-left: 1.2rem;
    font-size: 0.8rem;
    line-height: 1.75;
  }
}