:root {
  --deep: #282158;
  --violet: #7655df;
  --aqua: #397aee;
  --coral: #f35caf;
  --muted: #77768e;
}

.portal-page {
  background: #eceafa;
  background-image:
    radial-gradient(circle at 7% 8%, rgba(57, 122, 238, 0.45), transparent 29%),
    radial-gradient(circle at 94% 16%, rgba(243, 92, 175, 0.38), transparent 30%),
    radial-gradient(circle at 58% 88%, rgba(118, 85, 223, 0.34), transparent 34%),
    linear-gradient(145deg, #e9efff, #faecf8 52%, #e9e5fb);
}

.portal-bg i:nth-child(1) { background: #4d7cf0; }
.portal-bg i:nth-child(2) { background: #8555dd; }
.portal-bg i:nth-child(3) { background: #f35caf; }

.portal-header {
  background: linear-gradient(110deg, rgba(42, 59, 142, 0.96), rgba(116, 79, 215, 0.9) 52%, rgba(225, 69, 160, 0.84));
  box-shadow: 0 18px 50px rgba(62, 40, 132, 0.22);
}

.portal-brand strong { font-size: 1.1rem; }
.portal-brand strong em {
  color: #ffd5f0;
  font-style: normal;
  font-weight: 700;
}

.portal-logo {
  color: #6d4bd5;
  background: linear-gradient(145deg, #fff, #f3eaff);
  box-shadow: 0 8px 22px rgba(35, 25, 93, 0.25);
}

.portal-logo svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-main { margin-top: 24px; }
.portal-title > div > span { color: #7554d9; }

.portal-page .filter-tabs button.active {
  background: linear-gradient(135deg, #456fe0, #8653d9 58%, #d94b9e);
  box-shadow: 0 9px 24px rgba(105, 71, 205, 0.28);
}

.portal-info article > span {
  background: linear-gradient(145deg, #4c77e7, #8b55da 55%, #da4fa2);
}

/* Colorful service cards */
.portal-page .system-grid {
  gap: 20px;
}

.portal-page .system-card {
  min-height: 290px;
  padding: 27px 25px 23px;
  border-color: color-mix(in srgb, var(--accent) 28%, white);
  background:
    radial-gradient(circle at 88% 90%, rgba(255, 255, 255, 0.7) 0 24%, transparent 24.5%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--accent) 22%, white),
      color-mix(in srgb, var(--accent) 9%, white));
  box-shadow: 0 17px 32px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px white;
}

.portal-page .system-card::before {
  width: 190px;
  height: 190px;
  right: -72px;
  top: auto;
  bottom: -82px;
  background: white;
  filter: none;
  opacity: 0.28;
}

.portal-page .system-card::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  height: 8px;
  border-radius: 25px 25px 0 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white));
}

.portal-page .system-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, white);
  box-shadow: 0 28px 50px color-mix(in srgb, var(--accent) 25%, transparent);
}

.portal-page .system-icon {
  width: 82px;
  height: 82px;
  margin-bottom: 22px;
  border-radius: 27px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 72%, white), var(--accent));
  box-shadow: 0 16px 28px color-mix(in srgb, var(--accent) 31%, transparent);
}

.portal-page .system-icon::after {
  display: none;
}

.portal-page .system-icon svg {
  width: 41px;
  height: 41px;
  stroke-width: 2;
}

.portal-page .card-category {
  margin-bottom: 10px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.76);
  color: color-mix(in srgb, var(--accent) 82%, #20234c);
  box-shadow: 0 5px 15px rgba(58, 46, 101, 0.07);
  font-size: 10px;
}

.portal-page .system-card h3 {
  font-size: 22px;
  color: #24223f;
}

.portal-page .system-card p {
  color: #6f718a;
  font-size: 13px;
  font-weight: 600;
}

.portal-page .card-decoration {
  display: none;
}

.portal-page .card-arrow {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(49, 43, 82, 0.08);
}

.portal-page .system-card:hover .card-arrow {
  background: var(--accent);
  color: white;
  transform: translate(3px, -3px) rotate(8deg);
}

.portal-page .system-meta {
  color: color-mix(in srgb, var(--accent) 62%, #777b94);
}

@media (max-width: 640px) {
  .portal-shell { padding-top: 12px; }
  .portal-header { border-radius: 22px; }
  .portal-main { margin-top: 16px; }
}