@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0d0b14;
  --surface: #151220;
  --surface2: #1d192b;
  --purple: #a78bfa;
  --purple2: #8055dc;
  --text: #eeeaf7;
  --muted: #a49bb8;
  --border: rgba(190,160,255,.15);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, sans-serif;
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }

.topbar {
  min-height: 76px;
  padding: 0 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #100d19;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.brand-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg,#a78bfa,#6d28d9);
}

.admin-link, .nav-link {
  color: var(--purple);
  font-size: .9rem;
  font-weight: 600;
}

.main-container {
  width: min(1050px, 88%);
  margin: 0 auto;
  flex: 1;
}

.welcome {
  padding: 100px 0 55px;
  text-align: center;
}

.eyebrow {
  color: var(--purple);
  font: 500 .72rem 'DM Mono', monospace;
  letter-spacing: 2px;
}

.welcome h1, .page-intro h1 {
  margin: 18px 0;
  font-size: clamp(2.4rem,5vw,4rem);
  line-height: 1.15;
  letter-spacing: -2px;
}

.welcome h1 span, .page-intro h1 span {
  color: var(--purple);
}

.welcome p, .page-intro p {
  color: var(--muted);
  max-width: 570px;
  margin: 0 auto;
}

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

.portal-card {
  min-height: 280px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  transition: .2s ease;
}

.portal-card:hover, .media-card:hover, .admin-card-item:hover {
  transform: translateY(-4px);
  border-color: rgba(167,139,250,.6);
  background: var(--surface2);
}

.portal-icon, .media-icon, .admin-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(167,139,250,.13);
  color: var(--purple);
  font-size: 1.5rem;
}

.portal-card h2, .media-card h2 {
  margin: 8px 0;
  font-size: 1.5rem;
}

.portal-card p, .media-card p, .admin-card-item p {
  color: var(--muted);
  font-size: .9rem;
}

.portal-action {
  margin-top: auto;
  color: var(--purple);
  font-size: .9rem;
  font-weight: 600;
}

.portal-action span { margin-left: 5px; }

.welcome-note {
  margin: 40px 0 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: .8rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #66d19e;
}

.page-intro {
  padding: 75px 0 40px;
}

.page-intro p { margin: 0; }

.media-grid, .admin-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}

.media-card, .admin-card-item {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  transition: .2s ease;
}

.media-card h2 { margin-bottom: 5px; }

.coming-soon {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--purple);
  font: .7rem 'DM Mono', monospace;
}

.info-panel, .notice {
  margin: 30px 0 60px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
}

.info-panel h3 { margin-top: 0; }

.info-panel p, .notice p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .9rem;
}

.notice {
  border-color: rgba(240,180,90,.3);
  background: rgba(180,120,40,.08);
}

.notice strong { color: #e8c58d; }

.admin-grid { margin-bottom: 65px; }

.admin-card-item h3 { margin: 0; }

.admin-card-item p { min-height: 50px; }

.admin-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
}

.site-footer {
  padding: 25px 8%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
}

.site-footer a { color: var(--purple); }

@media(max-width:650px) {
  .topbar { padding: 0 6%; }
  .main-container { width: 88%; }
  .welcome { padding: 70px 0 40px; }
  .portal-grid, .media-grid, .admin-grid {
    grid-template-columns: 1fr;
  }
  .portal-card { min-height: 245px; }
  .page-intro { padding-top: 55px; }
  .site-footer { flex-direction: column; }
}

/* Friendly typography for friends and family */
body.home-page,
body.guest-page {
    font-family: 'Nunito', sans-serif;
}

.home-page .welcome h1,
.guest-page .page-intro h1 {
    font-weight: 800;
    letter-spacing: -1.5px;
}

.home-page .portal-card h2,
.guest-page .media-card h2 {
    font-weight: 800;
}

.home-page .welcome p,
.guest-page .page-intro p,
.guest-page .media-card p {
    font-size: 1rem;
    line-height: 1.8;
}

/* Make the admin link discreet */
.home-page .admin-link {
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.45;
    padding: 5px 8px;
    border-radius: 6px;
    transition: opacity 0.2s, background 0.2s;
}

.home-page .admin-link:hover {
    opacity: 1;
    background: var(--surface2);
}

/* Keep administration more technical */
body.admin-page {
    font-family: 'Inter', sans-serif;
}

/* ===== GUEST-FACING DESIGN OVERRIDES ===== */

body.home-page,
body.guest-page {
    font-family: 'Nunito', 'Trebuchet MS', sans-serif !important;
}

.home-page .topbar {
    position: relative;
}

.home-page .welcome h1,
.guest-page .page-intro h1 {
    font-family: 'Nunito', 'Trebuchet MS', sans-serif !important;
    font-weight: 800;
    letter-spacing: -1px;
}

.home-page .welcome p,
.guest-page .page-intro p,
.guest-page .media-card p {
    font-size: 1.05rem;
    line-height: 1.9;
}

.home-page .portal-card h2,
.guest-page .media-card h2 {
    font-family: 'Nunito', 'Trebuchet MS', sans-serif !important;
    font-weight: 800;
}

/* Small, discreet admin link */
.home-page .admin-link {
    position: absolute;
    top: 10px;
    right: 8%;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 400 !important;
    opacity: 0.35;
    padding: 3px 6px;
}

.home-page .admin-link:hover {
    opacity: 0.9;
}

/* Keep admin technical */
body.admin-page {
    font-family: 'Inter', sans-serif !important;
}

/* ===== HOMELAB HUB HOMEPAGE ===== */

.top-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.top-nav a {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
  transition: color .2s ease;
}

.top-nav a:hover {
  color: var(--purple);
}

.top-nav .admin-link {
  color: var(--purple);
  opacity: 1;
  font-size: .85rem !important;
  font-weight: 700 !important;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.hub-section {
  margin-bottom: 55px;
}

.section-heading {
  margin-bottom: 20px;
}

.section-heading h2 {
  margin: 7px 0 0;
  font-size: 1.7rem;
  letter-spacing: -.5px;
}

.admin-section .admin-card-item {
  display: block;
  max-width: 510px;
}

.admin-section .admin-card-item p {
  min-height: 0;
}

@media(max-width:650px) {
  .topbar {
    padding: 16px 6%;
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }

  .top-nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 15px;
  }

  .top-nav a {
    font-size: .8rem;
  }
}

/* Small, discreet logout button */
.logout-link {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  opacity: .65;
  transition: .2s ease;
}

.logout-link:hover {
  color: var(--purple);
  opacity: 1;
  background: var(--surface2);
}