/* ================================================================
   PROPHECY INTELLIGENCE PLATFORM — DESIGN SYSTEM v2.0
   Space Grotesk + Space Mono | Glassmorphism | Dark Intel Aesthetic
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
  --font-ui:   'Space Grotesk', system-ui, sans-serif;
  --font-data: 'Space Mono', 'Courier New', monospace;

  --bg:              #060a14;
  --bg-surface:      rgba(255,255,255,0.04);
  --bg-surface-hover:rgba(255,255,255,0.07);
  --bg-input:        rgba(0,0,0,0.45);
  --bg-overlay:      rgba(4,8,16,0.94);
  --bg-modal:        rgba(8,14,26,0.99);

  --border:       rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.16);
  --border-focus: rgba(0,255,136,0.5);

  --text:         #e8eaf0;
  --text-muted:   #8892a4;
  --text-dim:     #3d4a5c;
  --text-inverse: #060a14;

  --green:        #00ff88;
  --green-dim:    rgba(0,255,136,0.12);
  --green-border: rgba(0,255,136,0.35);
  --green-glow:   0 0 24px rgba(0,255,136,0.35);

  --red:          #ff4444;
  --red-dim:      rgba(255,68,68,0.12);
  --red-border:   rgba(255,68,68,0.35);
  --red-glow:     0 0 24px rgba(255,68,68,0.35);

  --orange:       #ff8c00;
  --orange-dim:   rgba(255,140,0,0.12);
  --orange-border:rgba(255,140,0,0.35);
  --orange-glow:  0 0 24px rgba(255,140,0,0.35);

  --yellow:       #ffcc00;
  --yellow-dim:   rgba(255,204,0,0.12);
  --yellow-border:rgba(255,204,0,0.35);

  --blue:         #4488ff;
  --blue-dim:     rgba(68,136,255,0.12);
  --blue-border:  rgba(68,136,255,0.35);
  --blue-glow:    0 0 24px rgba(68,136,255,0.35);

  --purple:       #aa44ff;
  --purple-dim:   rgba(170,68,255,0.12);

  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
  --sp5:20px; --sp6:24px; --sp8:32px; --sp10:40px; --sp12:48px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:9999px;
  --t:0.18s ease; --t-lg:0.35s ease;
  --z-bg:-1; --z-ticker:100; --z-nav:200; --z-modal:1000;
}

/* ================================================================
   RESET + BASE
   ================================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
  padding-top:44px;
}
a { color:var(--green); text-decoration:none; transition:opacity var(--t); }
a:hover { opacity:0.75; }
button { font-family:var(--font-ui); }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:var(--r-full); }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.22); }

/* ================================================================
   AMBIENT BACKGROUND ORBS
   ================================================================ */
.bg-orbs { position:fixed; inset:0; z-index:var(--z-bg); overflow:hidden; pointer-events:none; }
.bg-orbs::before {
  content:''; position:absolute;
  width:900px; height:900px; top:-350px; left:-250px;
  background:radial-gradient(circle, rgba(0,255,136,0.055) 0%, transparent 65%);
  animation:orb 22s ease-in-out infinite alternate;
}
.bg-orbs::after {
  content:''; position:absolute;
  width:700px; height:700px; bottom:-250px; right:-150px;
  background:radial-gradient(circle, rgba(255,68,68,0.045) 0%, transparent 65%);
  animation:orb 28s ease-in-out infinite alternate-reverse;
}
.bg-orb-blue {
  position:absolute; width:600px; height:600px; top:40%; right:15%;
  background:radial-gradient(circle, rgba(68,136,255,0.04) 0%, transparent 65%);
  animation:orb 34s ease-in-out infinite alternate;
}
@keyframes orb {
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(50px,35px) scale(1.12); }
}

/* ================================================================
   NEWS TICKER
   ================================================================ */
