:root,
 body.theme-light {
     --ios-page-bg:
         radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2) 35%, transparent 36%),
         linear-gradient(135deg, #eef4ff 0%, #e6ecff 35%, #f8fbff 100%);

     --ios-card-bg: rgba(255, 255, 255, 0.22);
     --ios-card-border: rgba(255, 255, 255, 0.45);
     --ios-card-shadow: 0 10px 35px rgba(31, 38, 135, 0.10);

     --ios-badge-bg: rgba(255, 255, 255, 0.38);
     --ios-badge-border: rgba(255, 255, 255, 0.6);
     --ios-badge-color: #2d4a8a;

     --ios-title-color: #13254c;
     --ios-subtitle-color: #41567f;
     --ios-card-title-color: #16305e;
     --ios-list-color: #33496f;
     --ios-mini-title-color: #1a376b;
     --ios-highlight-color: #31486d;
     --ios-remedy-title-color: #173160;
     --ios-remedy-text-color: #3a5078;
     --ios-summary-color: #314a70;

     --ios-stat-bg: rgba(255, 255, 255, 0.34);
     --ios-stat-border: rgba(255, 255, 255, 0.45);
     --ios-stat-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
     --ios-stat-title-color: #526b9a;
     --ios-stat-value-color: #11264e;

     --ios-mini-card-bg: rgba(255, 255, 255, 0.26);
     --ios-mini-card-border: rgba(255, 255, 255, 0.42);

     --ios-highlight-bg: rgba(255, 255, 255, 0.30);
     --ios-highlight-border: #88a9ff;

     --ios-remedy-bg: rgba(255, 255, 255, 0.28);
     --ios-remedy-border: rgba(255, 255, 255, 0.40);
 }

 body.theme-dark {
     --ios-page-bg:
         radial-gradient(circle at top left, rgba(60, 78, 120, 0.28), rgba(18, 24, 38, 0.08) 35%, transparent 36%),
         linear-gradient(135deg, #0f172a 0%, #111827 35%, #1e293b 100%);

     --ios-card-bg: rgba(17, 24, 39, 0.52);
     --ios-card-border: rgba(148, 163, 184, 0.18);
     --ios-card-shadow: 0 10px 35px rgba(0, 0, 0, 0.32);

     --ios-badge-bg: rgba(59, 130, 246, 0.12);
     --ios-badge-border: rgba(96, 165, 250, 0.28);
     --ios-badge-color: #bfdbfe;

     --ios-title-color: #eff6ff;
     --ios-subtitle-color: #cbd5e1;
     --ios-card-title-color: #dbeafe;
     --ios-list-color: #cbd5e1;
     --ios-mini-title-color: #bfdbfe;
     --ios-highlight-color: #d6e4ff;
     --ios-remedy-title-color: #dbeafe;
     --ios-remedy-text-color: #cbd5e1;
     --ios-summary-color: #dbeafe;

     --ios-stat-bg: rgba(30, 41, 59, 0.58);
     --ios-stat-border: rgba(148, 163, 184, 0.16);
     --ios-stat-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
     --ios-stat-title-color: #93c5fd;
     --ios-stat-value-color: #f8fafc;

     --ios-mini-card-bg: rgba(30, 41, 59, 0.48);
     --ios-mini-card-border: rgba(148, 163, 184, 0.14);

     --ios-highlight-bg: rgba(30, 41, 59, 0.58);
     --ios-highlight-border: #60a5fa;

     --ios-remedy-bg: rgba(30, 41, 59, 0.50);
     --ios-remedy-border: rgba(148, 163, 184, 0.14);
 }

 .ios-glass-page {
     padding: 24px 0 60px;
     background: var(--ios-page-bg);
 }

 .ios-glass-wrap {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 14px;
 }

 .ios-glass-card {
     background: var(--ios-card-bg);
     border: 1px solid var(--ios-card-border);
     box-shadow: var(--ios-card-shadow);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     border-radius: 28px;
     padding: 24px;
     margin-bottom: 22px;
     overflow: hidden;
 }

 .ios-hero {
     text-align: center;
     padding: 34px 22px;
 }

 .ios-badge {
     display: inline-block;
     padding: 8px 16px;
     border-radius: 999px;
     background: var(--ios-badge-bg);
     border: 1px solid var(--ios-badge-border);
     color: var(--ios-badge-color);
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 16px;
 }

 .ios-title {
     font-size: 32px;
     line-height: 1.4;
     font-weight: 800;
     color: var(--ios-title-color);
     margin-bottom: 12px;
 }

 .ios-subtitle {
     font-size: 17px;
     line-height: 1.9;
     color: var(--ios-subtitle-color);
     max-width: 900px;
     margin: 0 auto;
 }

 .ios-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 16px;
     margin-top: 18px;
 }

 .ios-stat-box {
     background: var(--ios-stat-bg);
     border: 1px solid var(--ios-stat-border);
     border-radius: 22px;
     padding: 20px 16px;
     text-align: center;
     box-shadow: var(--ios-stat-shadow);
 }

 .ios-stat-box h3 {
     margin: 0 0 10px;
     font-size: 15px;
     color: var(--ios-stat-title-color);
     font-weight: 700;
 }

 .ios-stat-box p {
     margin: 0;
     font-size: 28px;
     font-weight: 800;
     color: var(--ios-stat-value-color);
 }

 .ios-card-title {
     font-size: 24px;
     color: var(--ios-card-title-color);
     font-weight: 800;
     margin-bottom: 16px;
 }

 .ios-list {
     padding-left: 18px;
     margin-bottom: 0;
 }

 .ios-list li {
     font-size: 17px;
     line-height: 2;
     color: var(--ios-list-color);
     margin-bottom: 6px;
 }

 .ios-two-col {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 18px;
 }

 .ios-mini-card {
     background: var(--ios-mini-card-bg);
     border: 1px solid var(--ios-mini-card-border);
     border-radius: 22px;
     padding: 18px;
     height: 100%;
 }

 .ios-mini-title {
     font-size: 19px;
     font-weight: 700;
     color: var(--ios-mini-title-color);
     margin-bottom: 10px;
 }

 .ios-highlight {
     background: var(--ios-highlight-bg);
     border-left: 4px solid var(--ios-highlight-border);
     border-radius: 18px;
     padding: 16px 18px;
     font-size: 16px;
     line-height: 1.9;
     color: var(--ios-highlight-color);
     margin-top: 15px;
 }

 .ios-remedy-box {
     background: var(--ios-remedy-bg);
     border: 1px solid var(--ios-remedy-border);
     border-radius: 22px;
     padding: 18px;
     margin-bottom: 14px;
 }

 .ios-remedy-box h4 {
     font-size: 18px;
     font-weight: 800;
     color: var(--ios-remedy-title-color);
     margin-bottom: 8px;
 }

 .ios-remedy-box p {
     margin-bottom: 0;
     font-size: 16px;
     line-height: 1.9;
     color: var(--ios-remedy-text-color);
 }

 .ios-summary {
     font-size: 17px;
     line-height: 2;
     color: var(--ios-summary-color);
     margin-bottom: 0;
 }

 @media (max-width: 991px) {
     .ios-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .ios-two-col {
         grid-template-columns: 1fr;
     }

     .ios-title {
         font-size: 26px;
     }
 }

 @media (max-width: 576px) {
     .ios-grid {
         grid-template-columns: 1fr 1fr;
         gap: 12px;
     }

     .ios-glass-card {
         padding: 18px;
         border-radius: 22px;
     }

     .ios-title {
         font-size: 22px;
     }

     .ios-subtitle,
     .ios-list li,
     .ios-summary {
         font-size: 15px;
     }

     .ios-card-title {
         font-size: 21px;
     }

     .ios-stat-box p {
         font-size: 24px;
     }
 }