:root{
  --bg: #0f172a;
  --panel: #0b1220;
  --muted: #94a3b8;
  --muted-2: #c7d2fe;
  --accent-500: #6366f1;
  --accent-600: #4f46e5;
  --accent-700: #4338ca;
  --glass: rgba(49,46,129,0.08);
  --card: #0f172a;
  --card-2: #0b1220;
  --radius-lg: 14px;
  --radius-md: 10px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --container: 1280px;
  --glass-border: rgba(49,46,129,0.2);
  --shadow-1: 0 8px 30px rgba(2,6,23,0.6);
  --shadow-2: 0 16px 40px rgba(2,6,23,0.6);

  /* font fallback */
  font-family: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family:var(--font-family);
}

/* Header */
header{
    padding:1rem 1.25rem;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    background: linear-gradient(135deg, rgba(15,23,42,0.6), rgba(7,10,26,0.6));
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    color: #fff;
}
header h1{
    margin:0;
    font-size:1.125rem;
    font-weight:800;
    letter-spacing:0.01em;
    color: #fff;
}

/* Close / escape button (aligned top-right like login.html) */
.close-btn{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    background: rgba(255,255,255,0.04);
    color: var(--muted-2, #c7d2fe);
    border:0;
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
    border-radius:10px;
    box-shadow: 0 8px 24px rgba(2,6,23,0.6);
    transition:background .12s, transform .08s;
}
.close-btn:hover{ background: rgba(255,255,255,0.06); transform:translateY(-50%) scale(1.02); }
.close-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,0.12); }

/* Main card - use site card colors */
main{
    max-width: 900px;
    margin:1.5rem auto;
    background: linear-gradient(180deg, rgba(15,23,42,0.8), rgba(11,17,28,0.8));
    padding:1.25rem;
    border-radius:12px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    color: var(--muted-2, #c7d2fe);
}

/* meta line and typography */
.meta{ color: var(--muted, #94a3b8); font-size:.875rem; margin-bottom:.75rem; text-align:right; }
h2{ margin:0 0 .5rem 0; font-size:1rem; color: var(--muted-2, #c7d2fe); font-weight:700; }
p{ margin:.25rem 0; line-height:1.6; color: var(--muted-2, #c7d2fe); }

/* scrollable content */
.scroll{
    max-height:60vh;
    overflow:auto;
    padding-right:.5rem;
    scrollbar-width:thin;
}
.scroll::-webkit-scrollbar{ width:10px; height:10px; }
.scroll::-webkit-scrollbar-track{ background:transparent; }
.scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.04); border-radius:8px; }

/* Actions / buttons - use same gradients as site */
.actions{
    display:flex;
    gap:.5rem;
    margin-top:1rem;
    justify-content:flex-end;
}

.button{
    background: linear-gradient(90deg,var(--accent-600, #4f46e5), #8b5cf6);
    color:#fff;
    border:0;
    padding:.5rem .75rem;
    border-radius:10px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    font-weight:700;
    font-size:0.95rem;
    box-shadow: 0 8px 24px rgba(79,70,229,0.08);
}
.button.secondary{
    background: transparent;
    color: var(--muted-2, #c7d2fe);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius:10px;
    padding:.5rem .75rem;
}

#printBtn{
    background: transparent;
    color: var(--muted-2, #c7d2fe);
    border: 1px solid rgba(255,255,255,0.04);
    padding:.5rem .75rem;
    border-radius:10px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    font-weight:700;
    font-size:0.95rem;
}

/* footer */
footer{ margin-top:1rem; color: var(--muted, #94a3b8); font-size:.875rem; text-align:center; }

/* responsive tweaks */
@media (max-width:520px){
    main{ margin:1rem; padding:1rem; border-radius:10px; }
    header h1{ font-size:1rem; }
    .close-btn{ right:8px; width:34px; height:34px; font-size:16px; }
}

/* print rules: hide controls and remove shadows */
@media print{
    header .close-btn, .actions, .meta{ display:none !important; }
    main{ box-shadow:none; border-radius:0; max-width:100%; margin:0; padding:0.5in; background: #fff; color:#000; }
    .scroll{ max-height:none; overflow:visible; }
}

/* small utility classes */
.text-muted{ color:var(--muted, #94a3b8) !important; font-size:.875rem; }
.center{ text-align:center; }
.scroll > section + section {
    margin-top: 0.75rem;

}