:root {
  --bg:#0b0f14;
  --fg:#e7eef7;
  --muted:#a6b4c3;
  --card:#121a24;
  --line:#223042;
  --line-soft:#1a2635;
  --ok:#1f7a3a;
  --err:#9b2c2c;
  --accent:#69a7ff;
  --accent-strong:#8dd6c9;
  --hero-glow:rgba(105,167,255,0.18);
  --topbar-height: 96px;
  --sticky-nav-gap: 10px;
  --sticky-nav-top: calc(var(--topbar-height) + var(--sticky-nav-gap));
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(circle at top left, rgba(71,126,214,0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(77,163,146,0.12), transparent 28%),
    linear-gradient(180deg, #091018 0%, #0b0f14 38%, #0b1118 100%);
  color:var(--fg);
}
a{ color:var(--fg); }
.container{ padding:18px; max-width:1200px; margin:0 auto; }
.topbar{ display:flex; flex-direction:column; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(11,15,20,0.95); backdrop-filter: blur(6px); z-index:9999; }
.topbar-main{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; width:100%; }
.topbar-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto; justify-content:flex-end; }
.brand a{ text-decoration:none; font-weight:700; font-size:16px; }
.nav{ display:flex; gap:10px; flex-wrap:wrap; width:100%; }
.nav a{ text-decoration:none; padding:6px 8px; border-radius:8px; font-size:13px; }
.nav a:hover{ background:var(--card); }
.acting{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.acting select{ padding:6px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:13px; }
.role-switcher{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.role-switcher select{ padding:6px; border-radius:8px; border:1px solid #2a4562; background:#0d1e30; color:var(--fg); font-size:13px; font-weight:600; }
.org-switcher{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.org-switcher select{ padding:6px; border-radius:8px; border:1px solid #2c4f2e; background:#102716; color:var(--fg); font-size:13px; font-weight:600; }
.user-menu{ position:relative; }
.user-menu summary{ list-style:none; cursor:pointer; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:13px; }
.user-menu summary::-webkit-details-marker{ display:none; }
.user-menu-panel{ position:absolute; right:0; margin-top:8px; min-width:200px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; z-index:10001; }
.user-menu-panel a{ text-decoration:none; padding:6px 8px; border-radius:8px; }
.user-menu-panel a:hover{ background:#0f1620; }
.user-menu-panel form{ margin:0; }
.user-menu-panel button{ width:100%; padding:7px 8px; border-radius:8px; border:1px solid var(--line); background:#152233; color:var(--fg); cursor:pointer; text-align:left; }
.user-menu-panel button:hover{ background:#1a2a41; }
.subbar{ display:flex; justify-content:space-between; gap:16px; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:12px; margin:12px 0 18px; }
.subbar.warn{ border-color:#7b5b1e; }
.flashwrap{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.flash{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); }
.flash.ok{ border-color: #2b6b3f; }
.flash.err{ border-color: #7a2d2d; }
h1{ margin:8px 0 12px; }
h2{ margin:16px 0 10px; }
.muted{ color:var(--muted); font-size:12px; }
.table{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.table th, .table td{ border-bottom:1px solid var(--line); padding:10px 10px; vertical-align:top; }
.table th{ text-align:left; font-size:12px; color:var(--muted); }
.form{ display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line); padding:12px; border-radius:12px; }
.form input, .form select, .form textarea{ padding:8px; border-radius:10px; border:1px solid var(--line); background:#0f1620; color:var(--fg); }
.form button{ padding:10px; border-radius:10px; border:1px solid var(--line); background:#152233; color:var(--fg); cursor:pointer; }
.form button:hover{ background:#1a2a41; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .grid2{ grid-template-columns: 1fr; } }
.cards{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
@media (max-width: 900px){ .cards{ grid-template-columns: repeat(2,1fr);} }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; }
.card .k{ color:var(--muted); font-size:12px; }
.card .v{ font-size:24px; font-weight:700; margin-top:6px; }
.inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.inline input, .inline select{ padding:6px; border-radius:10px; border:1px solid var(--line); background:#0f1620; color:var(--fg); }
.btnlink{ display:inline-block; padding:6px 8px; border:1px solid var(--line); border-radius:10px; text-decoration:none; background:#0f1620; }
.btnlink:hover{ background:#1a2a41; }
.occ{ border:1px solid var(--line); border-radius:12px; padding:10px; margin:10px 0; background:#0f1620; }
.occ-title{ font-weight:700; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cardwide{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; }

.landing-shell{ display:flex; flex-direction:column; gap:28px; padding-bottom:36px; }
.landing-hero{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
  gap:24px;
  align-items:stretch;
}
.landing-copy,
.landing-auth-panel,
.landing-feature-card,
.landing-process-step,
.landing-stat-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(18,26,36,0.96), rgba(12,18,27,0.96));
  border:1px solid var(--line);
  box-shadow:0 24px 80px rgba(0,0,0,0.22);
}
.landing-copy,
.landing-auth-panel{ border-radius:24px; }
.landing-copy{
  padding:32px;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.landing-copy::before,
.landing-auth-panel::before{
  content:"";
  position:absolute;
  inset:auto auto 0 0;
  width:220px;
  height:220px;
  background:radial-gradient(circle, var(--hero-glow), transparent 70%);
  pointer-events:none;
}
.landing-eyebrow{
  display:inline-flex;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #2b4060;
  background:rgba(14,28,45,0.82);
  color:#b9d4ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.landing-copy h1{
  margin:18px 0 14px;
  max-width:11ch;
  font-size:clamp(2.6rem, 5vw, 4.4rem);
  line-height:0.95;
  letter-spacing:-0.04em;
}
.landing-lede{
  max-width:60ch;
  color:#d0dceb;
  font-size:1.05rem;
  line-height:1.7;
}
.landing-actions{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin:26px 0 30px;
}
.landing-primary-cta{
  padding:12px 16px;
  border-color:#355986;
  background:linear-gradient(135deg, #17355a, #214b79);
  font-weight:700;
}
.landing-primary-cta:hover{ background:linear-gradient(135deg, #21446f, #2a5d93); }
.landing-secondary-link{
  color:#c6d5e8;
  text-decoration:none;
  font-size:14px;
}
.landing-secondary-link:hover{ color:#fff; text-decoration:underline; }
.landing-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.landing-stat-card{
  border-radius:18px;
  padding:18px;
  border:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(15,23,34,0.9), rgba(10,15,23,0.92));
}
.landing-stat-value{
  display:block;
  margin-bottom:8px;
  color:#f3f7fd;
  font-size:1.6rem;
  font-weight:800;
}
.landing-stat-label{
  display:block;
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}
.landing-auth-panel{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.landing-auth-header h2{ margin:8px 0 8px; }
.landing-auth-header p{ margin:0; color:#c0cfdf; line-height:1.6; }
.landing-auth-kicker{
  color:var(--accent-strong);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.landing-auth-form{
  display:grid;
  gap:12px;
}
.landing-auth-form label{
  font-size:13px;
  color:#c7d4e2;
  font-weight:600;
}
.landing-auth-form input,
.landing-auth-form select{
  padding:12px 13px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#0d1520;
  color:var(--fg);
}
.landing-auth-form input::placeholder{ color:#6f8195; }
.landing-auth-buttons{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px;
}
.landing-auth-buttons button{
  flex:1 1 150px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid #325981;
  background:linear-gradient(135deg, #153250, #1f4871);
  color:var(--fg);
  cursor:pointer;
  font-weight:700;
}
.landing-auth-buttons button:hover{ background:linear-gradient(135deg, #1c4168, #275785); }
.landing-auth-buttons .landing-secondary-button{
  border-color:var(--line);
  background:#121c28;
}
.landing-auth-buttons .landing-secondary-button:hover{ background:#182432; }
.landing-auth-result{
  min-height:64px;
  margin:0;
  padding:12px 14px;
  white-space:pre-wrap;
  border-radius:16px;
  border:1px solid var(--line-soft);
  background:#0b121b;
  color:#b8c8d9;
  font-size:13px;
  line-height:1.5;
}
.landing-section{ display:flex; flex-direction:column; gap:18px; }
.landing-section-heading h2{ margin:10px 0 6px; font-size:clamp(1.8rem, 3vw, 2.6rem); }
.landing-section-copy{ max-width:60ch; font-size:14px; line-height:1.7; }
.landing-feature-grid,
.landing-process-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.landing-feature-card,
.landing-process-step{
  border-radius:22px;
  padding:24px;
}
.landing-feature-card h3,
.landing-process-step h3{
  margin:0 0 10px;
  font-size:1.05rem;
}
.landing-feature-card p,
.landing-process-step p{
  margin:0;
  color:#bdcddd;
  line-height:1.7;
}
.landing-process{ padding-top:6px; }
.landing-step-number{
  display:inline-block;
  margin-bottom:14px;
  color:var(--accent-strong);
  font-size:12px;
  font-weight:800;
  letter-spacing:0.08em;
}

.badge{ padding:4px 8px; border-radius:6px; font-size:11px; font-weight:600; text-transform:uppercase; }
.badge.open{ background:#1f3a1f; color:#6ec978; border:1px solid #2b5c2d; }
.badge.accepted{ background:#1a2c3f; color:#6ba4e7; border:1px solid #2a4562; }
.badge.declined{ background:#3f2020; color:#e77272; border:1px solid #5c2a2a; }
.badge.pending{ background:#3f3420; color:#e7c672; border:1px solid #5c4a2a; }

.form textarea{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .topbar{ padding:8px 12px; gap:12px; }
  .topbar-main{ gap:12px; }
  .topbar-controls{ gap:6px; }
  .brand a{ font-size:14px; }
  .nav{ gap:6px; }
  .nav a{ padding:4px 6px; font-size:12px; }
  .acting select{ padding:4px 6px; font-size:12px; }
  .role-switcher select{ padding:4px 6px; font-size:12px; }
  .org-switcher select{ padding:4px 6px; font-size:12px; }
  .user-menu summary{ padding:4px 6px; font-size:12px; }
  .container{ padding:12px; }
  h1{ margin:6px 0 10px; font-size:22px; }
  h2{ margin:12px 0 8px; font-size:18px; }
  .subbar{ flex-direction:column; gap:8px; margin:8px 0 12px; padding:8px; }
  .row2{ grid-template-columns:1fr; }
  .inline{ gap:6px; font-size:13px; }
  .table th, .table td{ padding:8px; font-size:13px; }
  .cards{ grid-template-columns: 1fr; }
  .landing-shell{ gap:22px; }
  .landing-hero,
  .landing-feature-grid,
  .landing-process-grid,
  .landing-stat-grid{ grid-template-columns:1fr; }
  .landing-copy{ min-height:auto; padding:24px; }
  .landing-copy h1{ max-width:none; font-size:2.5rem; }
  .landing-auth-panel{ padding:20px; }
}

@media (max-width: 600px) {
  .topbar{ align-items:stretch; padding:6px 12px; gap:8px; }
  .topbar-main{ align-items:stretch; gap:8px; }
  .topbar-controls{ width:100%; margin-left:0; justify-content:flex-start; }
  .topbar-controls > *{ width:100%; }
  .brand{ align-self:flex-start; }
  .nav{ width:100%; }
  .acting{ justify-content:space-between; width:100%; }
  .role-switcher{ justify-content:space-between; width:100%; }
  .org-switcher{ justify-content:space-between; width:100%; }
  .user-menu{ width:100%; align-self:stretch; }
  .user-menu summary{ width:100%; }
  .user-menu-panel{ right:0; left:auto; }
  .container{ padding:10px; }
  h1{ margin:4px 0 8px; font-size:20px; }
  h2{ margin:10px 0 6px; font-size:16px; }
  .table{ font-size:12px; }
  .table th, .table td{ padding:6px; }
  .grid2{ gap:12px; }
  .form{ padding:10px; gap:8px; }
  .form button{ padding:8px; }
  .landing-copy,
  .landing-auth-panel,
  .landing-feature-card,
  .landing-process-step{ border-radius:18px; }
  .landing-copy{ padding:20px; }
  .landing-copy h1{ font-size:2.15rem; line-height:1; }
  .landing-actions{ margin:20px 0 24px; }
  .landing-auth-buttons button{ width:100%; }
}