*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Noto Sans TC",Arial,sans-serif;
  background:#f4f6fb;
  color:#1e2430;
}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:#ffffffcc;
  backdrop-filter:blur(10px);
  border-bottom:1px solid #e6ebf2;
}
.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:68px;
  gap:12px;
}
.brand a{
  font-size:1.1rem;
  font-weight:800;
  color:#1f3c88;
}
.nav{display:flex;flex-wrap:wrap;gap:10px}
.page{padding:24px 16px 40px}
.pill,.btn,button{
  border:none;
  border-radius:14px;
  background:#1f3c88;
  color:#fff;
  padding:11px 16px;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn.secondary{
  background:#eef2fb;
  color:#22324c;
}
.btn.small{
  padding:8px 12px;
  border-radius:10px;
  font-size:.9rem;
}
.flash-stack{
  display:grid;
  gap:10px;
  margin-bottom:16px;
}
.flash{
  background:#fff4da;
  border:1px solid #f0d38a;
  color:#6f5600;
  padding:12px 14px;
  border-radius:14px;
}
.auth-card,.wide-card,.empty-box{
  max-width:760px;
  margin:0 auto;
  background:#fff;
  border:1px solid #e8edf6;
  border-radius:24px;
  padding:24px;
  box-shadow:0 12px 30px rgba(31,60,136,.06);
}
.page-head{margin-bottom:18px}
.page-head h1{
  margin:0 0 8px;
  font-size:1.85rem;
}
.page-head p,.subtext,.muted{color:#66758e}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:18px;
}
.card{
  background:#fff;
  border:1px solid #e8edf6;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(31,60,136,.06);
}
.card-body{padding:18px}
.cover{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#edf2fb;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.form-grid label{
  display:grid;
  gap:8px;
  font-weight:700;
  color:#2d3a53;
}
.form-grid input,
.form-grid textarea,
.form-grid select,
.toolbar input,
.toolbar select{
  width:100%;
  padding:12px 14px;
  border:1px solid #d7dfec;
  border-radius:14px;
  background:#fff;
  font-size:15px;
  color:#1e2430;
}
.form-grid textarea{resize:vertical}
.full{grid-column:1/-1}
.row-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.gap{gap:12px}
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:800;
  text-transform:lowercase;
}
.status-pending{background:#fff0c7;color:#7a5c00}
.status-approved{background:#d9f6e6;color:#0f6a3b}
.status-rejected{background:#ffe0e0;color:#9e2222}
.status-waiting{background:#dfe9ff;color:#244ca7}
.table-wrap{
  background:#fff;
  border:1px solid #e8edf6;
  border-radius:24px;
  overflow:auto;
  box-shadow:0 12px 30px rgba(31,60,136,.06);
}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:920px;
}
.table th,.table td{
  padding:14px 12px;
  border-bottom:1px solid #edf1f7;
  text-align:left;
  vertical-align:top;
}
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.inline-form{
  display:flex;
  gap:8px;
  align-items:center;
}
.detail-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
}
.empty-box{text-align:center}
@media (max-width:900px){
  .form-grid,.detail-grid{grid-template-columns:1fr}
  .row-between{flex-wrap:wrap;align-items:flex-start}
  .nav{justify-content:flex-start}
  .topbar-inner{align-items:flex-start;padding:12px 0}
  .page-head h1{font-size:1.5rem}
}