/* ================================================================
   cityuhkantiscam.dev — Shared Design System
   ================================================================
   All static pages under cityuhkantiscam.dev use this.
   Add new pages: <link rel="stylesheet" href="/cityuhkantiscam-common.css">
   Do NOT copy these styles inline — always reference this file.
   ================================================================ */

:root {
  /* ── Palette ── */
  --bg-primary:    #0f1117;
  --bg-secondary:  #1a1d27;
  --bg-card:       #1e2131;
  --bg-card-hover: #252840;
  --border-color:  #2a2d3e;

  --text-primary:   #e8eaed;
  --text-secondary: #9aa0b0;
  --text-muted:     #5f6578;

  --accent-blue:    #4a9eff;
  --accent-green:   #34d399;
  --accent-purple:  #a78bfa;
  --accent-red:     #ef4444;
  --accent-yellow:  #fbbf24;
  --accent-orange:  #fb923c;

  /* ── Geometry ── */
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,.3);

  /* ── Typography ── */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Fira Code", monospace;

  /* ── Layout ── */
  --nav-height: 52px;
  --max-width: 960px;
  --gap: 20px;
}

/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 15px; }

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--gap) 24px;
}

/* ── Navbar ── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 28px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}
.navbar a {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
  transition: all .2s;
}
.navbar a:hover { color: var(--text-primary); background: var(--bg-card); text-decoration: none; }

.nav-title {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  transition: transform .15s, border-color .15s;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-blue);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-primary { background: var(--accent-blue); color: #fff; }
.btn-danger  { background: rgba(239,68,68,.15); color: var(--accent-red); border: 1px solid rgba(239,68,68,.2); }
.btn-ghost   { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }

/* ── Inputs ── */
.input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: border-color .2s;
}
.input:focus { border-color: var(--accent-blue); }
.input::placeholder { color: var(--text-muted); }

select.input { cursor: pointer; }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.badge-green  { background: rgba(52,211,153,.15); color: var(--accent-green); }
.badge-blue   { background: rgba(74,158,255,.12); color: var(--accent-blue); }
.badge-purple { background: rgba(167,139,250,.12); color: var(--accent-purple); }
.badge-red    { background: rgba(239,68,68,.15); color: var(--accent-red); }
.badge-yellow { background: rgba(251,191,36,.18); color: var(--accent-yellow); }

/* ── Tags ── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px;
  font-size: 12px; white-space: nowrap;
}
.tag-blue   { background: rgba(74,158,255,.12);  color: var(--accent-blue);  border: 1px solid rgba(74,158,255,.15); }
.tag-green  { background: rgba(16,185,129,.12);  color: var(--accent-green); border: 1px solid rgba(16,185,129,.15); }
.tag-purple { background: rgba(167,139,250,.12); color: var(--accent-purple); border: 1px solid rgba(167,139,250,.15); }

/* ── Skeleton (loading placeholder) ── */
@keyframes sk-pulse { 0%,100%{opacity:.3} 50%{opacity:.6} }
.skeleton {
  animation: sk-pulse 1.5s ease-in-out infinite;
  background: var(--border-color);
  border-radius: 4px;
}

/* ── Utility ── */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }
.gap-2 { gap: 8px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }