@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#C62828;
  --red-dark:#b71c1c;
  --dark:#1A1A1A;
  --mid:#2d2d2d;
  --light:#F5F4F0;
  --white:#fff;
  --border:#e0ddd6;
  --muted:#888;
  --font-display:'Syne',sans-serif;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'DM Mono',monospace;
}
body{font-family:var(--font-body);background:var(--light);color:var(--dark);font-size:15px;line-height:1.7}

/* TOPBAR */
.topbar{background:var(--dark);padding:0 40px;height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--red);position:sticky;top:0;z-index:50}
.topbar-brand{display:flex;align-items:center;gap:12px}
.topbar-logo{font-family:var(--font-display);font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.5px}
.topbar-logo span{color:var(--red)}
.topbar-program{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.3);padding-left:12px;border-left:1px solid rgba(255,255,255,0.1)}
.topbar-right{display:flex;align-items:center;gap:20px}
.topbar-user{font-size:12px;color:rgba(255,255,255,0.4)}
.topbar-logout{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.3);cursor:pointer;padding:4px 10px;border:1px solid rgba(255,255,255,0.1);font-weight:600}
.topbar-logout:hover{color:#fff;border-color:rgba(255,255,255,0.3)}
.topbar-back{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.4);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:6px}
.topbar-back:hover{color:#fff}

/* PAGE HEADER */
.page-header{background:var(--dark);padding:40px;border-bottom:1px solid rgba(255,255,255,0.06)}
.page-header .tag{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:10px}
.page-header h1{font-family:var(--font-display);font-size:32px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-0.5px}
.page-header h1 em{color:var(--red);font-style:normal}
.page-header .sub{font-size:14px;color:rgba(255,255,255,0.4);margin-top:8px;max-width:560px;line-height:1.7}

/* CONTAINER */
.container{max-width:900px;margin:0 auto;padding:48px 40px}

/* BUTTONS */
.btn{display:inline-block;padding:12px 28px;font-size:13px;font-weight:700;letter-spacing:0.04em;cursor:pointer;border:none;font-family:var(--font-body);text-decoration:none;transition:all 0.15s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#333}
.btn-outline{background:transparent;color:var(--dark);border:2px solid var(--dark)}
.btn-outline:hover{background:var(--dark);color:#fff}

/* CARDS */
.card{background:#fff;border:1px solid var(--border);padding:28px}
.card-red{border-left:4px solid var(--red)}

/* CHIP */
.chip{display:inline-block;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;padding:4px 10px}
.chip-red{background:var(--red);color:#fff}
.chip-dark{background:var(--dark);color:#fff}
.chip-outline{border:1px solid var(--border);color:var(--muted)}

/* UTILITY */
.red{color:var(--red)}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono)}