:root{
  --brand:#FDB913;        /* primary yellow */
  --play:#8DC63F;         /* EL PLAY */
  --build:#00A0DC;        /* EL BUILD */
  --create:#F04E37;       /* EL CREATE */
  --text:#0F172A; --muted:#6B7280;
  --border:#FFE071; --row:#FAFAFB;
}

*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

.container{max-width:1220px;margin:0 auto;padding:18px}

/* Header */
.header .brand{display:flex;align-items:center;gap:10px}
.dot{width:14px;height:14px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 6px rgba(253,185,19,.2);display:inline-block}
.header h1{margin:0;font-weight:900}
.subtitle{margin:.2rem 0 0;color:var(--muted)}

/* Cards */
.panel{background:#fff;border:3px solid var(--brand);border-radius:18px;padding:16px;margin:14px 0}
.table-panel{padding:0}

/* Filters */
.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1100px){.filters{grid-template-columns:repeat(2,1fr)}}
.field label{display:block;font-size:12px;font-weight:900;margin:0 0 6px}
.field select{width:100%;height:42px;border:2px solid var(--build);border-radius:12px;padding:0 12px;font-weight:800;outline:none;transition:box-shadow .2s, transform .12s}
.field select:disabled{opacity:.5;cursor:not-allowed}
.field select:hover:not(:disabled){box-shadow:0 0 0 4px rgba(0,160,220,.18)}
.field .hint{font-size:11px;color:#64748B;margin-top:6px}

.btn {
  height:42px;
  width:100%;
  border:none;
  border-radius:12px;
  background: var(--brand);   /* official brand yellow */
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.btn:hover {
  background: #e5a900;        /* slightly darker shade for hover */
}



/* Meta */
.meta{display:flex;align-items:center;gap:8px;padding:8px 2px 0;color:#111827}
.pulse{width:8px;height:8px;border-radius:50%;background:#22C55E;display:inline-block;animation:pulse 1.8s infinite;box-shadow:0 0 0 0 rgba(34,197,94,.6)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 14px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.muted{color:var(--muted)} .divider{color:#E5E7EB}

/* Table */
.thead-strip{padding:10px 16px;color:#fff;font-weight:900;border-bottom:3px solid var(--brand);background:#999;border-top-left-radius:15px;border-top-right-radius:15px}
.strip--play{background:var(--play)} .strip--build{background:var(--build)} .strip--create{background:var(--create)}

.table-wrap{overflow:auto}
.board{width:100%;border-collapse:separate;border-spacing:0}
.board thead th{white-space:nowrap;text-align:left;padding:12px 16px;font-size:12px;letter-spacing:.5px;border-bottom:2px solid var(--brand);background:#fff;position:sticky;top:0}
.board tbody td{padding:12px 8px;border-bottom:1px solid var(--border);font-size:14px}
.board tbody tr:nth-child(even){background:var(--row)}
.board tbody tr:hover{background:#FFF8DE}
.loading{text-align:center;color:var(--muted);padding:20px}
.bold{font-weight:900;background:#FFF9C4}

.error{margin:12px 16px 16px;padding:12px 14px;border:2px solid #FECACA;background:#FEF2F2;color:#991B1B;border-radius:12px}
.foot{color:var(--muted);padding:8px 0 22px}


.board tbody tr.bold,
.board tbody tr.bold > td {
  background: #FFF9C4 !important;    
  font-weight: 900 !important;    
}
.board tbody tr.bold > td {
  border-left: 4px solid var(--brand);
  padding-left: 5px; 
}

#searchInput {
  width: 100%;
  height: 42px;
  border: 2px solid var(--brand);
  border-radius: 12px;
  padding: 0 12px;
  font-weight: 600;
  outline: none;
}
#searchInput:focus {
  box-shadow: 0 0 0 4px rgba(253,185,19,.25);
}