* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 1rem; background: #f7f7f8; color: #222; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.controls { display: flex; gap: .5rem; margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: .5rem; border-bottom: 1px solid #eee; text-align: left; font-size: .9rem; }
.row-overdue_unsent { background: #ffd5d5; font-weight: bold; }
.row-red { background: #ffe3e3; }
.row-yellow { background: #fff6d5; }
.row-normal { background: #fff; }
button, .controls select { padding: .4rem .6rem; cursor: pointer; }
.login-card { max-width: 320px; margin: 4rem auto; padding: 2rem; background: #fff; border-radius: 8px; }
.login-card input { display: block; width: 100%; margin: .5rem 0; padding: .6rem; }
.error { color: #c00; }
dialog label { display: block; margin: .4rem 0; }
dialog input, dialog select, dialog textarea { width: 100%; padding: .4rem; }
@media (max-width: 600px) { th:nth-child(3), td:nth-child(3) { display: none; } }
#tmpl-dialog { width: min(680px, 92vw); max-height: 86vh; }
.tmpl-head { display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; }
.tmpl-head h2 { flex:0 0 auto; font-size:1.1rem; }
.tmpl-head input[type=search] { flex:1; padding:.4rem; }
.tmpl-tabs { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.6rem; }
.tmpl-tabs button { padding:.3rem .6rem; border:1px solid #ccc; background:#fff; border-radius:4px; cursor:pointer; }
.tmpl-tabs button.active { background:#0a7; color:#fff; border-color:#0a7; }
.tmpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.4rem; overflow-y:auto; max-height:56vh; }
.tmpl-card { padding:.6rem; border:1px solid #ddd; border-radius:6px; background:#fafafa; cursor:pointer; text-align:left; }
.tmpl-card:hover { background:#eef; border-color:#88a; }
.tmpl-plans { display:flex; flex-direction:column; gap:.4rem; }
.tmpl-plan { padding:.6rem; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer; text-align:left; }
.tmpl-plan:hover { background:#eef; }
@media (max-width:600px){ .tmpl-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); } }