feat: group referral bonus display by tariff

frontend/src/styles/webapp.css

@@ -1537,6 +1537,89 @@ a {
   font-size: 12px;
 }
 
+.referral-tariff-dropdown {
+  display: grid;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-sheen-soft);
+}
+
+.referral-tariff-summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+  padding: 10px 11px;
+  cursor: pointer;
+  list-style: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.referral-tariff-summary::-webkit-details-marker {
+  display: none;
+}
+
+.referral-tariff-copy {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.referral-tariff-copy strong {
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.referral-tariff-copy small {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.referral-tariff-dropdown summary:hover .premium-server-help-icon,
+.referral-tariff-dropdown[open] .premium-server-help-icon {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+
+.referral-tariff-details {
+  display: grid;
+  grid-template-rows: 0fr;
+  padding: 0 8px;
+  opacity: 0;
+  transform: translateY(-2px);
+  transform-origin: top;
+  transition:
+    grid-template-rows 0.22s ease,
+    padding 0.22s ease,
+    opacity 0.18s ease,
+    transform 0.22s ease;
+}
+
+.referral-tariff-details > div {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.referral-tariff-detail-list {
+  display: grid;
+  gap: 8px;
+}
+
+.referral-tariff-dropdown[open] .referral-tariff-details {
+  grid-template-rows: 1fr;
+  padding: 0 8px 8px;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.referral-bonus-row-nested {
+  background: var(--surface);
+}
+
 .settings-profile {
   display: flex;
   align-items: center;