.ticker-bar {
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-ticker); height:44px;
  display:flex; align-items:center;
  background:rgba(6,10,20,0.97);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.ticker-label {
  flex-shrink:0; padding:0 var(--sp4);
  font-family:var(--font-data); font-size:10px; font-weight:700;
  letter-spacing:0.12em; color:var(--text-inverse);
  background:var(--green); height:100%;
  display:flex; align-items:center; white-space:nowrap;
}
.ticker-overflow {
  flex:1; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
}
.ticker-content {
  display:flex; align-items:center;
  animation:ticker-roll 100s linear infinite;
  width:max-content;
}
.ticker-bar:hover .ticker-content { animation-play-state:paused; }
@keyframes ticker-roll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ticker-item {
  display:inline-flex; align-items:center; gap:var(--sp2);
  white-space:nowrap; padding:0 var(--sp5);
  font-size:12px; color:var(--text-muted);
  cursor:pointer; transition:color var(--t);
}
.ticker-item:hover { color:var(--text); }
.ticker-score {
  font-family:var(--font-data); font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:var(--r-full); line-height:1;
}
.t-critical { background:var(--red);    color:#fff; }
.t-high     { background:var(--orange); color:#fff; }
.t-medium   { background:var(--yellow); color:var(--text-inverse); }
.t-low      { background:var(--green);  color:var(--text-inverse); }
.ticker-sep { color:var(--text-dim); padding:0 var(--sp2); flex-shrink:0; }

/* ================================================================
   PAGE HEADER
   ================================================================ */
.page-header {
  background:rgba(6,10,20,0.88); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  padding:var(--sp5) var(--sp8);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp4);
  position:sticky; top:44px; z-index:var(--z-nav);
}
.page-header-left { display:flex; align-items:center; gap:var(--sp4); }
.back-btn {
  display:inline-flex; align-items:center; gap:var(--sp2);
  padding:var(--sp2) var(--sp3);
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:transparent; color:var(--text-muted);
  font-size:12px; font-weight:500; cursor:pointer;
  transition:all var(--t);
}
.back-btn:hover { border-color:var(--border-hover); color:var(--text); background:var(--bg-surface); }
.page-title    { font-size:20px; font-weight:700; letter-spacing:-0.01em; }
.page-subtitle { font-size:11px; color:var(--text-muted); font-family:var(--font-data); letter-spacing:0.05em; }
.header-actions { display:flex; align-items:center; gap:var(--sp3); }

/* ================================================================
   STATS BAR
   ================================================================ */
.stats-bar {
  display:flex; border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.18); overflow-x:auto;
}
.stat-item {
  flex-shrink:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--sp4) var(--sp8);
  border-right:1px solid var(--border); min-width:120px;
}
.stat-item:last-child { border-right:none; }
.stat-value {
  font-family:var(--font-data); font-size:26px; font-weight:700;
  color:var(--green); line-height:1; margin-bottom:4px;
}
.stat-value.red    { color:var(--red); }
.stat-value.orange { color:var(--orange); }
.stat-value.blue   { color:var(--blue); }
.stat-value.yellow { color:var(--yellow); }
.stat-label { font-size:10px; color:var(--text-muted); letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; }

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main-content { max-width:1640px; margin:0 auto; padding:var(--sp8); }

/* ================================================================
   GLASSMORPHISM CARD + FLASHLIGHT HOVER
   ================================================================ */
.card {
  --mx:50%; --my:50%;
  position:relative;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(20px);
  transition:border-color var(--t), box-shadow var(--t), transform var(--t-lg);
  overflow:hidden;
}
.card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(500px circle at var(--mx) var(--my), rgba(0,255,136,0.065), transparent 60%);
  opacity:0; transition:opacity var(--t); pointer-events:none; z-index:0;
}
.card:hover::before { opacity:1; }
.card:hover { border-color:var(--border-hover); transform:translateY(-3px); }
.card > * { position:relative; z-index:1; }

.card-red    { border-left:3px solid var(--red); }
.card-red:hover    { box-shadow:0 8px 40px rgba(255,68,68,0.1), 0 0 0 1px rgba(255,68,68,0.18); }
.card-orange { border-left:3px solid var(--orange); }
.card-orange:hover { box-shadow:0 8px 40px rgba(255,140,0,0.1), 0 0 0 1px rgba(255,140,0,0.18); }
.card-green  { border-left:3px solid var(--green); }
.card-green:hover  { box-shadow:0 8px 40px rgba(0,255,136,0.1), 0 0 0 1px rgba(0,255,136,0.18); }
.card-blue   { border-left:3px solid var(--blue); }
.card-blue:hover   { box-shadow:0 8px 40px rgba(68,136,255,0.1), 0 0 0 1px rgba(68,136,255,0.18); }
.card-yellow { border-left:3px solid var(--yellow); }
.card-dim    { border-left:3px solid var(--text-dim); opacity:0.6; }

/* ================================================================
   PERSON CARD
   ================================================================ */
