body{font-family:'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;margin:0;padding:0;background-color:#f4f4f9;color:#333;line-height:1.6}
header{display: flex;background-color:#3498db;color:#fff;padding:1rem;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
header h1{margin:0;font-size:1.5rem}
.status-bar{margin-left: auto;display:flex;justify-content:flex-end;align-items:center;gap:15px;font-size:.9rem}
#network-status.online{color:#afa}
#network-status.offline{color:#faa}
.view{padding:1rem}
.hidden{display:none!important}
#login-view{max-width:400px;margin:50px auto;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
input[type=text],input[type=password],textarea,select{width:100%;padding:10px;margin:8px 0 16px;display:inline-block;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}
button{background-color:#3498db;color:#fff;padding:10px 15px;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}
button:hover{opacity:0.75}
.error{color:red;margin-top:10px}
.controls{margin-bottom:1rem}
.record-item{position: relative;background:#fff;padding:15px;margin-bottom:10px;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,0.1);display:flex;justify-content:space-between;}
.record-item p{margin:0 0 5px 0}
.record_info_title{margin:0 0 5px}
.record-meta{font-size:.8rem;color:#777}
.sync-status {
	padding: .25rem .75rem;
	border-radius: 12px;
	font-size: .75rem;
	position: absolute;
	right: 15px;
	top: 15px;background: #FEF9C3;
}
.status-synced {
	background-color: #DCFCE7;
	color: #000;
}
.status-pending_create,.status-pending_update{background-color:#fff3cd;color:#856404}
.record-actions {
	display: flex;
	align-items: center;
}
.edit_btn {
	margin-top: auto;padding: 5px 10px;
}
.admin-notification{background-color:#e74c3c;color:#fff;padding:10px;margin-bottom:10px;border-radius:5px}
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center;z-index:1000;overflow-y:auto}
.form-container{background:#fff;padding:1rem;border-radius:8px;width:100%;max-width:600px;margin:20px 0}
.form-group{margin-bottom:1rem}
.flex-group{display:flex;gap:1rem}
.flex-group > div{flex:1}
.gps-group{display:flex;gap:.5rem;align-items:center}
.gps-group input{flex:1}



#photo-preview{max-width:100px;max-height:100px;margin-top:10px;border:1px solid #ccc}

#record-form {
	font-size: 0.75rem;
	line-height: 1.3;
}
.field-set { border: 1px solid #ccc; margin: 10px 0; padding: 10px; }
.field-group { margin: 5px 0; }
#sets {

}
#sets input[type="text"], #sets textarea, #sets select {
	width: 100%;
	padding: 8px;
	margin: 5px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
.add_set {
	padding: 5px 10px;
	background: #10B981;
}

.set {
	padding-bottom: 10px;
	border-bottom: 1px dashed;
	margin-bottom: 10px;
}
.set_title {
	font-weight: bold;font-size: 0.85rem;
	text-align: center;
	background: #f5f5f5;
	position: relative;
	margin-bottom: 5px;
	height: 24px;
	line-height: 24px;
	border-radius: 5px;
}
button.remove_set {
	position: absolute;
	right: 0;
	height: 24px;
	width: 24px;
	background: none;
	top: 0;
	padding: 0;
	color: #333;
	font-size: 1.25rem;
	line-height: 24px;
}

.remove_set:before,.remove_set:after{content:'';width:14px;height:2px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;background:#333;transform: rotate(45deg);}
.remove_set:after{width:2px;height:14px;}


.subset {
	display: flex;
	gap: 5px;
	align-items: center;
}
.add_subset {
	padding: 5px 10px;
	background: #33C293;
}


button.remove_subset {
	position: relative;
	height: 24px;
	width: 24px;
	background: #f4f4f4;
	margin-left: 5px;
	padding: 12px;
	border-radius: 50%;
}
.remove_subset:before {
	content: '';
	width: 8px;
	height: 2px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #F46989;
}

.admin-notification { background: #ffe; color: #a00; margin: 5px 0; padding: 5px; }



@media (min-width: 768px) {
main {
	padding: 1rem;
}
.form-container{background:#fff;padding:2rem;border-radius:8px;width:90%;max-width:600px;margin:20px 0}
}