:root {
  --tekno-navy: #071034;
  --tekno-navy-soft: #0a1736;
  --tekno-blue: #0b55ff;
  --tekno-cyan: #00d4ff;
  --tekno-ice: #eaf6ff;
  --tekno-ink: #081224;
  --tekno-mint: #9ff6e3;
  --panel-bg: rgba(12, 21, 42, 0.82);
  --panel-border: rgba(255, 255, 255, 0.09);
  --text-main: #f4f8ff;
  --text-soft: rgba(234, 246, 255, 0.72);
  --text-muted: rgba(234, 246, 255, 0.56);
  --danger: #ff758f;
  --danger-soft: rgba(255, 117, 143, 0.16);
  --success: #77f4d4;
  --success-soft: rgba(119, 244, 212, 0.16);
  --warning: #ffd36c;
  --warning-soft: rgba(255, 211, 108, 0.14);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 80px rgba(0, 212, 255, .12);
  --shadow-soft: 0 16px 48px rgba(3, 10, 26, 0.42);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.portal-body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-main);
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  background:
    radial-gradient(960px 520px at 18% 8%, rgba(0, 212, 255, .18), transparent 56%),
    radial-gradient(980px 540px at 88% 10%, rgba(11, 85, 255, .22), transparent 58%),
    linear-gradient(180deg, #071034 0%, #08163f 48%, #051126 100%);
  overflow-x: hidden;
}

.portal-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .56;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at 50% 22%, rgba(0,0,0,1), rgba(0,0,0,.34) 58%, rgba(0,0,0,0) 82%);
  -webkit-mask-image: radial-gradient(circle at 50% 22%, rgba(0,0,0,1), rgba(0,0,0,.34) 58%, rgba(0,0,0,0) 82%);
}

.portal-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0 16px;
}

.portal-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border: 1px solid var(--panel-border);
  border-top: none;
  border-radius: 0 0 30px 30px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(7, 16, 52, 0.76);
  box-shadow: var(--shadow-glow);
}

.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-main);
  text-decoration: none;
}

.portal-brand img {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  box-shadow: var(--shadow-glow);
}

.portal-brand-title {
  font-weight: 800;
  font-size: 1.04rem;
}

.portal-brand-subtitle {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--text-muted);
}

.portal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-nav a,
.portal-header-actions a,
.portal-header-actions button,
.portal-link-button,
.portal-button,
.portal-secondary-button,
.portal-danger-button,
.portal-chip {
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: .22s ease;
}

.portal-nav a {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-soft);
}

.portal-nav a:hover,
.portal-nav a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-link-button,
.portal-header-actions a,
.portal-header-actions button,
.portal-secondary-button {
  padding: 11px 16px;
  border-radius: 14px;
  font-weight: 700;
  font-size: .93rem;
  color: var(--text-main);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

.portal-link-button:hover,
.portal-header-actions a:hover,
.portal-header-actions button:hover,
.portal-secondary-button:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.portal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 16px;
  font-weight: 800;
  font-size: .96rem;
  color: var(--tekno-ink);
  background: linear-gradient(90deg, var(--tekno-blue), var(--tekno-cyan));
  box-shadow: var(--shadow-glow);
}

.portal-button:hover {
  transform: translateY(-1px) scale(1.01);
}

.portal-button[disabled],
.portal-secondary-button[disabled],
.portal-danger-button[disabled] {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.portal-danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 16px;
  font-weight: 800;
  font-size: .96rem;
  color: #fff;
  background: linear-gradient(90deg, #ff6b86, #ff8f5d);
  box-shadow: 0 20px 48px rgba(255, 107, 134, .18);
}

.portal-shell {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px 80px;
}

.portal-stack {
  display: grid;
  gap: 22px;
}

.portal-hero,
.portal-card,
.portal-info-panel {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-glow);
}

.portal-hero {
  padding: 30px 28px;
}

.portal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-soft);
  font-size: .82rem;
}

.portal-kicker-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--tekno-cyan);
  box-shadow: 0 0 18px rgba(0,212,255,.9);
}

.portal-hero h1 {
  margin: 16px 0 10px;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.05;
}

.portal-hero p,
.portal-card p,
.portal-empty,
.portal-label,
.portal-subtitle {
  color: var(--text-soft);
  line-height: 1.74;
}

.portal-card {
  padding: 28px;
}

.portal-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.portal-card-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
}

.portal-card-actions,
.portal-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.portal-grid {
  display: grid;
  gap: 16px;
}

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

.portal-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.portal-field {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.portal-field-label {
  margin-bottom: 8px;
  font-size: .8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.portal-field-value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-word;
}

.portal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 800;
  background: rgba(255,255,255,.08);
  color: var(--text-main);
  border: 1px solid rgba(255,255,255,.08);
}

.portal-chip.is-highlight {
  color: var(--tekno-ink);
  background: linear-gradient(90deg, rgba(11,85,255,.95), rgba(0,212,255,.95));
}

.portal-chip.is-success {
  background: var(--success-soft);
  color: var(--success);
}

.portal-chip.is-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.portal-chip.is-danger {
  background: var(--danger-soft);
  color: #ffc2cc;
}

.portal-form {
  display: grid;
  gap: 16px;
}

.portal-form-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-input-wrap {
  display: grid;
  gap: 8px;
}

.portal-input-wrap label {
  color: var(--text-soft);
  font-weight: 700;
}

.portal-input,
.portal-textarea {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,16,52,.72);
  color: #fff;
  padding: 14px 16px;
  font-size: 1rem;
  outline: none;
  transition: .2s ease;
}

.portal-input:focus,
.portal-textarea:focus {
  border-color: rgba(0,212,255,.48);
  box-shadow: 0 0 0 4px rgba(0,212,255,.12);
}

.portal-help {
  color: var(--text-muted);
  font-size: .88rem;
}

.portal-status {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: var(--text-main);
}

.portal-status.is-danger {
  background: var(--danger-soft);
  border-color: rgba(255,117,143,.24);
}

.portal-status.is-success {
  background: var(--success-soft);
  border-color: rgba(119,244,212,.24);
}

.portal-status.is-warning {
  background: var(--warning-soft);
  border-color: rgba(255,211,108,.22);
}

.portal-profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}

.portal-avatar {
  width: 86px;
  height: 86px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(11,85,255,.82), rgba(0,212,255,.82));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--tekno-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.8rem;
  overflow: hidden;
}

.portal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portal-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 4px 0;
}

.portal-footer {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-muted);
  font-size: .92rem;
}

.portal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.portal-footer a:hover {
  color: #fff;
}

.portal-mobile-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.portal-mobile-panel {
  display: none;
  gap: 12px;
  padding: 0 16px 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.portal-mobile-panel.is-open {
  display: grid;
}

.portal-mobile-panel .portal-nav {
  display: grid;
  gap: 10px;
}

.portal-mobile-panel .portal-nav a,
.portal-mobile-panel .portal-header-actions a,
.portal-mobile-panel .portal-header-actions button {
  width: 100%;
  justify-content: center;
}

.portal-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.portal-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: var(--tekno-cyan);
  animation: portal-spin 1s linear infinite;
}

@keyframes portal-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 960px) {
  .portal-nav,
  .portal-header-actions {
    display: none;
  }

  .portal-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .portal-profile,
  .portal-grid.two,
  .portal-info-grid,
  .portal-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .portal-header {
    padding: 0 10px;
  }

  .portal-header-inner,
  .portal-hero,
  .portal-card {
    padding-left: 18px;
    padding-right: 18px;
  }

  .portal-shell {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 60px;
  }

  .portal-card-header {
    flex-direction: column;
  }
}