.person-card { padding:var(--sp5); cursor:pointer; }
.person-card-top { display:flex; gap:var(--sp4); margin-bottom:var(--sp4); align-items:flex-start; }
.person-avatar {
  width:50px; height:50px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-data); font-size:15px; font-weight:700;
  flex-shrink:0; letter-spacing:-0.02em;
}
.av-tier1 { background:var(--red-dim);    color:var(--red);    border:1px solid var(--red-border); }
.av-tier2 { background:var(--orange-dim); color:var(--orange); border:1px solid var(--orange-border); }
.person-info { flex:1; min-width:0; }
.person-name  { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.person-role  { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person-org   { font-size:11px; color:var(--text-dim); margin-top:2px; }
.person-score-wrap { text-align:right; flex-shrink:0; }
.person-score { font-family:var(--font-data); font-size:30px; font-weight:700; line-height:1; }
.person-score-label { font-size:9px; color:var(--text-dim); letter-spacing:0.06em; text-transform:uppercase; }
.person-card-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--sp3); border-top:1px solid var(--border);
}
.person-stat { font-size:11px; color:var(--text-muted); }
.person-stat strong { color:var(--text); font-family:var(--font-data); }

/* ================================================================
   BADGES
   ================================================================ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-data); font-size:10px; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-full);
  line-height:1; white-space:nowrap; border:1px solid;
}
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.badge-green  { color:var(--green);  border-color:var(--green-border);  background:var(--green-dim); }
.badge-red    { color:var(--red);    border-color:var(--red-border);    background:var(--red-dim); }
.badge-orange { color:var(--orange); border-color:var(--orange-border); background:var(--orange-dim); }
.badge-yellow { color:var(--yellow); border-color:var(--yellow-border); background:var(--yellow-dim); }
.badge-blue   { color:var(--blue);   border-color:var(--blue-border);   background:var(--blue-dim); }
.badge-dim    { color:var(--text-muted); border-color:var(--border); background:var(--bg-surface); }
.badge-tier1  { color:var(--red);    border-color:var(--red-border);    background:var(--red-dim); }
.badge-tier2  { color:var(--orange); border-color:var(--orange-border); background:var(--orange-dim); }

/* ================================================================
   PROGRESS BAR
   ================================================================ */
