:root{
  --primary:#005eb8; --primary-dark:#003d80; --secondary:#ffffff; --background:#f6f6f6;
  --card-bg:white; --card-shadow:rgba(0,0,0,0.08); --button:#0072ce; --button-hover:#005ea5;
  --dark-bg:#0d1117; --dark-panel:#161b22; --dark-text:#eee;
}

/* General */
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;}
button,a.button{display:inline-block;padding:.8rem 1.5rem;background:var(--button);color:white;text-decoration:none;font-weight:bold;border:none;border-radius:6px;cursor:pointer;transition:.2s;}
button:hover,a.button:hover{background:var(--button-hover);}

/* THS portal (citizen) */
header{background:var(--primary);color:var(--secondary);padding:1.5rem 2rem;display:flex;align-items:center;gap:1rem;}
header img{max-height:60px;border-radius:4px;}
header h1{margin:0;font-size:2rem;}
nav{display:flex;justify-content:center;gap:1rem;margin:2rem 0;flex-wrap:wrap;}
.hero{background:#e5f0fb;padding:2rem;margin:2rem;border-radius:8px;text-align:center;box-shadow:0 4px 8px var(--card-shadow);}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:0 2rem;}
.card{background:var(--card-bg);padding:1.5rem;border-radius:8px;box-shadow:0 4px 8px var(--card-shadow);transition:.2s;}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 12px var(--card-shadow);}
.card h3{margin-top:0;color:var(--primary-dark);}
.card p{margin:.5rem 0 1rem;font-size:.95rem;line-height:1.4;}
.card a{display:inline-block;text-decoration:none;background:var(--button);color:white;padding:.6rem 1.2rem;border-radius:4px;font-weight:bold;transition:.2s;}
.card a:hover{background:var(--button-hover);}
footer{margin-top:3rem;padding:2rem;text-align:center;font-size:.85rem;color:#555;}

/* THSConnect dashboard */
.dark-body{background:var(--dark-bg);color:var(--dark-text);}
.dark-header{background:var(--dark-panel);padding:1rem 2rem;display:flex;align-items:center;gap:1rem;}
#popup{display:none;position:fixed;top:10%;left:50%;transform:translateX(-50%);background:var(--dark-panel);padding:2rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.7);max-width:600px;color:var(--dark-text);}
#popup ul{list-style:none;padding:0;}
#popup li{margin:.5rem 0;}
#popup button{background:#f00;color:white;margin-top:1rem;}