:root{
  --fm-navy: #0F2E4D;
  --fm-red: #C62828;
  --fm-iq-blue: #2EA3FF;
  --fm-green: #2E7D32;
  --fm-amber: #F9A825;

  --fm-bg: #F5F7FA;
  --fm-card: #FFFFFF;
  --fm-border: #E3E7ED;

  --fm-text-primary: #1F2933;
  --fm-text-secondary: #6B7280;

  --fm-radius: 12px;
  --fm-shadow: 0 4px 10px rgba(0,0,0,0.05);

  --bg: var(--fm-bg);
  --card: var(--fm-card);
  --border: var(--fm-border);
  --navy: var(--fm-navy);
  --red: var(--fm-red);
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 24px;
  background: var(--fm-bg) !important;
  color: var(--fm-text-primary) !important;
  font-family: Tahoma, sans-serif;
}

@media (max-width: 640px){
  html, body{ padding: 16px; }
}

h1, h2, h3, h4, h5, h6{
  font-family: Inter, Tahoma, sans-serif;
  font-weight: 600;
  color: var(--fm-text-primary);
}

a{
  color: var(--fm-navy);
  text-decoration: none;
}
a:hover{
  color: #0b243d;
  text-decoration: underline;
}

.app-header{
  margin: -24px -24px 16px -24px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid var(--fm-border);
}
@media (max-width: 640px){
  .app-header{
    margin: -16px -16px 12px -16px;
    padding: 10px 16px;
  }
}
.app-header__inner{
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.app-header__brand{
  font-family: Inter, Tahoma, sans-serif;
  font-weight: 600;
  color: var(--fm-navy);
}
.app-header__title{
  font-family: Inter, Tahoma, sans-serif;
  font-weight: 600;
  color: var(--fm-text-primary);
}

.page, .wrap{
  max-width: 1100px;
  margin: 0 auto;
}

.card, .statusBox, .activityBox, .tasksBox, .attachBox, .punchBox,
.contactBox, .scopeBox, .inspirationBox{
  background: var(--fm-card) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius) !important;
  box-shadow: var(--fm-shadow);
}

.muted, .sub, .jwSmall, .leadSub, .activityMeta{
  color: var(--fm-text-secondary) !important;
}

input, select, textarea{
  background: #fff !important;
  color: var(--fm-text-primary) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius) !important;
  font-family: Tahoma, sans-serif;
}
input:focus, select:focus, textarea:focus{
  outline: 2px solid rgba(46,163,255,0.25);
  border-color: var(--fm-iq-blue) !important;
}

button, .btn{
  font-family: Tahoma, sans-serif;
  font-weight: 600;
  border-radius: var(--fm-radius) !important;
  border: 1px solid var(--fm-navy) !important;
  background: var(--fm-navy) !important;
  color: #fff !important;
}
button:hover, .btn:hover{
  background: #0c2540 !important;
}

.btn-secondary{
  background: transparent !important;
  color: var(--fm-text-primary) !important;
  border: 1px solid var(--fm-border) !important;
}
.btn-danger{
  background: var(--fm-red) !important;
  border-color: var(--fm-red) !important;
  color: #fff !important;
}
.btn-accent{
  background: var(--fm-iq-blue) !important;
  border-color: var(--fm-iq-blue) !important;
  color: #fff !important;
}

.chip{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--fm-border);
  color: var(--fm-text-primary);
  background: #fff;
  font-family: Tahoma, sans-serif;
  font-weight: 600;
}
.chip.active{
  background: var(--fm-red);
  border-color: var(--fm-red);
  color: #fff;
}

.pill, .badge{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--fm-border);
  background: #fff;
  color: var(--fm-text-secondary);
  font-family: Tahoma, sans-serif;
  font-weight: 600;
}

table, .table{
  background:#fff !important;
  border:1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius) !important;
}
th{
  background:#fff !important;
  color: var(--fm-text-primary) !important;
  border-bottom:1px solid var(--fm-border) !important;
}
td{
  color: var(--fm-text-primary) !important;
  border-bottom:1px solid var(--fm-border) !important;
}