.progress-wrap { margin:var(--sp3) 0; }
.progress-row { display:flex; align-items:center; justify-content:space-between; font-size:12px; margin-bottom:var(--sp1); }
.progress-track { height:5px; background:rgba(255,255,255,0.06); border-radius:var(--r-full); overflow:hidden; }
.progress-fill {
  height:100%; border-radius:var(--r-full);
  transition:width 1.2s cubic-bezier(0.16,1,0.3,1); position:relative;
}
.progress-fill::after {
  content:''; position:absolute; top:0; right:0; width:24px; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5));
}
.pf-green  { background:linear-gradient(90deg,#00cc66,var(--green));  box-shadow:0 0 10px rgba(0,255,136,0.5); }
.pf-orange { background:linear-gradient(90deg,#cc5500,var(--orange)); box-shadow:0 0 10px rgba(255,140,0,0.5); }
.pf-red    { background:linear-gradient(90deg,#cc1111,var(--red));    box-shadow:0 0 10px rgba(255,68,68,0.5); }
.pf-blue   { background:linear-gradient(90deg,#1133cc,var(--blue));   box-shadow:0 0 10px rgba(68,136,255,0.5); }
.pf-yellow { background:linear-gradient(90deg,#cc9900,var(--yellow)); box-shadow:0 0 10px rgba(255,204,0,0.5); }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp2);
  font-family:var(--font-ui); font-size:12px; font-weight:600;
  padding:var(--sp2) var(--sp4); border-radius:var(--r-sm); border:1px solid;
  cursor:pointer; transition:all var(--t); white-space:nowrap; letter-spacing:0.03em;
}
.btn-primary { background:var(--green-dim);  border-color:var(--green-border);  color:var(--green); }
.btn-primary:hover { background:rgba(0,255,136,0.2); border-color:var(--green); box-shadow:var(--green-glow); color:var(--green); }
.btn-ghost   { background:transparent; border-color:var(--border); color:var(--text-muted); }
.btn-ghost:hover { border-color:var(--border-hover); color:var(--text); background:var(--bg-surface); }
.btn-sm { font-size:11px; padding:5px 10px; }
.btn-lg { font-size:13px; padding:var(--sp3) var(--sp6); }

/* ================================================================
   FILTER BAR
   ================================================================ */
.filter-bar {
  display:flex; flex-wrap:wrap; gap:var(--sp3); align-items:center;
  padding:var(--sp4) var(--sp8); border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.15);
}
.filter-group { display:flex; align-items:center; gap:var(--sp2); }
.filter-label { font-size:11px; color:var(--text-muted); white-space:nowrap; letter-spacing:0.04em; }
.filter-input {
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text); font-family:var(--font-ui); font-size:13px;
  padding:7px 12px; outline:none; transition:border-color var(--t); min-width:0;
}
.filter-input:focus { border-color:var(--border-focus); }
.filter-input::placeholder { color:var(--text-dim); }
select.filter-input {
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238892a4' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px;
}
.filter-input.wide   { min-width:220px; }
.filter-input.narrow { width:80px; }

/* ================================================================
   DATA TABLE
   ================================================================ */
.table-wrap {
  overflow:auto; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--bg-surface);
  max-height:65vh;
}
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th {
  background:rgba(0,0,0,0.45); padding:var(--sp3) var(--sp4);
  text-align:left; font-family:var(--font-data);
  font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--border);
  white-space:nowrap; cursor:pointer; user-select:none;
  position:sticky; top:0; z-index:2; transition:color var(--t);
}
.data-table th:hover { color:var(--text); }
.data-table th.sorted { color:var(--green); }
.sort-arrow { margin-left:4px; opacity:0.4; font-size:10px; }
.sorted .sort-arrow { opacity:1; }
.data-table td { padding:var(--sp3) var(--sp4); border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,0.025); }
.score-cell {
  font-family:var(--font-data); font-weight:700; font-size:12px;
  text-align:center; padding:3px 8px; border-radius:var(--r-sm);
  display:inline-block; min-width:42px;
}
.sc-9 { background:rgba(255,34,34,0.2);  color:#ff2222; border:1px solid rgba(255,34,34,0.4); }
.sc-8 { background:var(--red-dim);    color:var(--red);    border:1px solid var(--red-border); }
.sc-7 { background:var(--orange-dim); color:var(--orange); border:1px solid var(--orange-border); }
.sc-6 { background:var(--yellow-dim); color:var(--yellow); border:1px solid var(--yellow-border); }
.sc-5 { background:var(--green-dim);  color:var(--green);  border:1px solid var(--green-border); }
.title-cell { max-width:480px; }
.title-cell a { color:var(--text); transition:color var(--t); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:460px; }
.title-cell a:hover { color:var(--green); }
.source-cell { font-family:var(--font-data); font-size:11px; color:var(--text-muted); }
.date-cell   { font-family:var(--font-data); font-size:11px; color:var(--text-dim); white-space:nowrap; }

/* ================================================================
   MODAL
   ================================================================ */
.modal-overlay {
  position:fixed; inset:0;
  background:var(--bg-overlay); backdrop-filter:blur(10px);
  z-index:var(--z-modal);
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--sp10) var(--sp5) var(--sp5);
  overflow-y:auto; opacity:0; pointer-events:none;
  transition:opacity var(--t);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-modal); border:1px solid var(--border-hover);
  border-radius:var(--r-xl); width:100%; max-width:820px;
  padding:var(--sp8); position:relative;
  transform:translateY(24px); transition:transform var(--t-lg);
  max-height:82vh; display:flex; flex-direction:column;
}
.modal-overlay.open .modal { transform:translateY(0); }
.modal-close {
  position:absolute; top:var(--sp4); right:var(--sp4);
  width:32px; height:32px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t);
}
.modal-close:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }
.modal-header { margin-bottom:var(--sp6); flex-shrink:0; }
.modal-body   { overflow-y:auto; flex:1; padding-right:var(--sp1); }
.modal-title  { font-size:22px; font-weight:700; margin-bottom:var(--sp2); }
.modal-meta   { display:flex; gap:var(--sp3); flex-wrap:wrap; align-items:center; }

/* ================================================================
   ARTICLE LIST (modals)
   ================================================================ */
.article-list { display:flex; flex-direction:column; gap:var(--sp3); }
.article-entry {
  padding:var(--sp4); border:1px solid var(--border); border-radius:var(--r-md);
  background:rgba(0,0,0,0.25); transition:border-color var(--t), background var(--t);
}
.article-entry:hover { border-color:var(--border-hover); background:rgba(0,0,0,0.4); }
.article-entry-top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp3); margin-bottom:var(--sp2); }
.article-title-link { font-size:13px; font-weight:500; color:var(--text); line-height:1.4; transition:color var(--t); }
.article-title-link:hover { color:var(--green); }
.article-footer { display:flex; gap:var(--sp4); font-size:11px; color:var(--text-muted); }
.article-date { font-family:var(--font-data); }

/* ================================================================
   TRACKER CARD (Prophecies page)
   ================================================================ */
