/* Eclipse Dominion Portal */

body{
  background:
    radial-gradient(760px 420px at 18% 5%, rgba(159,216,255,.12), transparent 60%),
    radial-gradient(760px 420px at 82% 6%, rgba(139,114,255,.16), transparent 62%),
    #050611;
}

.right{flex-wrap:wrap}
.pill{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(216,183,103,.35);
  background:rgba(255,255,255,.05);
  color:var(--light);
  font-size:13px;
}

.portal-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.portal-sidebar{
  position:sticky;
  top:16px;
  max-height:calc(100vh - 32px);
  overflow:auto;
  padding:14px;
  border:1px solid rgba(216,183,103,.22);
  border-radius:8px;
  background:rgba(5,8,18,.72);
}
.portal-brand{
  padding:12px;
  border:1px solid rgba(216,183,103,.18);
  border-radius:8px;
  background:linear-gradient(90deg, rgba(159,216,255,.08), rgba(139,114,255,.10));
  margin-bottom:12px;
}
.portal-title{
  margin:0;
  font-family:Cinzel, serif;
  font-size:16px;
  color:var(--solar);
}
.portal-clock{
  display:flex;
  justify-content:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}
.portal-clock-time{font-weight:700;color:var(--light)}
.portal-nav-vertical{display:grid;gap:10px}
.portal-nav-group{
  border:1px solid rgba(216,183,103,.16);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.portal-nav-heading{
  cursor:pointer;
  padding:10px 12px;
  font-family:Cinzel, serif;
  color:var(--solar);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:12px;
}
.portal-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-top:1px solid rgba(216,183,103,.08);
  color:var(--light);
}
.portal-nav-item:hover,.portal-nav-item.active{
  background:rgba(216,183,103,.10);
  color:var(--solar);
}
.portal-nav-icon{
  width:22px;
  min-width:22px;
  text-align:center;
  line-height:1;
}
.portal-main-content{min-width:0}
.portal-grid{display:grid;gap:14px}
.portal-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal-grid-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.portal-card{
  padding:14px;
  border:1px solid rgba(216,183,103,.18);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.portal-card-title{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.portal-card-value{
  margin-top:4px;
  font-size:26px;
  font-weight:800;
  color:var(--solar);
}
.portal-list{margin:10px 0 0;padding-left:18px}
.portal-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.portal-table{width:100%;min-width:680px;border-collapse:collapse}
.portal-table th,.portal-table td{
  padding:10px;
  border-bottom:1px solid rgba(216,183,103,.14);
  text-align:left;
}
.portal-table th{
  color:var(--solar);
  font-family:Cinzel, serif;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.portal-input,.portal-form input,.portal-form select,.portal-form textarea{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(216,183,103,.28);
  background:rgba(5,8,18,.72);
  color:var(--light);
}
.portal-field{margin-bottom:12px}
.portal-field label,.portal-form label{
  display:block;
  margin:0 0 6px;
  color:var(--solar);
  font-weight:700;
}
.portal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:9px 12px;
  border:1px solid rgba(216,183,103,.38);
  border-radius:8px;
  background:rgba(216,183,103,.12);
  color:var(--light);
  font-weight:700;
  text-align:center;
}
.portal-btn:hover,.portal-btn-ghost:hover{background:rgba(216,183,103,.20)}
.portal-btn-ghost{background:rgba(255,255,255,.035)}
.portal-link{color:var(--solar)}
.portal-messages{display:grid;gap:10px;margin-bottom:14px}
.portal-alert{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(216,183,103,.22);
  background:rgba(255,255,255,.04);
}
.portal-member-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
.portal-member-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(216,183,103,.18);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.portal-member-card:hover{
  border-color:rgba(216,183,103,.48);
  background:rgba(216,183,103,.08);
}
.portal-member-card img{
  width:48px;
  height:56px;
  object-fit:cover;
  object-position:center top;
  border-radius:6px;
  background:rgba(5,8,18,.75);
}
.portal-member-card strong,
.portal-member-card span{
  display:block;
}
.portal-member-card span{
  color:var(--muted);
  font-size:12px;
}
.portal-checkbox-inline{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.portal-checkbox-inline input{
  width:auto;
  accent-color:var(--gold);
}
.portal-status{
  display:flex!important;
  align-items:center;
  gap:6px;
}
.portal-status-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
}
.status-online{background:#41d67a;box-shadow:0 0 10px rgba(65,214,122,.7)}
.status-offline{background:#dc4d4d;box-shadow:0 0 10px rgba(220,77,77,.45)}
.status-inactive{background:#8b91a1;box-shadow:0 0 10px rgba(139,145,161,.35)}
.portal-profile-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
}
.portal-profile-hero > img{
  width:96px;
  height:116px;
  object-fit:cover;
  object-position:center top;
  border-radius:8px;
  border:1px solid rgba(216,183,103,.2);
  background:rgba(5,8,18,.75);
}
.portal-profile-list{
  display:grid;
  gap:10px;
}
.portal-profile-list div{
  display:grid;
  gap:2px;
  padding:10px 0;
  border-bottom:1px solid rgba(216,183,103,.12);
}
.portal-profile-list span{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.portal-check-grid ul{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
  margin:0;
  padding:0;
}
.portal-check-grid li{
  margin:0;
}
.portal-check-grid label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(216,183,103,.18);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-weight:700;
}
.portal-check-grid input{
  width:auto;
  accent-color:var(--gold);
}
.portal-settings-list{
  display:grid;
  gap:8px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.portal-settings-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(216,183,103,.12);
}
.portal-settings-list li:last-child{
  border-bottom:0;
}
.portal-settings-list span{
  min-width:0;
  overflow-wrap:anywhere;
}
.portal-form p{
  display:grid;
  gap:7px;
  margin:0 0 13px;
}
.portal-form p label{
  color:var(--gold);
  font-weight:800;
}
.portal-form p input[type="checkbox"]{
  width:auto;
}
.portal-code-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  margin:10px 0 2px;
  padding:16px 22px;
  border:1px solid rgba(216,183,103,.42);
  border-radius:8px;
  background:rgba(5,8,18,.76);
  color:var(--gold);
  font-size:28px;
  font-weight:900;
  letter-spacing:.08em;
}
.portal-inline-button{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  font:inherit;
}

@media (max-width:1100px){
  .portal-layout{grid-template-columns:1fr}
  .portal-sidebar{
    position:static;
    max-height:none;
    overflow:visible;
    padding:12px;
  }
  .portal-nav-vertical{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
  .portal-nav-group:not([open]){
    display:block;
  }
  .portal-grid-two{grid-template-columns:1fr}
  .portal-profile-hero{grid-template-columns:1fr}
}

@media (max-width:700px){
  .portal-nav-vertical{grid-template-columns:1fr}
  .portal-brand{padding:10px}
  .portal-title{font-size:15px}
  .portal-grid-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-member-grid{grid-template-columns:1fr}
  .portal-profile-hero > img{
    width:82px;
    height:98px;
  }
  .portal-btn{
    width:100%;
  }
  .portal-form input,
  .portal-form select,
  .portal-form textarea,
  .portal-input{
    min-width:0;
  }
}

@media (max-width:480px){
  .portal-sidebar{padding:10px}
  .portal-nav-heading{padding:10px;font-size:11px}
  .portal-nav-item{padding:10px;font-size:13px}
  .portal-grid-stats{grid-template-columns:1fr}
  .portal-card{padding:12px}
  .portal-card-value{font-size:22px}
  .portal-member-card{
    align-items:flex-start;
    padding:10px;
  }
  .portal-member-card img{
    width:42px;
    height:50px;
  }
  .portal-table th,
  .portal-table td{
    padding:8px;
    font-size:13px;
  }
}