:root{
  --blue-900:#1E3A8A;
  --blue-600:#2563EB;
  --blue-400:#60A5FA;
  --gray-900:#111827;
  --gray-100:#F3F4F6;
  --white:#fff;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;margin:0;background:var(--gray-100);color:var(--gray-900)}
h1,h2{margin:0 0 0.5rem}
header{background:linear-gradient(90deg,var(--blue-900),var(--blue-600));color:var(--white);padding:1rem 1.25rem}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.square-card{background:#fff;border-radius:12px;padding:1rem;box-shadow:0 8px 20px rgba(17,24,39,0.12)}
.square-card h2{font-size:1.1rem;margin-bottom:0.5rem;color:var(--blue-900)}
.square-card ol{margin:0;padding-left:1.1rem}
.badge{display:inline-block;background:var(--blue-400);color:#083344;border-radius:999px;padding:0.15rem 0.5rem;font-weight:600}
footer{padding:2rem 1rem;color:#6b7280;text-align:center}
.notice{padding:0.75rem 1rem;background:#FEF3C7;border:1px solid #F59E0B;border-radius:8px}
form input, form select, form button, form textarea{padding:0.6rem 0.8rem;border-radius:8px;border:1px solid #E5E7EB;font-size:1rem}
form button{background:var(--blue-600);color:#fff;border:none;font-weight:600;cursor:pointer}
form button:hover{filter:brightness(0.95)}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(17,24,39,0.08)}
.table th,.table td{padding:0.7rem 0.9rem;border-bottom:1px solid #e5e7eb;text-align:left}
.table th{background:#f9fafb;font-weight:700}
.alert{color:#b91c1c;background:#fee2e2;border:1px solid #ef4444;padding:0.75rem 1rem;border-radius:10px}

/* Top navigation */
.topnav{position:sticky;top:0;z-index:50;background:#ffffffcc;backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid #e5e7eb}
.topnav .wrap{max-width:1100px;margin:0 auto;display:flex;gap:1rem;align-items:center;padding:0.6rem 1rem}
.topnav .brand{font-weight:800;color:var(--blue-900);text-decoration:none}
.topnav .navlink{color:#1f2937;text-decoration:none;padding:0.35rem 0.55rem;border-radius:8px}
.topnav .navlink:hover{background:#f3f4f6}
.topnav .spacer{flex:1}
.sitefooter{padding:1.25rem 1rem;color:#6b7280;text-align:center}
button.danger{background:#b91c1c;color:#fff}

/* Responsive nav */
.topnav{position:sticky;top:0;z-index:50;background:#ffffffcc;backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid #e5e7eb}
.topnav .wrap{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:0.5rem;padding:0.6rem 1rem}
.topnav .brand{font-weight:800;color:var(--blue-900);text-decoration:none;white-space:nowrap}
.topnav .menu-toggle{margin-left:auto;display:none;border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:0.4rem 0.6rem;cursor:pointer}
.topnav .menu-toggle:focus{outline:2px solid var(--blue-400);outline-offset:2px}
.topnav .links{display:flex;gap:0.5rem;align-items:center;margin-left:1rem}
.topnav .links a{color:#1f2937;text-decoration:none;padding:0.35rem 0.55rem;border-radius:8px}
.topnav .links a:hover{background:#f3f4f6}
.topnav .spacer{flex:1}

@media (max-width: 800px){
  .topnav .menu-toggle{display:inline-block}
  .topnav .links{display:none;flex-direction:column;align-items:stretch;width:100%;padding:0.5rem 0}
  .topnav .links[data-open="true"]{display:flex}
  .topnav .wrap{flex-wrap:wrap}
}
.sitefooter{padding:1.25rem 1rem;color:#6b7280;text-align:center}
.sitefooter small{display:block;color:#9ca3af;margin-top:0.25rem}

/* Dancer Portal: responsive actions + table behavior */
.actions { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.actions form { display:inline-block; }
.actions button { flex:1 1 auto; min-width:8rem; }

/* Optional: wrap long content instead of forcing a wide cell */
.actions-cell { white-space: normal; }

/* Keep tables from pushing the viewport horizontally */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Mobile tweaks */
@media (max-width: 640px){
  .actions { width:100%; }
  .actions button { flex:1 1 100%; }   /* stack buttons full-width */
  .table { width:100%; table-layout:auto; }
  .table th, .table td { white-space:normal; }  /* allow wrapping */
}