.tracker-card { padding:var(--sp5); cursor:pointer; display:flex; flex-direction:column; gap:var(--sp3); }
.tracker-icon { font-size:28px; }
.tracker-name { font-size:15px; font-weight:700; line-height:1.3; }
.tracker-ref  { font-size:11px; color:var(--text-dim); font-family:var(--font-data); }
.tracker-desc { font-size:12px; color:var(--text-muted); line-height:1.5; flex:1; }
.tracker-footer { display:flex; justify-content:space-between; align-items:center; padding-top:var(--sp3); border-top:1px solid var(--border); margin-top:auto; }
.factors-mini { display:flex; flex-direction:column; gap:5px; }
.factor-row { display:flex; align-items:center; gap:var(--sp2); font-size:11px; color:var(--text-muted); }
.factor-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot-done    { background:var(--green); }
.dot-pending { background:var(--text-dim); }

/* ================================================================
   HOME NAV CARDS
   ================================================================ */
.nav-card {
  padding:var(--sp8); cursor:pointer;
  display:flex; flex-direction:column; gap:var(--sp4);
  min-height:220px; text-decoration:none;
}
.nav-card:hover { opacity:1; }
.nav-card-icon  { font-size:36px; }
.nav-card-title { font-size:18px; font-weight:700; color:var(--text); }
.nav-card-sub   { font-size:11px; color:var(--text-muted); font-family:var(--font-data); letter-spacing:0.06em; }
.nav-card-desc  { font-size:13px; color:var(--text-muted); line-height:1.5; flex:1; }
.nav-card-cta   { font-size:12px; font-weight:600; letter-spacing:0.04em; margin-top:auto; }

/* ================================================================
   SECTION HEADINGS
   ================================================================ */
.section-heading {
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-muted); display:flex; align-items:center; gap:var(--sp3);
  margin-bottom:var(--sp5);
}
.section-heading::after { content:''; flex:1; height:1px; background:var(--border); }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination { display:flex; align-items:center; justify-content:center; gap:var(--sp2); padding:var(--sp5); }
.page-btn {
  min-width:36px; height:36px; padding:0 var(--sp3);
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:transparent; color:var(--text-muted);
  font-family:var(--font-ui); font-size:13px; cursor:pointer;
  transition:all var(--t); display:flex; align-items:center; justify-content:center;
}
.page-btn:hover:not(:disabled) { border-color:var(--border-hover); color:var(--text); background:var(--bg-surface); }
.page-btn.active { border-color:var(--green-border); color:var(--green); background:var(--green-dim); }
.page-btn:disabled { opacity:0.3; cursor:default; }
.page-info { font-size:12px; color:var(--text-muted); font-family:var(--font-data); padding:0 var(--sp3); }

/* ================================================================
   SKELETON
   ================================================================ */
.skeleton {
  background:linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size:300% 100%; animation:shimmer 1.6s ease infinite; border-radius:var(--r-sm);
}
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state { text-align:center; padding:var(--sp12) var(--sp8); }
.empty-icon  { font-size:44px; opacity:0.25; margin-bottom:var(--sp4); }
.empty-title { font-size:16px; font-weight:600; color:var(--text-muted); margin-bottom:var(--sp2); }
.empty-text  { font-size:13px; color:var(--text-dim); }

/* ================================================================
   UTILITIES
   ================================================================ */
.flex { display:flex; } .flex-col { flex-direction:column; }
.items-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-2 { gap:var(--sp2); } .gap-3 { gap:var(--sp3); } .gap-4 { gap:var(--sp4); }
.mt-2 { margin-top:var(--sp2); } .mt-4 { margin-top:var(--sp4); } .mt-6 { margin-top:var(--sp6); }
.mb-2 { margin-bottom:var(--sp2); } .mb-4 { margin-bottom:var(--sp4); }
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-green  { color:var(--green); }   .text-red    { color:var(--red); }
.text-orange { color:var(--orange); }  .text-blue   { color:var(--blue); }
.text-yellow { color:var(--yellow); }  .text-muted  { color:var(--text-muted); }
.text-dim    { color:var(--text-dim); }
.font-data { font-family:var(--font-data); } .font-bold { font-weight:700; }
.hidden { display:none !important; }
.pulse { animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
.grid { display:grid; gap:var(--sp5); }
.grid-auto-4 { grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
.grid-auto-3 { grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); }
.grid-auto-2 { grid-template-columns:repeat(auto-fill, minmax(480px,1fr)); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1024px) { .main-content { padding:var(--sp5); } }
@media (max-width:768px) {
  .stats-bar, .filter-bar, .page-header { padding-left:var(--sp5); padding-right:var(--sp5); }
  .modal { padding:var(--sp5); }
}
@media (max-width:480px) {
  .page-title { font-size:16px; } .stat-value { font-size:20px; }
  .grid-auto-4,.grid-auto-3 { grid-template-columns:1fr; }
}