/* front styles */
.tss-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; background:#d89d2a22; padding:1rem; }
.tss-form, .tss-table { background:#e0a437; padding:2rem; border-radius:8px; }
.tss-field { margin-bottom: 1rem; }
.tss-checkbox { display:flex; align-items:center; gap:.5rem; margin:.25rem 0; }
.tss-checkbox em.tss-counter { margin-left:auto; font-style:normal; opacity:.9; background:#fff4; padding:.1rem .4rem; border-radius:4px; }
.tss-summary { width:100%; border-collapse:collapse; background:#f8f8f8; }
.tss-summary th, .tss-summary td { border:1px solid #ddd; padding:.5rem .75rem; }
.tss-hint { color:#7a1; } .tss-error { color:#a11; } .req { color:#a11; }
.tss-modal { position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; }
.tss-modal-content { background:#fff; padding:1rem 1.5rem; border-radius:8px; width:min(880px, 92vw); }
.tss-close { float:right; cursor:pointer; font-size:24px; }
.tss-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:.5rem 0; }
.tss-row label { display:block; font-weight:600; }
.tss-row input { width:100%; padding:.5rem; }
@media(max-width:900px){ .tss-grid{ grid-template-columns:1fr;} .tss-row{grid-template-columns:1fr;} }