:root{
  /* Match index page palette */

  --bg: #0f1115;                /* index background */
  --panel: #161a22;             /* card background */
  --panel2: #141821;            /* subtle gradient second layer */
  --text: #e6eaf2;              /* primary text */
  --muted: #9aa4b2;             /* muted grey */
  --line: rgba(255,255,255,.08);/* subtle borders */
  --accent: #8ab4ff;            /* same link/accent as index */
  --good: #78dba9;
  --warn: #ffd37a;
  --bad: #ff7a7a;
  --chip: rgba(255,255,255,.06);
  --shadow: 0 8px 24px rgba(0,0,0,.4);
  --radius: 16px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
    html,body{background:var(--bg); color:var(--text); font-family:var(--sans); margin:0;}
    a{color:var(--accent); text-decoration:none;}
    a:hover{text-decoration:underline;}
    .wrap{max-width:1100px; margin:0 auto; padding:18px;}
    header{
      display:flex; gap:12px; align-items:center; justify-content:space-between;
      margin-bottom:14px;
    }
    .title{display:flex; flex-direction:column; gap:4px;}
    h1{font-size:22px; margin:0; letter-spacing:.2px;}
    .sub{color:var(--muted); font-size:13px;}
    .panel{
      background:linear-gradient(180deg,var(--panel),var(--panel2));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .controls{padding:14px;}
    .grid{
      display:grid;
      grid-template-columns: 1.4fr .8fr .8fr .8fr .9fr .9fr;
      gap:10px;
    }
    @media (max-width: 980px){
      .grid{grid-template-columns: 1fr 1fr; }
    }
    .field{display:flex; flex-direction:column; gap:6px;}
    label{font-size:12px; color:var(--muted);}
    input[type="text"], input[type="date"], select, button{
      border-radius:12px;
      border:1px solid var(--line);
      background:#0c1320;
      color:var(--text);
      padding:10px 10px;
      font-size:14px;
      outline:none;
    }
    input[type="text"]::placeholder{color:#7f8db0;}
    button{
      cursor:pointer;
      background:#0e1a2a;
    }
    button:hover{border-color:#2b3a56;}
    .row2{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      justify-content:space-between;
    }
    .leftRow, .rightRow{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
    .chips{display:flex; gap:8px; flex-wrap:wrap;}
    .chip{
      background:var(--chip);
      border:1px solid var(--line);
      border-radius:999px;
      padding:6px 10px;
      font-size:12px;
      color:var(--muted);
    }
    .chip b{color:var(--text);}
    .status{
      display:flex; gap:10px; align-items:center; color:var(--muted); font-size:13px;
    }
    .list{margin-top:14px; padding:0; overflow:hidden;}
    .listHead{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      display:flex; justify-content:space-between; align-items:center; gap:10px;
    }
    .listHead .count{color:var(--muted); font-size:13px;}
    .items{padding:0;}
	.item{
	  padding:14px;
	  border-top:1px solid rgba(255,255,255,.06);
	  display:grid;
	  grid-template-columns: 1fr 220px;  /* ← 2 columns only */
	  gap:12px;
	  align-items:start;
	}

	@media (max-width: 980px){
	  .item{
		grid-template-columns: 1fr;
	  }
	}
    .when{
      font-family:var(--mono);
      font-size:12px;
      color:var(--muted);
      line-height:1.4;
    }
    .when .date{color:var(--text); font-size:13px;}
    .name{
      font-size:16px;
      font-weight:650;
      margin:0 0 6px 0;
    }
    .meta{
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .meta .place{color:var(--text);}
.actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
    @media (max-width: 980px){
      .actions{align-items:flex-start;}
    }
    .btnRow{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
/* Galaxy-style small buttons */
.btnSmall{
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);

  backdrop-filter: blur(6px);
  transition: all .15s ease;
}

.btnSmall:hover{
  background: rgba(96,165,250,.18);        /* galaxy accent glow */
  border-color: rgba(96,165,250,.55);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(96,165,250,.25);
}

.btnSmall:active{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(96,165,250,.18);
}
    .hint{color:var(--muted); font-size:12px;}
    .empty{
      padding:20px 14px;
      color:var(--muted);
    }
    .footerNote{
      margin-top:10px;
      color:var(--muted);
      font-size:12px;
      padding:0 2px;
    }
/* Galaxy-style nav buttons */

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

.homeBtn,
.statsBtn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);

  text-decoration:none;
  color:#2dff00; /* same green tone as galaxy */

  transition:all .15s ease;
}

.homeBtn:hover,
.statsBtn:hover{
  background:rgba(96,165,250,.22);
  border-color:rgba(96,165,250,.55);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(96,165,250,.25);
}

.header{
  padding:16px 18px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.leftHead{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:280px;
}
.name{
  font-size:16px;
  font-weight:800;
  color: var(--accent);
}
/* Prevent underline on button-style links */
.btnSmall:hover,
.homeBtn:hover,
.statsBtn:hover {
  text-decoration: none !important;
}