/* Shared theme derived from scarepoint_mockup.html but neutral/personal-home variant */
:root{
  --bg: #0f1320;
  --panel: #181d2e;
  --panel-2: #0f1424;
  --ink: #e8ecf7;
  --muted: #a7b0c4;
  --accent: #61a0ff; /* soft blue accent */
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
html, body { height: 100%; }
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink); background: radial-gradient(1200px 800px at 20% -10%, #1b2140 0%, #0c1020 60%, #070a14 100%), var(--bg);
}
.app{ display:grid; grid-template-columns: 260px 1fr; grid-template-rows: 64px 1fr; grid-template-areas: "topbar topbar" "sidebar content"; height:100vh; }
.topbar{ grid-area: topbar; grid-column: 1 / -1; display:flex; align-items:center; gap:16px; padding:0 20px; background: linear-gradient(90deg, #13182a, #1b2240); border-bottom:1px solid #242a43; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; }
.menu-btn{ display:none; }
.brand .logo{ width:32px; height:32px; position:relative; border-radius:6px; background:linear-gradient(135deg, #242a43 0%, #0e1325 70%); box-shadow: inset 0 0 16px rgba(97,160,255,.12); }
.brand .word{ font-size:18px; }
.tagline{ color: var(--muted); font-size:12px; opacity:.9; }

.user{ display:flex; align-items:center; gap:12px; margin-left:16px; }
.avatar{ width:28px; height:28px; border-radius:50%; background: linear-gradient(135deg, #39406b, #1a203a); border:1px solid #2a3258; box-shadow: var(--shadow); }
.sidebar{ background:linear-gradient(180deg, #0e1324, #0b0f1c); border-right:1px solid #1e2440; padding:16px 12px; grid-area: sidebar; grid-column:1 / 2; }
.nav h4{ font-size:11px; letter-spacing:.12em; color:#94a0c2; opacity:.75; margin:20px 12px 8px; text-transform:uppercase; }
.nav a{ display:flex; align-items:center; gap:10px; color:#cfd6ea; text-decoration:none; padding:10px 12px; border-radius:8px; margin:2px 4px; }
.nav a:hover{ background: #151a30; }
.nav a.active{ background: linear-gradient(90deg, #161c36, #141a31); border:1px solid #222a4e; }

/* Ensure sidebar nav links keep muted color and no underline (override global link rules) */
.nav a, .nav a:link, .nav a:visited, .nav a:hover, .nav a:focus {
  color: #cfd6ea !important;
  text-decoration: none !important;
}
.content{ background: transparent; padding:18px 20px; overflow:auto; position:relative; grid-area: content; grid-column:2 / 3; }
.hero{ background: linear-gradient(135deg, rgba(97,160,255,.06), rgba(107,255,122,.02)); border:1px solid #252c4e; border-radius:14px; padding:16px; display:flex; align-items:center; gap:16px; box-shadow: var(--shadow); }
.hero-icon{
  display:inline-grid;
  place-items:center;
  width:auto;
  height:auto;
  min-width:44px;
  min-height:44px;
  font-size:28px; /* larger emoji */
  line-height:1;
  background:transparent; /* remove circle */
  box-shadow:none;
  border-radius:0;
}
.hero h1{ font-size:18px; margin:0; }
.hero p{ margin:2px 0 0; color:#aeb7d6; font-size:13px; }
.toolbar{ display:flex; align-items:center; gap:8px; margin:16px 0 10px; }
.btn{ background:#131831; border:1px solid #252c4e; color:#e8ecf7; padding:8px 10px; border-radius:8px; font-size:13px; }
.btn.primary{ background: linear-gradient(180deg, var(--accent), #2f7bff); border-color: #2f7bff; color:#f7fbff; font-weight:700; }
.lib{ background: linear-gradient(180deg, #11162a, #0d1224); border:1px solid #242c50; border-radius:12px; box-shadow: var(--shadow); }
.lib .head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #222a4e; }
.lib .title{ display:flex; align-items:center; gap:8px; font-weight:700; }
.lib table{ width:100%; border-collapse:collapse; font-size:14px; }
.lib th, .lib td{ padding:10px 12px; border-bottom:1px solid #1b2346; }
.lib th{ text-align:left; font-size:12px; color:#9aa6cb; letter-spacing:.04em; text-transform:uppercase; }
.lib tr:hover{ background:#121733; }
.namecell{ display:flex; align-items:center; gap:10px; }
.pill{ font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid #30406b; background:#0f152e; color:#b9c3e8; }
.footer{ color:#7f8ab3; font-size:12px; margin-top:10px; opacity:.8; }
.icon{ width:18px; height:18px; border-radius:4px; display:inline-grid; place-items:center; color:#0d0f18; font-weight:800; font-size:10px; }
.section{ margin-top:18px; }
.section h2{ font-size:16px; margin:0 0 8px; }
.section p{ color:#bfc9e6; line-height:1.5; }
/* Themed link styles used across site */
a, a:link, a:visited {
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease, box-shadow .12s ease, transform .08s ease;
}
a:hover, a:focus {
  color: #a7d0ff;
  outline: none;
  text-decoration: underline dotted 1px;
}
a:active{
  transform: translateY(1px);
}
/* Links inside the data table (Photo links) should be compact and clear */
.lib td a{
  background: transparent;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(97,160,255,.12);
  color: var(--accent);
  font-weight:600;
  font-size:13px;
}
.lib td a:hover{ background: rgba(97,160,255,.06); box-shadow: inset 0 -2px 0 rgba(97,160,255,.03); }
/* Specific back-link style in footer */
.back-link{ color: #d9e8ff; text-decoration: none; border-bottom:1px dashed rgba(217,232,255,.08); }
.back-link:hover, .back-link:focus{ color: white; border-bottom-color: rgba(217,232,255,.25); }
/* Responsive */
@media (max-width:900px){
  .app{ grid-template-columns: 1fr; grid-template-rows: 64px 1fr; }
  .sidebar{ display:none; }
  /* .search width removed since search was removed from markup */
  /* Sidebar toggle button (mobile) */
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; color:var(--ink); padding:8px; border-radius:8px; font-size:18px; cursor:pointer; margin-right:8px; }
  /* When toggled, show sidebar as a fixed panel */
  .app.sidebar-open .sidebar{ display:block; position:fixed; left:0; top:64px; bottom:0; width:260px; z-index:60; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
  /* Overlay to dim content when sidebar is open */
  .sidebar-overlay{ display:none; }
  .sidebar-overlay.visible{ display:block; position:fixed; inset:64px 0 0 0; background: rgba(0,0,0,0.4); z-index:50; }
}