:root{--civet-bg:#07101d;--civet-panel:#0d1b2e;--civet-panel-2:#11243d;--civet-border:#223a59;--civet-text:#eef4fb;--civet-muted:#91a6c0;--civet-amber:#f5a623;--civet-amber-dark:#d88b14;--civet-blue:#4b8ff7;--civet-green:#2fc477;--civet-red:#ef5a67}
html{scroll-behavior:smooth}
body{background:var(--civet-bg)!important;color:var(--civet-text);font-family:Inter,"Segoe UI",sans-serif!important}
.glass{background:var(--civet-panel)!important;border:1px solid var(--civet-border)!important;box-shadow:0 10px 28px rgba(0,0,0,.2)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.topbar,.modal-bg{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.surface{background:var(--civet-panel);border:1px solid var(--civet-border);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.2)}
.brand-logo{width:auto;max-width:100%;object-fit:contain}
.civet-button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:10px;background:var(--civet-amber);color:#15100a;font-weight:800;padding:.75rem 1rem;transition:background .2s,transform .2s}
.civet-button:hover{background:var(--civet-amber-dark);transform:translateY(-1px)}
.module-launcher{display:flex;align-items:center;gap:12px;background:#15243a;border:1px solid #213852;border-left:3px solid transparent;border-radius:11px;padding:13px 14px;color:#d8e4f2;text-decoration:none;transition:background .2s,border-color .2s,transform .2s,color .2s}
.module-launcher:hover,.module-launcher.active{background:#1b2b42;border-color:#2b435e;border-left-color:var(--civet-amber);color:var(--civet-amber);transform:translateX(3px)}
.module-launcher .module-icon{color:var(--civet-amber);width:20px;text-align:center}
.module-launcher .module-copy{min-width:0;flex:1}
.module-launcher .module-title{font-size:14px;font-weight:800}
.module-launcher .module-description{font-size:12px;color:var(--civet-muted);margin-top:2px}
.module-panel{display:none;margin-top:12px;padding:14px;background:#091424;border:1px solid var(--civet-border);border-radius:12px}
.module-panel.open{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.clean-card{background:var(--civet-panel)!important;border:1px solid var(--civet-border)!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.clean-card:hover{border-color:#355579!important;box-shadow:0 12px 30px rgba(0,0,0,.24)!important}
@media(max-width:1023px){
  .sidebar{transform:translateX(-100%)!important}
  .sidebar.mobile-open{transform:translateX(0)!important}
  .main{margin-left:0!important;width:100%!important}
  .content{padding:16px 12px!important}
  .topbar{padding:10px 14px!important}
  .topbar-title{font-size:14px!important}
  .desktop-only{display:none!important}
}
@media(max-width:640px){
  body{font-size:14px!important}
  .surface,.glass,.clean-card{border-radius:12px!important}
  table{min-width:680px}
  .frame-box,.frame-box-sm{overflow:auto!important}
  .responsive-heading{align-items:flex-start!important;gap:12px;flex-direction:column!important}
  .responsive-heading .btn{width:100%;justify-content:center}
  .module-panel.open{grid-template-columns:1fr}
}

@keyframes civetModalPop {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.badge-success {
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  color: #4ade80 !important;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

.badge-secondary, .badge-missing {
  background: rgba(148, 163, 184, 0.08) !important;
  border: 1px dashed rgba(148, 163, 184, 0.25) !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}