/* Global */
*{box-sizing:border-box}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: url('background.png') no-repeat center/cover fixed;
  margin:0;
  color:#fff;
  text-align:center;
  padding:2rem;
}
.container{max-width:1000px;margin:0 auto;padding:40px 20px}
.card{
  background: rgba(255,165,0,0.5);
  color:#fff;
  border-radius:12px;
  padding:24px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
h1,h2{margin:.2rem 0 1rem}
.logo{width:90px}
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
}
.tile{
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:18px;
  height:120px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  cursor:pointer;transition: transform .18s ease, background .2s ease;
}
.tile:hover{transform:scale(1.04); background: rgba(0,0,0,.45)}
input,select,textarea{
  width:100%;padding:10px;border:none;border-radius:8px;background:#1e1e1e;color:#fff;
}
label{display:block;text-align:left;margin:.6rem 0 .25rem;font-weight:600}
button{
  appearance:none;border:none;border-radius:10px;background:#fff;color:#333;
  font-weight:700;padding:10px 18px;cursor:pointer
}
button:hover{background:#eaeaea}
.back{display:inline-block;margin-top:14px;text-decoration:underline;cursor:pointer}
.table{
  width:100%;border-collapse:collapse;margin-top:14px;text-align:left
}
.table th,.table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.2)}
.header-bar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin:12px 0 18px
}
.small{width:auto;min-width:220px}
.badge{display:inline-block;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);padding:6px 10px;border-radius:999px;font-size:.9rem}
/* Calendar */
.calendar{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:16px
}
.day{border-radius:10px;background:rgba(0,0,0,.2);min-height:90px;padding:8px;text-align:left;position:relative}
.day .num{font-weight:800;opacity:.9}
.day.highlight{outline:2px solid #fff}
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000
}
.modal .sheet{background:#fff;color:#222;max-width:720px;width:100%;border-radius:14px;padding:18px}
.modal .sheet h3{margin:0 0 8px}
.modal .sheet table{width:100%;border-collapse:collapse}
.modal .sheet th,.modal .sheet td{border-bottom:1px solid #ddd;padding:8px 10px;text-align:left}
.close-x{position:absolute;top:6px;right:12px;cursor:pointer;font-weight:800}
/* Login card */
.login-card{max-width:420px;margin:12vh auto 0}